The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

DevTools For Beginners: Get Started with CSS

In this tutorial, you learn how to use CSS to style a web page. You also learn how to use Chrome DevTools to experiment with CSS changes.

This is the second tutorial in a series of tutorials that teaches you the basics of web development and Chrome DevTools. You gain hands-on experience by actually building your own website. You don't have to complete the first tutorial before doing this one. You can start here. Set up your code shows you how to get set up.

Currently your site looks like this:

What your site currently looks like.
Figure 1. What your site currently looks like

After completing the tutorial, it will look like this:

What your site will look like at the end of the tutorial.
Figure 2. What your site will look like at the end of the tutorial

Goals

By the end of this tutorial, you will understand:

  • How to use CSS to style a web page.
  • How to use Chrome DevTools to experiment with CSS.
  • The difference between CSS and CSS frameworks.

You'll also have a real website!

Prerequisites

Before attempting this tutorial, complete the following prerequisites:

  • Complete Get Started with HTML and the DOM or make sure that you have an understanding of HTML and the DOM similar to what's taught in that tutorial.
  • Download the Google Chrome web browser. This tutorial uses a set of web development tools, called Chrome DevTools, that are built into Google Chrome.

Set up your code

In order to start creating your site, you need to set up your code:

  1. If you have already completed the first tutorial in this series, skip this section! Continue using your code from the last tutorial, Get Started with HTML and the DOM.
  2. Open the source code. This tab of your browser will be called the editing tab.

    The editing tab.
    Figure 3. The editing tab

  3. Click dfb2. A menu pops up.

    The Project Options menu.
    Figure 4. The Project Options menu

  4. Click Remix This. Glitch creates a copy of the project that you can edit. Note that Glitch generates a random name for the new project.

  5. Click Show Live. Another tab opens with a live view of your site. This tab of your browser will be called the live tab.

    The live tab.
    Figure 5. The live tab

Understand CSS

CSS is a computer language that determines the layout and styling of web pages. For example, here is a paragraph with a border:

This has been styled with CSS.

Here is the HTML and CSS code used to create that paragraph:

<p style="border: 1px dashed red; padding: 5px;">
  This has been styled with CSS.
</p> 

style="border: 1px dashed red; padding: 5px;" probably looks new to you. The rest should look familiar. If not, complete Get Started with HTML and the DOM before attempting this tutorial.

Add inline styles

Use inline styles when you want to apply styles to a single element. Try it now:

  1. Go back to the editing tab and open index.html.

    index.html.
    Figure 6. index.html

  2. Add style="background-color: aliceblue;" to your <nav>. In the code block below, the bold line of code is the one you need to change. The rest is just there so you can be sure that you're putting the new code in the right place.

    ...
    <header>
      <p>Welcome to my site!</p>
    </header>
    <nav style="background-color: aliceblue;">
    <ul>
      <li><a href="/">Home</a></li>
      ...
    

  3. Go to the live tab to see the changes! The background of the <nav> section is now blue.

    The background color behind the Home and Contact links is now blue.
    Figure 7. The background color behind the Home and Contact links is now blue

Re-use styles on a single page with internal stylesheets

Earlier, you saw an inline style that applied a style to a single <p> tag like this:

<p style="border: 1px dashed red; padding: 5px;">
  This has been styled with CSS.
</p>

What if you wanted all of the <p> elements on your webpage to be styled the same way? You'd have to copy and paste the code into every single <p> tag on your site. That's a lot of time and effort. And, if you needed to make an edit, you'd have to change every tag again. Internal stylesheets allow you to write your CSS once so that it applies to multiple elements. Try it now:

  1. In the live tab, click Contact to go to the contact page. Notice the font of Home and Contact.

    The Contact page.
    Figure 8. The Contact page

  2. In the editor tab, go to contact.html.

  3. Add the following code to contact.html. Remember, the bold code is what you need to add. The other code is just there so you know where to put the new code.

    ...
    <head>
      ...
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
        li a {
          font-family: 'Courier New', Courier, Serif;
        }
      </style>
    </head>
    ...
    

  4. Go back to the live tab.

  5. Click Contact to go back to the contact page. The font of Home and Contact has changed.

    The font of the Home and Contact links has changed.
    Figure 9. The font of the Home and Contact links has changed

Understand internal stylesheets

Internal stylesheets apply styles using selectors. Selectors are patterns that may apply to one or more HTML elements. For example, in the previous code:

<style>
  li a {
    font-family: 'Courier New', Courier, serif;
  }
</style>

li a is a selector that translates to "any <li> that contains an <a>". The browser changes the font of the Home and Contact links because they match this pattern.

<li><a href="/">Home</a></li>
<li><a href="/contact.html">Contact</a></li>

