How to apply your CSS to your HTML

Inline styles

CSS Declaration

            declaration
          ┌──────┴───────┐
<p style="font-size: 20px;">Lorem ipsum dolor</p>
          └───┬───┘  └─┬─┘
          property   value

Example

stylesheets/inline/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1 style="color: blue;">Lorem ipsum</h1>
  <p style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p style="color: blue;">Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p style="font-size: 20px; color: blue;">Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>
</html>

Output:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

Internal stylesheet

CSS rulesets

 selector
   ┌┴┐     declaration
    p { ┌──────┴───────┐
        font-size: 20px;
    }   └───┬───┘  └─┬─┘
        property   value

Declaration block

p {
  font-size: 20px;
  text-align: justify;
}

Group of selectors

p, h1 {
  color: blue;
}

Example

stylesheets/internal/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 20px;
      text-align: justify;
    }
    p, h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>
</html>

Output:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

External stylesheet

Structure

<link rel="stylesheet" href="css/master.css">

Example

site
├── css
│   └── master.css
└── index.html

stylesheets/external/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/master.css">
</head>
<body>
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>
</html>

stylesheets/external/css/master.css:

p {
  font-size: 20px;
  text-align: justify;
}
p, h1 {
  color: blue;
}

Output:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

Mixed stylesheet

site
├── css
│   └── master.css
└── index.html

stylesheets/mixed/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/master.css">
  <style>
    p {
      font-size: 20px;
      text-align: justify;
    }
    p, h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Lorem ipsum</h1>
  <p style="color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Eveniet amet laudantium aperiam nisi ratione at, blanditiis...</p>
  <p>Culpa possimus obcaecati laudantium nesciunt consequatur...</p>
</body>
</html>

stylesheets/mixed/css/master.css:

p {
  font-size: 17px;
  color: blue;
}

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Eveniet amet laudantium aperiam nisi ratione at, blanditiis...

Culpa possimus obcaecati laudantium nesciunt consequatur...

CSS Question

What is the color of the first and last paragraph in the Inline, Internal, External and Mixed Stylesheet? Why?

References