Basic CSS

Introduction to CSS

CSS is just as important as HTML. It is an acronym for Cascading Style Sheets. It is a language created to change the appearance of content. By referring to the HTML tags you can style it in various ways: change the font-size, increase the height or attach a background-image to it. Go through the following video to get a firmer grasp of the fundamentals of CSS: CSS Crash Course.

The cascading effect

The first C in CSS stands for Cascading and it's crucial to learning how to use CSS correctly. Essentially, it means that it matters (1) in which order and (2) how specific you write CSS rules.

Read the following articles to learn about it:

Where to write CSS?

There are 3 basic ways to write CSS:

  1. In an external stylesheet: a .css file, that is linked to a .html file using the following tag:

<link href="/path/to/style.css" rel="stylesheet" />

  1. In the <head> of a .html file. This is done using the <style> tag. This is called an internal stylesheet:

<head>
  <style>
    body {
      background-color: blue;
    }
  </style>
</head>

  1. As part of the attribute style inside any HTML tag. This is called inline styling:

<div style="background-color: blue;">ReDI is cool!</div>

In practice, you'll always write your CSS in separate .css files. This is because you want to make sure every file has a single purpose: an HTML file should only contain the content and structure of a page, while a stylesheet should only contain styling rules that apply to a page.

This is a software design principle called separation of concerns.

Example Exercise:

Create a CSS file and link it to your HTML document. Add the following styles:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}
header {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

The Box Model

"In CSS, everything is a box". This phrase summarizes a central concept in HTML/CSS: the box model. When building a web page each element can be considered a box that has the following properties: margin, border, padding and content. Starting from the first element within the <body>, everything that comes after will be pushed down (thanks to these 4 properties).

To learn more about the box model, go through the following:

Example:

p {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px;
}

Specificity

As there are multiple ways to write your CSS code, which leads to multiple rules applying to the same HTML element, CSS needs to decide which rule to follow. In the simplest form, if we for example, have the following HTML:

<p>This paragraph should be styled normally</p>
<p class="explanation">
  This paragraph should be styled differently as we add a class to the element
</p>

and the following CSS:

p .explanation {
  font-weight: 600;
}

p {
  font-weight: 400;
}

Then because the p .explanation rule is more specific than the p rule the font-weight of our second paragraph will be 600 even though the other rule was applied last. Read the following articles to learn more about how it works:

Help us improve the content 🤩

You can leave comments here.

PreviousHTML ExerciseNextGit & Github

Last updated