font-family: 'Courier New', Courier, serif is a declaration. A declaration is made of two parts: a property and a value. font-family is the property, and 'Courier New', Courier, serif is the value of that property. The property describes a general way that you can change the element's style, and the value says how exactly it should change. For example, font-family: 'Courier New', Courier, serif gives the browser this instruction: "Set the font of elements that match the pattern li a to 'Courier New'. If that font isn't available, use Courier. If that isn't available, use serif."

Add multiple selectors to a ruleset

A block of CSS code like what you see below is called a ruleset.

li a {
  font-family: 'Courier New', Courier, monospace;
}

Use commas to add multiple selectors to a ruleset. Try it now:

  1. In the editor tab, open contact.html.
  2. After li a type , h1.

    ...
    <style>
      li a, h1 {
        font-family: 'Courier New', Courier, Serif;
      }
    </style>
    ...
    

    This tells the browser to style <h1> elements the same way that it styles elements that match the pattern li a.

  3. Go to the live tab.

  4. Click the Contact link to go back to the contact page. Now, Contact Me! has the same font as the navigation links.

    The text 'Contact Me!' now has the same font as the Home and Contact links.
    Figure 10. The text "Contact Me!" now has the same font as the Home and Contact links

Experiment with DevTools

As you continue your journey to master web development, you'll find that CSS can be tricky. You'll write some CSS and expect it to display one way, but the browser does something completely different. Chrome DevTools makes it easy to experiment with changes and immediately see how those changes affect the page.

Add a declaration to an existing rulest in DevTools

When you want to iterate on the style of an existing element, add a declaration to an existing ruleset. Try it now:

  1. Right-click the Home link and select Inspect.

    Inspecting the Home link.
    Figure 11. Inspecting the Home link

    DevTools opens up alongside your page. The code that represents the Home link, <a href="/">Home</a> is highlighted blue in the DOM Tree. This should be familiar from Get Started with HTML and the DOM. In the Styles tab below the DOM Tree you can see the font-family: 'Courier New', Courier, serif declaration that you added to contact.html earlier.

    The Styles tab is below the DOM Tree.
    Figure 12. The Styles tab is below the DOM Tree

    If your DevTools window is wide, the Styles tab is to the right of the DOM Tree.

    The Styles tab is to the right of the DOM Tree.
    Figure 13. The Styles tab is to the right of the DOM Tree

  2. Click the whitespace below font-family: 'Courier New', Courier, Serif to add a new declaration.

    Adding a new declaration.
    Figure 14. Adding a new declaration

  3. Type color and then press Enter. The autocomplete UI suggests options as you type.

    Typing 'color'.
    Figure 15. Typing color

  4. Type magenta and then press Enter again. All of the text on the contact page is now magenta.

    Typing 'magenta'.
    Figure 16. Typing magenta

Edit a declaration in DevTools

You can also edit existing declarations in DevTools. Try it now:

  1. Click the magenta square next to magenta. A color picker pops up.

    The Color Picker.
    Figure 16. The Color Picker

  2. Use the color picker to change the font text to a color that you like.

    Changing the font color to purple with the Color Picker.
    Figure 17. Changing the font color to purple with the Color Picker

Add a new ruleset in DevTools

You can also add new rulesets in DevTools. Try it now:

  1. Click New Style Rule New Style Rule, which is next to .cls. An empty ruleset appears with a as the selector.

    Adding a new rule.
    Figure 18. Adding a new rule

  2. Replace a with a:hover.

    Replacing 'a' with 'a:hover'.
    Figure 19. Replacing a with a:hover

    :hover is a pseudo-class. Use pseudo-classes to style elements when they enter special states. For example, the a:hover style only takes effect when you're hovering over an <a> element.

  3. Click between the brackets to add a new declaration.

  4. Type background-color for the declaration name and then press Enter.

    Typing 'background-color'.
    Figure 20. Typing background-color

  5. Type green for the declaration value and then press Enter.

    Typing 'green'.
    Figure 21. Typing green

  6. Hover your mouse over the Home link. The background of the link turns green.

    Hovering over the Home link to reveal its green background.
    Figure 22. Hovering over the Home link to reveal its green background

Re-use styles across pages with external stylesheets

Earlier you added this internal stylesheet to contact.html:

<style>
  li a, h1 {
    font-family: 'Courier New', Courier, monospace;
  }
</style>

