Intro to CSS

Linking Stylesheets in HTML

Use the <link> tag:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link rel="stylesheet" href="/styles/site.css">
    <link rel="stylesheet" href="in-same-folder.css">
  </head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


  <body>
  </body>
</html>

Absolute path to another website’s CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">

Relative path to your website url. ex: to access a CSS file on your localhost server at http://localhost:3000/styles/site.css:

<link rel="stylesheet" href="/styles/site.css">
<link rel="stylesheet" href="in-same-folder.css">

Importing CSS in CSS Files

Absolute path imports:

@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');

Relative path imports:

@import url('./styles/site.css');
@import "in-same-folder.css";

CSS Selectors

div {
  background-color: red;
}
.active {
  background-color: red;
}

To select a button with class of active:

button.active {
  background-color: blue;
}
#list-1 {
  background-color: red;
}

To turn all elements background-color: red:

* {
  background-color: red;
}

To select all elements with a title attribute:

[title] {
  background-color: red;
}

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

To select all input tags with the type attribute of submit, <input type="submit">:

input[type="submit"] {
  background-color: red;
}

Compound class selectors

<div class="box yellow"></div>
<div class="box orange"></div>
<div class="circle orange"></div>

Select the div with classes of box and yellow:

.box.yellow {
  background-color: yellow;
}

This will NOT select the div with classes of box and yellow because there is a space between the class names:

.box .yellow {
  background-color: yellow;
}

One rule for many selectors

Separate selectors with a comma, ,, to make a single rule for all selectors:

Make h1, h2, h3, h4, h5, h6 all have font-size: 14px;:

h1, h2, h3, h4, h5, h6 {
  font-size: 14px;
}

Combinators

To select all <abbr> descendants of <p>:

p abbr {
  text-transform: uppercase;
}

Will select all the following <abbr> tags:

<p>
  <abbr></abbr>
  <div>
    <abbr></abbr>
    <div>
      <abbr></abbr>
    </div>
  </div>
</p>
h1 + h2 {
  font-style: italic;
}

Will select h2:

<body>
  <h1>
  </h1>
  <h2>
  </h2>
</body>

Will not select h2:

<body>
  <h1>
  </h1>
  <div></div>
  <h2>
  </h2>
</body>
.menu > .is-active {
  background-color: #ffe0b2;
}

Will select <div class="is-active">:

<body>
  <div class="menu">
    <div class="is-active">
      Belka
    </div>
  </div>
</body>

Will NOT select <div class="is-active">:

<body>
  <div class="menu">
    <div>
      <div class="is-active">
        Strelka
      </div>
    </div>
  </div>
</body>

Pseudo-classes Selectors

Some examples of Pseudo-classes: - active: applies to elements like buttons when activated by a person, like when they “push down” on the button - checked: applies to radio inputs, checkbox inputs, and options in drop downs when the user has toggled it into an “on” state - disabled: applies to any disabled element, like a disabled button or input - first-child: applies to the first element among a group of sibling elements - focus: applies to elements that have the current focus, like inputs and buttons - hover: applies to elements that currently have the pointing device (cursor) directly over it (it is problematic on touchscreens because it may never match the element because there is no persistent pointing device) - invalid: applies to any form element in an invalid state due to client-side form validation - last-child: applies to the last element among a group of sibling elements not(selector): represents elements that do not match the provided selector - required: applies to form elements that are required - valid: applies to any form element in a valid state - visited: applies to anchor tags of which the user has already been to the URL that the href points to

To select <a> on hover pseudo-selector:

a:hover {
  background-color: red;
}

To select <a> on hover of a <button> parent:

button:hover a {
  background-color: red;
}
<body>
  <button>
    <a></a>
  </button>
</body>

Pseudo-selectors

The two that you will use most often are the ::after and the ::before pseudo-selectors. Both of them create a pseudo-element as a child of the element to which the property applies.

Pseudo-selector example:

<body>
  <main>
  </main>
</body>
main::after {
  background-color: red;
  height: 30px;
  width: 30px;
}

The same as:

<body>
  <main>
  </main>
  <div class="after">
  </div>
</body>
main + .after {
  background-color: red;
  height: 30px;
  width: 30px;
}

CSS Properties