Getting Started with CSS

In CSS June 14, 2024

Updated on June 20, 2024

CSS (Cascading Style Sheets) is a standard style sheet language used to describe the presentation of a document written in a markup language like HTML. It controls the visual and aural layout of web pages, making it a fundamental skill for web developers. CSS level 1 became a W3C Recommendation in 1996. Since then, it evolved and become more complex, adding more functionalities. In the following series, we'll discuss the fundamental concepts of CSS. Whether you're just starting out in web development or looking to solidify your understanding, this series is designed to equip you with the essential knowledge and skills needed to create visually stunning and well-structured web pages.

All parts:

Why CSS?

CSS allows you to separate content from presentation, enabling you to style multiple web pages uniformly by linking to a single style sheet. This separation improves maintainability and flexibility, as you can update the style of an entire website by modifying one file.

Linking CSS to HTML

There are three main ways to apply CSS to HTML documents:

Inline Styles:

We can add styles directly within the HTML elements using the style attribute. Here is an example of an inline style:

<p style="color: blue;">This is a blue paragraph.</p>

We've applied the blue color to the text inside this paragraph.

2. Internal style sheet:

We place the styles within the <style> tag in the <head> section of the HTML document. Here's an example:

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

In this document, we have applied the color blue to all the paragraphs.

3. External style sheet:

The preferred method for applying CSS styles to HTML documents is by using external style sheets. The style sheets are files saved with a .css extension. How do we link such a CSS file from an HTML document? We use the link element. There are several types of links. To import a style sheet, we use a stylesheet link. How do we specify the type of a link element? We use the rel attribute. In our case, its value is stylesheet. We then use the href attribute to specify the address of a link. Below is an example where we linked the styles.css file within the same folder as the HTML document:

<head> 
  <link rel="stylesheet" href="styles.css">
 </head>

Now, in the styles.css file, we can apply the color blue to the text within all paragraphs:

p {
  color: blue;
}

This method keeps your HTML files clean and focuses on content, while styling is handled separately in CSS files. It also allows for easier management and updating of styles across multiple pages.

Basic Syntax

We style HTML pages by using style rules. Basically, a CSS document represents a series of such rules. CSS rules are composed of selectors and declarations.

A selector is a pattern that checks if an element in a document matches the selector or not. The term selector can refer to a simple selector, compound selector, complex selector, or selector list. In the above examples, we used a simple selector. A simple selector checks elements against just one condition. An example of a simple selector is the type selector or the tag name selector. This selector checks if an element tag's name matches the selector. In our example, the selector p represents the p element in an HTML document.

Every rule starts with such a selector, which specifies which elements the rule applies to, followed by a {}-wrapped block, which contains a series of declarations.

We start a declaration with a property name, followed by a colon, and then a value. So, if we want to specify a color for paragraphs in our document, we'll use the color property. We've set the value of this property to blue.

After this declaration we can add as many declarations as we want. For example, let's align the text to the center:

p {
  color: blue;
  text-align: center;
}

Declarations are separated by semicolons.

Conclusion

By understanding the basics of CSS and how to link it to HTML, you can start creating visually appealing web pages. In the next posts, we'll dive into the world of CSS selectors to help you target and style elements effectively.