CSS - Overview

Stylesheets

Let's create a stylesheet for our Portfolio Project that applies to all of our pages!

First, we need to create a separate file with the .css file extension. Let's go ahead and call it style.css. To keep things organized, let's create that file inside its own css directory (since we might want to add multiple stylesheets to the same document). HINT:

    mkdir css
    touch style.css

Next, we need to link that stylesheet to each of our pages. In the <head> of each page, add the following:

   <!-- for your landing page -->
   <link rel="stylesheet" href="css/style.css">

   <!-- for all other pages -->
   <link rel="stylesheet" href="../css/style.css">

Do you know why we need different href values for our landing page and our projects and blog pages?

At this point, there shouldn't be any difference in the way your pages look or behave, since there's nothing in style.css. For now, you should stage, commit, push, and deploy your page to make sure that everything looks the same in the browser.

Concepts

The CSS Box Model

Every HTML element has a box around it, even if you cannot see it. We can show a visible border around every HTML element on the page using the CSS border property and the "match all" selector:

* {
  border: 1px solid red;
}

Try putting a border around each "boxed" element while you try out a few of the following properties:

  1. The CSS padding property defines the extra space inside the border:

    * {
  padding: 10px;
}

    You can also assign different values to the padding on each side of an element with specific properties (e.g. padding-left, padding-right, etc.) or through the shorthand padding property. As an example, the following three padding constructs compile to the same appearance:

    * {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}
    * {
  padding: 5px 10px 5px 10px;
}
    * {
  padding: 5px 10px;
}

  2. The CSS margin property defines the extra space outside the border:

    * {
  margin: 30px;
}

    The same shorthand rules that worked for padding also work for margin.

  3. We can also manually set the width and height of the element itself.

    * {
  width: 300px;
  height: 200px;
}

    What's the difference? Check it out in the Elements panel of Chrome Dev Tools to inspect the spacing around the element.

    NOTE: you can open the Elements panel with CMD + Option + I in macOS or with CTRL + I in Linux or Windows

Complex CSS Selectors & Combinators

As our documents grow, we'll need to leverage more complex CSS selection syntax. Here are a few important selectors to cherish and to keep:

  • The Universal Selector

     * {
   /* css that applies to every element */
 }

  • The Direct Decendant Selector

     div > p {
   /* css that only applies to direct child elements (no grand-children) of an element */
   /* in this case, all of the diret child paragraph elements of divs across the page */
 }
      <div>
    <p>This would be selected by 👆🏾because it is a DIRECT CHILD.</p>
  </div>

  <hr>

  <div>
    <section>
      <h2>Some Heading</h2>
      <p>This would NOT be selected by 👆🏾because it is NOT a DIRECT CHILD.</p>
    <section>
  </div>

  • The Descendant Selector

     div p {
   /* css that applies to all descendants of an element of a certain type */
   /* in this case, all paragraph elements of divs across the page
      (even if they're nested in other elements, like spans or lists) */
 }

    In the HTML shown in 2 👆🏾, this selector would grab <p> regardless of whether it was a direct child or not - as long as it's a child.

  • The Direct Sibling Selector

    div + footer {
  /* css that applies to the first footer sibling of a div */
}
      <div><p>Some generic 'block-level' content</p></div>
  <footer><p>Some content. Now, this footer immediately follows the div as its sibling, so it will get selected.<p><footer>
      <div><p>Some generic 'block-level' content</p></div>
  <footer><p>Some content. Now, this footer immediately follows the div as its sibling, so it will get selected.<p><footer>
      <div><p>Some generic 'block-level' content</p></div>
  <p>I have come in between the siblings!</p>
  <footer><p>Some content. Now, this footer NOT get selected because it is not ADJACENT to its 'sibling.'<p><footer>

  • The General Sibling Selector

div ~ footer {
  /* css that applies to any footers that are siblings to divs */
}

In the HTML code 👆🏾, ~ will select the <footer> b/c it is a sibling - doesn't matter if it's adjacent or not.

These rules might seem like overkill right now, but they're extremely useful for when you have large stylesheets of CSS rules that apply across multiple pages. Speaking of which...

Pseudo Selectors

There are some selectors that can be used to make some very basic calculations about the state of your markup, and add styles accordingly. These aren't real selectors, since they aren't able to select anything on their own. Rather, these are used to filter the results of a selector into a useful subset of HTML elements to style. Here are a few of the most useful:

  1. :first-of-type

    li:first-of-type {
  /* applies to the first list item of every list */
}

  2. :last-of-type

    li:last-of-type {
  /* applies to the last list item of every list */
}

  3. :nth-of-type(n)

    li:nth-child(2) {
  /* applies to the second list item of every list */
}

  4. :nth-of-type(an)

    li:nth-of-type(2n) {
  /* applies to every other list item of every list */
}

  5. :hover

    li:hover {
  /* applies to every list item the user is hovering over */
}
PreviousLoopsNextCSS - Practical Applications

Last updated

Was this helpful?