Google+ logo Twitter logo Youtube logo

Introduction Youtube logo

What is CSS?

With CSS we can style HTML elements. Think about colores, font's, dimensions and positions. See it like this; with CSS we can style the HTML page.

CSS stands for Cascading Style Sheets.

Inline and external CSS

We can type CSS directly within the HTML page, this is called inline CSS. Note; it's much more neatly to create a seperate file, containing all the CSS. This method is called external CSS, the seperate file is called a stylesheet.

Style a tag, class or ID

It's important for the stylesheet to "know" which HTML element to style in what manor. This can be done by 3 methods;

  1. Indicate which HTML tags will "get" a particular style.
  2. Indicate which HTML tags with a particular class will get a particular style.
  3. Indicate which HTML tag with a particular ID will get a particular style.
I see you thinking: "uuuh, ok?". That'll change in a bit!

CSS in practice

First; we're gonna focus on inline-css. With this method we can write CSS in the same file were the HTML is. Say; we have a couple of headings (h-tag) and we want them to be red, it could look like this;

This is heading

This is heading

And some more heading

In the example above we can see a new attribute: class. The attribute-value is the classname. This classname is up to you. But; it's highly recommended that you choose a logic, understandable classname. In the example above we saw the classname red-heading; which is logic and understandable since it makes "something" red.

Classes and ID's

With CSS we're able to style HTML elements with classes and id's. A class can be used multiple time, but an id can be used only once. It's also important to know that an id has more priority than a classname.

So: If a classname says something must be red, and a ID says it must be blue; it's gonna be blue.

In CSS we announce a classname with a dot . and a ID with a hash #.

ID's in practice

In the example above there are 3 red headings with the same class. These headings are colored red thanks to the class(name) red-heading. A ID can make an exception on classes, say we want to create one of the 3 headings blue, it could be done like this;

This is heading

This is heading

And some more heading

We can see that we can set a ID with the attribute id, as attributevalue we choose blueheading.

Case study: classes and id's

In this video we can see an example of the difference between CSS classes and CSS id's.

Leave a comment ...

Name (will be visible)
E-mailaddress (will not be shown)
Type the code illustrated below

Back to top