Stylesheet

Tags
CSS
Summary

Use styles to change the look of your content. Collect styles for a page in a stylesheet. Link the stylesheet to your page.

Situation

You want to change the look of content on a page. For example, you want to change the font and background color of the entire page, the font color of headings, etc.

Action
  • Create a new file with a .css extension. That's the stylesheet.
  • Add rules to the stylesheet defining the look you want.
  • Link the .css file to your page.

Example HTML:

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Doggos</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.         <link rel="stylesheet" href="styles.css">
  8.     </head>
  9.     <body>
  10.         <h1>True facts about doggos</h1>
  11.  
  12.         <h2>Happiness</h2>
  13.         <p>Doggos make humans happy. They do.</p>
  14.         <p>It's a fact.</p>
  15.  
  16.         <h2>Love</h2>
  17.         <p>Your doggo loves you.</p>
  18.     </body>
  19. </html>

Line 7 tells the browser to look in the file styles.css to find out how to style the HTML.

Here's the stylesheet, styles.css:

  1. body {
  2.     font-family: sans-serif;
  3.     background-color: antiquewhite;
  4. }
  5.  
  6. h1 {
  7.     color: darkred;
  8.     font-family: cursive
  9. }
  10.  
  11. h2 {
  12.     color: darkgreen;
  13. }
Where referenced
Styles and stylesheets