CSS Tutorial - Lesson 1 - Including CSS Styles

16/04/2025, by Ivan

I won’t explain why CSS is needed. If you’ve opened this tutorial, it means you want to learn it. I’ll just say that CSS has powerful capabilities that allow you to build layouts of any complexity. In turn, using CSS means you'll need to stop using various HTML tag attributes like size, color, bgcolor, align, and others, which will only “interfere” with CSS.

There are at least three ways to connect CSS to your HTML file. Let’s explore the simplest, then the second, and finally the most proper method.

CSS inside a tag

You can use CSS via the style attribute:

<div style="width: 200px; height: 100px;">
  Block
</div>

This defines a block that is 200x100 pixels. Here's how CSS is written: first, we write the style="" attribute, and then we put the CSS inside the quotes.

style="property:value;property:value;property:value"

We write each style rule as a property followed by a colon and then the value. Each rule ends with a semicolon.

CSS in the head of the HTML document

Use the <style></style> tag to add internal CSS:

<html>
 <head>
  <title>CSS Tutorial</title>
  <style type="text/css">
  CSS code goes here
  </style>
 </head>
 <body>
  <p>Learn CSS with drupalbook.org</p>
 </body>
</html>

The <style> tag is written inside <head></head>, after the <title>. Let’s add some sample CSS:

<html>
 <head>
  <title>CSS Tutorial</title>
  <style type="text/css">
   body {
     background: #eeeeee; /* page background */
     font-size: 14px;     /* font size */
   }
   p {
     color: #ff0000;      /* text color */
   }
  </style>
 </head>
 <body>
  <p>Learn CSS with drupalbook.org</p>
  <p>2nd line: Learn CSS with drupalbook.org</p>
 </body>
</html>

When we define CSS for tags (e.g., p), all elements of that type get the styles. CSS inside the <style> tag is written using the syntax:

selector {
  property: value;
  property: value;
}

Each style ends with a semicolon. While it’s optional after the last property, it’s best to include it.

CSS in a separate file

This is the best method — it keeps your CSS completely separate from your HTML code. Though you may be tempted to embed CSS in your HTML, avoid it and stick to external stylesheets. Why?

The main idea of CSS is to separate content (HTML) from presentation (CSS). HTML handles the structure, while CSS handles layout, colors, borders, spacing, etc.

First, separating CSS makes the code cleaner. Second, having CSS in one file improves readability. Third, external CSS files are cached by browsers, which improves page load times.

You should always try to put CSS in an external file! Now let’s connect a separate CSS file using the <link> tag:

<html>
 <head>
  <title>CSS Tutorial</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>Learn CSS with drupalbook.org</p>
  <p>2nd line: Learn CSS with drupalbook.org</p>
 </body>
</html>

Attributes used in the <link> tag:

type="text/css" — specifies it's a CSS file
rel="stylesheet" — defines the file as a stylesheet
media="all" — applies the CSS to all devices
href="styles.css" — the relative path to the CSS file

Now create the styles.css file in the same folder as your HTML file.

In styles.css insert the following:

body {
  background: #eeeeee; /* page background */
  font-size: 14px;     /* font size */
}
p {
  color: #ff0000;      /* text color */
}

Save the file and refresh your HTML page in the browser. Now your CSS is correctly linked via an external stylesheet. In the next lesson, we’ll dive deeper into writing styles in a separate file.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

CSS Tutorial - Lesson 1 - Including CSS Styles

CSS inside a tag

CSS in the head of the HTML document

CSS in a separate file