Introduction to CSS

How do we use CSS?

There are three main ways of adding CSS to our HTML pages. The simplest alternative is to inline styles directly in the HTML using the style attribute. We can also put our style rules inside <style> tags and put it in our <head> element. The last alternative, which is also the most commonly used one, is to write rules in a separate .css file and reference said file in our <head> element.

Rules

CSS is based around rules. We define rules using selectors to target document elements, and put properties and their values inside curly braces.

Copy
p {
  color: green;
  font-size: 2em;
}

In the example above our selector is p which means that we want all <p> elements to have the specified style. Inside the curly braces, we have declarations. Each declaration is a property/value pair that sets a property to the specified value. Declarations must be separated by a semicolon and an optional new-line.

There are hundreds of different properties we can set, and it is usually a good idea to search up the documentation for a property when you are unsure about how to use it. The most common CSS properties are also covered in separate lesson later on.

Selectors

We select HTML document using selectors. These selectors can among other target tag types, class names and ids.

Copy
h1 {
  text-transform: uppercase;
}

The code example above uses the h1 selector which targets all <h1> elements on a page.

Copy
.my-custom-class {
  padding: 1rem;
}

Putting a . in front of a selector makes it a class selector which means that all elements with the given class gets that rule applied to them. We should use classes for elements that we want to repeat multiple times in a page.

Copy
#my-custom-id {
  margin: 1rem;
}

Putting a # in front of a selector makes it an id selector which means that all elements with the given id gets that rule applied to them. We should use ids for elements that appear only once in a page.

Copy
p.my-custom-p-class {
  border: 1px solid black;
}

We can combine these selectors as shown in the code example above where only <p> elements with the specified my-custom-p-class class gets the rule applied to them.

Inline

Inlining CSS is often the quickest way to test if a certain property does what you want. Inlining styles for entire web pages tend to clutter the HTML and it is often hard to keep the design consistent.

Copy
<h2 style="color: red;">
  My text color is red!
</h2>

Style tag

Putting all of our styling inside a <style> tag works for smaller web sites, but can be hard to maintain for larger web sites. Another downside is that the HTML document sizes become larger because the same pieces of styling is sent over the network for each page load. This can be avoided by referring to a CSS file in the <head> element which most browsers cache.

Copy
<style>
.large {
  font-size: 5em;
}

.bold {
  font-weight: 700;
}
</style>

<h2 class="large bold">
  I am large and bold.
</h2>

Separate file

Writing all of our css in separate .css files and referring to them using <link> inside our <head> element is the most common way of including CSS in HTML pages. We avoid repetition, reduce network usage and improve maintainability.

Close "index.html"Copy
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Original title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  
  <body>
    <p class="brag">
      I am using a class defined in the styles.css
      file referred to in the <head> element.
    </p>
  </body>
</html>

Close "styles.css"Copy
.brag {
  color: red;
  font-weight: 700;
}