Permalink Overview of CSS

Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out.

Read: Reference

🛑 Stop when you get to the section titled “Changing the default behavior of elements”.

Permalink Start with a simple page

Create www/css.html with the following content

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage</title>
  </head>
  <body>
    <h1>Main heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>

Permalink Create your first style sheet

Create www/main.css with the following content

1
2
3

body {
    font-family: cursive;
}

Note: Just like HTML, use indentation so it’s easier for humans to read

Permalink Add this new CSS to the page! 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Main heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>

Note the following:

  • The change is only the addition of a single line, see line 5.
  • This new line is inside the head element, not the body

Permalink What affect did this have?

link

See how all of the text inside the body is now cursive?

Permalink Example of a CSS selector

CSS is a very powerful tool, and honestly it’s pretty complex, but you can do simple things too.

Permalink Make the heading cursive

We could make the following change to www/main.css

1
2
3

h1 {
    font-family: cursive;
}

Note: The change is on line: 1

Permalink Make the paragraph cursive

We could make the following change to www/main.css

1
2
3

p {
    font-family: cursive;
}

Permalink How to affect a nested element

You can do all kinds of things with CSS. So for example, you might have a nested span element inside of the paragraph. You could then use this to influence a single word.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Main heading</h1>
    <p>This is a <span>paragraph</span></p>
  </body>
</html>
1
2
3

p > span {
    color: blue;
}

Note the following:

  1. The new span on line 9 of the HTML
  2. The selector is now p > span, this describes a span inside a p
  3. The style applied is changing the color to blue, instead of the font

Permalink Completion

See if you can make your page look like this

link

Permalink Bonus

Another way to apply style is based on attributes. For example you can add class attributes to the HTML, and then reference this via the stylesheet.

For example, here is a paragraph with a blue class:

1

<p class="blue">This is a paragraph</p>

And here is some css that applies style to that particular paragraph:

1
2
3
4
5
6
7

h1 {
    padding: 1;
}

p.blue {
    color: blue;
}

Note: You can ignore the h1 style above, it’s just there to demonstrate how you can have multiple styles inside a single file (separated by whitespace)

Check out the reference for more information.

Permalink Bonus completion

See if you can make your page look like this

link