An Introduction to CSS: Styling Your Web Pages [Part 1]

If aren’t familiar already with HTML you can find that here: Intro to HTML.

Before you look down and get discourages I want you to know I’m proud of you for getting this far. I know it’s a lot of information to take in but I promise it will be worth it. I’m going to try and make this as easy as possible to understand!

Open Table of Contents

An Introduction to CSS: Styling Your Web Pages
What is CSS?
How to Use CSS
CSS Selectors
CSS Specificity
Otro

An Introduction to CSS: Styling Your Web Pages

CSS (Cascading Style Sheets) is a powerful tool that allows you to style and layout your web pages. In this article, we’ll introduce the basics of CSS and show you how to use it to make your web pages look ✨amazing✨.

What is CSS?

CSS is a language used to describe the presentation of HTML documents. With CSS, you can control the layout of your web pages, including the font, color, size, and position of elements on the page.

How to Use CSS

There are three ways to use CSS:

Inline CSS: A style attribute in an HTML element
Internal CSS: A <style> tag element in the <head> section of an HTML document
External CSS: A separate file

For a long time there’s the idea of separation of concerns, which means that you should separate your code into different files. CSS for styling, HTML for structure, and JavaScript for behavior. That line has been blurring in recent years with the advent of TailwindCSS and other CSS-in-JS libraries. For now, it’s still a good idea to keep your code organized. So, we’ll be using the external CSS method for this tutorial. Later once you have a grasp of the basics, you can start to experiment with the other methods.

<!-- Inline CSS -->
<p style="color: red;">This text is red.</p>

<!-- Internal CSS -->
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

<!-- External CSS -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>

CSS Selectors

CSS selectors are used to target specific HTML elements and apply styles to them. There are several types of selectors, each with its own purpose. Here are some of the most common ones:

Element selectors: target all instances of a specific HTML element.

p {
  color: red;
}

<p>This text is red.</p>
<p>This text is red.</p>

Class selectors: target elements with a specific class attribute.

.red-text {
  color: red;
}

<p class="red-text">This text is red.</p>

ID selectors: target elements with a specific ID attribute.

#red-text {
  color: red;
}

<p id="red-text">This text is red.</p>

Grouping selectors: target multiple elements with the same style.

.red-text,
.blue-text {
  color: red;
}

<p class="red-text">This text is red.</p>
<p class="blue-text">This text is blue.</p>

Attribute selectors: target elements with a specific attribute value.

a[href="https://www.google.com"]
{
  color: red;
}

<a href="https://www.google.com">This text is red.</a>

Pseudo-class selectors: target elements based on their state.

a:hover {
  color: red;
}

<a href="https://www.google.com">This text is red.</a>

Pseudo-element selectors: target specific parts of an element.

p::first-letter {
  color: red;
}

<p>This text is red.</p>

Descendant selectors: target elements that are descendants of another element.

p span {
  color: red;
}

<p>This text is <span>red</span>.</p>

Child selectors: target elements that are direct children of another element.

p > span {
  color: red;
}

<p>This text is <span>red</span>.</p>

Adjacent sibling selectors: target elements that are the next sibling of another element.

p + span {
  color: red;
}

<p>This text is red.</p>
<span>This text is red.</span>

General sibling selectors: target elements that are siblings of another element.

p ~ span {
  color: red;
}

<p>This text is red.</p>
<span>This text is red.</span>

CSS Specificity

When multiple CSS rules apply to the same element, the browser uses a set of rules to determine which rule is most specific and should be applied. These rules are called CSS specificity rules. The higher the specificity, the more important the rule is. When considering that CSS is a cascading language, the more specific rule will override the less specific rule regardless of where it appears in the cascade on the stylesheet.

Selector	Specificity	Calculation
`P`	1	1
`P.test`	11	1+10
`P#test`	101	1+100
`<p style="color: pink;">`	1000	1000
`#demo`	100	100
`.test`	10	10
`P.test1.test2`	21	1+10+10
`#navbar p#demo`	201	100+1+100
`*`	0	0 (universal selector is ignored)

Otro

In the next article we’ll be covering layouts and how to create responsive websites across all devices!

You can find the next article in the series here: Intro to CSS Part 2.