30 mins
325 points
What you need:
  • Computer/laptop

Introduction to CSS

In this lesson we learn about the CSS language that is used to style web pages.

1 - What is CSS?

We have already learned about HTML, which is a coding language to create the structure and content of web pages.

CSS stands for Cascading Style Sheets and is a programming language for styling the content of web pages. CSS applies styles to HTML elements and can change how they look on the web page.

For example we could use the following CSS code to define how all paragraphs on a website appear:

    color: red;
    line-height: 20px;
    margin-bottom: 10px;

So anywhere we use a <p></p> tag in the HTML code, the text will:

  1. appear red.
  2. have a line height of 20 pixels.
  3. have a bottom margin of 10 pixels.

2 - CSS rules

We call the CSS that we write rules. We can write a CSS rule for paragraphs of text, for images, for tables etc. A CSS rule has a selector and a declaration block.

The selector is the HTML element you want to create the rule for and the declaration block has the style rules for that HTML element.

    color: green;
    font-size: 18px;
    text-align: center;

In the above CSS code the selector is the h2 element and there are 3 rules specified in the declaration block. These rules are contained inside curly braces {} and each rule has the CSS property name (e.g. color) and the value that should be applied (e.g. green). The property and the value is separated with a semicolon :

Take a look at the below HTML and CSS code and notice how it creates a CSS rule for the h2 element and that the rule gets applied to each of the <h2></h2> tags.

3 - Element selector

As mentioned above, the CSS selector is the HTML element that you want to create the rule for. There are different ways that we can select which HTML elements to apply the rule to.

Element Selector
As in the above examples we can select a HTML element to apply the rule to.

    color: blue;

4 - ID selector

In HTML we can give a HTML tag an id attribute and then we can use that ID as the selector for a CSS rule. IDs have to be unique within a web page which means that you can't use the same ID more than once. To create a CSS rule for an ID we put a hash # in front of the ID.

    color: red;

5 - Class selector

In HTML we can give a HTML tag a class attribute and then we can use that class as the selector for a CSS rule. Unlike IDs, the same class can be used many times for different HTML elements in a web page. To create a CSS rule for a class we put a period . in front of the class.

    color: green;

We can give a HTML element multiple classes like in the following example.

Join our club 😃

To view the remaining 4 steps and access hundreds of other coding projects please login or create an account.

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more