What if you wanted to style index.html the same way? What if you had a thousand pages and you wanted to apply these styles to all of them? You'd have to copy and paste this internal stylesheet into every single web page on your site. External stylesheets allow you to write your CSS once yet apply it to multiple pages. Try it now:

  1. First, reload the live tab to remove the changes that you made in DevTools.

    After reloading the page the changes that were made in DevTools are gone.
    Figure 23. After reloading the page the changes that were made in DevTools are gone

  2. Go back to the editor tab and open contact.html.

    contact.html
    Figure 24. contact.html

  3. Delete everything between <style> and </style>, including <style> and </style>.

    The style tag has been removed.
    Figure 25. The style tag has been removed

  4. Go to index.html and remove style="background-color: aliceblue;" from the <nav> tag.

    You have now removed all of the CSS that you previously added to your site.

    The inline style has been removed from the nav element.
    Figure 26. The inline style has been removed from the nav element

  5. Click New File.

    The new file dialog.
    Figure 27. The new file dialog

  6. Replace cool-file.js with style.css and then click Add File.

    Typing 'style.css'.
    Figure 28. Typing style.css

  7. Paste this code into style.css:

    li a, h1 {
      font-family: 'Courier New', Courier, Serif;
    }
    a:hover {
      background-color: green;
    }
    nav {
      background-color: aliceblue;
    }
    

    Adding code to style.css
    Figure 29. Adding code to style.css

    At this point, you have created an external stylesheet, but your HTML doesn't know that it exists, yet.

  8. Open index.html.

  9. Add <link rel="stylesheet" href="style.css"> to your HTML.

    ...
    <head>
      ...
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css">
    </head>
    ...
    

    Linking to style.css.
    Figure 30. Linking to style.css

  10. Go to contact.html and add the link there, too.

    Linking to style.css in contact.html.
    Figure 31. Linking to style.css in contact.html

  11. Go to the live tab. The home page now has the same font from the last section and a blue navigation section.

    The home page.
    Figure 32. The home page

  12. Click the Contact link to go to the contact page. The contact page has the same formatting as the home page.

    The contact page
    Figure 33. The contact page

Use a CSS framework

CSS frameworks are collections of styles built by other developers that make it easier to create attractive web sites. Instead of defining styles yourself, a framework gives you a collection of styles that you can use on your page elements.

  1. Copy the following code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  2. Go to the editing tab and paste the code into contact.html.

    Linking to the framework in contact.html.
    Figure 34. Linking to the framework in contact.html

  3. Paste the code into index.html, as well.

    Linking to the framework in index.html
    Figure 35. Linking to the framework in index.html

  4. Go back to the live tab to view your changes. While the background color of the <nav> and the font of the li a elements are the same, the font of the other elements has changed.

    Some of the font on the home page has changed because of the framework.
    Figure 36. Some of the font on the home page has changed because of the framework

Use a class

In the last section, you added Bootstrap to your web pages, which changed the fonts of some of the elements on your site. CSS frameworks can help you make major changes to your page with very little code. Try it now by changing your header:

  1. Copy this code: class="jumbotron jumbotron-fluid"
  2. Add this code to your <header> tag in index.html.

    Adding the jumbotron class in index.html.
    Figure 37. Adding classes in index.html

  3. Add the code to your <header> tag in contact.html, too.

    Adding the jumbotron class in contact.html.
    Figure 38. Adding classes in contact.html

  4. View your changes in the live tab. There's a big, grey box around your header now.

    The header now has a big, grey box around it.
    Figure 39. The header now has a big, grey box around it

Understand classes

Classes let you assign collections of styles to arbitrary elements. For example, setting the class attribute of the <header> tags to jumbotron applied the following styles to them:

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

One advantage of classes is that they let you apply styles to whatever elements you want. For example, suppose you want to set the background color of some <p> elements to purple, but not all of them. You could define the style in a class:

.custom-background {
  background-color: purple;
}

And then apply the class to only the <p> elements that you want to style:

<p>This won't be purple.</p>
<p class="custom-background">This will be purple.</p>
<p>This won't be purple.</p>
<p class="custom-background">This will be purple.</p>

Align elements

Bootstrap also provides classes for aligning elements. Try it now:

  1. Go back to the editor tab and open index.html.
  2. Add class="container-fluid" to your <body> tag.

    Adding the 'container-fluid' class.
    Figure 40. Adding the container-fluid class

  3. Wrap your <nav> and <main> elements in <div class="row">. Make sure to put </div> after </main> in order to properly close the new tag.

    Adding a row.
    Figure 41. Adding a row

  4. Add class="col-3" to your <nav> tag and class="col-9" to your <main> tag.

    Adding the 'col-3' and 'col-9' classes.
    Figure 42. Adding the col-3 and col-9 classes

  5. View your changes in the live tab.

    The nav content is now to the left of the main content.
    Figure 43. The nav content is now to the left of the main content

Next steps

Congratulations! You're done!

  • The best way to get better at web development is to build more sites. Don't worry about breaking stuff. Just have fun and learn as much as you can along the way.
  • Check out Introduction to CSS to learn lots more about styling web pages.
  • Work through our Get Started with Viewing and Changing CSS tutorial to learn more about how you can use DevTools to experiment with a page's CSS.

Feedback

Was this page helpful?