CSS Tutorial - Lesson 2 - Getting Started with CSS. CSS properties background, color.

16/04/2025, by Ivan

Hello, everyone. In the previous lesson, I created two files: an HTML file and a CSS file. Here's their code:

index.html:

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

style.css:

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

In this lesson, we’ll continue exploring CSS and bring some color to our template. Let's begin with the background property, which we already applied to the body:

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

As you can see, a gray background has appeared.

Let's understand the syntax of the CSS file. Every CSS rule starts with a selector — for example: body, p, .class, #id. You might notice that some selectors begin with a dot or a hash. A dot is used for classes (multiple elements), and a hash is for IDs (a unique element). Here’s an example:

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

Now, let’s define CSS for those selectors:

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

.green {
  color: #00ff00; /* text color */
} 

#blue {
  color: #0000ff; /* text color */
}

As shown above, selectors without dot or hash are for HTML tags (like body, p, etc.), selectors with a dot are for class attributes, and selectors with a hash are for id attributes. You can remember this:

Dot — for classes

Hash — for IDs

No prefix — for HTML tags

After specifying the selector, we write the CSS rules in curly braces {}:

body {
  /* for body tag */
}

.green {
  /* for class */
}

#blue {
  /* for ID */
}

Now we can add CSS properties inside those blocks. One simple and useful property is color, which defines text color. You can define it using names or hexadecimal codes:

.green {
  color: #00ff00; /* green */
}

#blue {
  color: #0000ff; /* blue */
}

/* or with names */
.green {
  color: green;
}

#blue {
  color: blue;
}

In a hex color like #00ff00, the first two characters define the red value, the next two define green, and the last two define blue — following the RGB color model. You can use tools like Photoshop’s color picker to get these values.

Now let’s adjust our background and text colors for better readability:

body {
  background: #fafafa; /* page background */
  color: #333; /* default text color */
}

.green {
  /* green text */
}

#blue {
  /* blue text */
}

Don’t forget the semicolon after each property when using multiple rules. Now the page is easier to read.

Let’s now add some styling for specific spans in our HTML:

index.html:

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

And style.css:

body {
  background: #fafafa; /* page background */
  color: #333;
}

.green {
  color: #26e921; /* green */
}

#blue {
  color: #0f15f3; /* blue */
}

And that’s how we style HTML using CSS for better visual presentation and maintainable code.

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

❗Extra Paragraph Types (EPT) - New Paragraphs experience

CSS Tutorial - Lesson 2 - Getting Started with CSS. CSS properties background, color.