CSS Tutorial for Beginners



code editor colorThe secret sauce of HTML

CSS stands for “Cascading Style Sheet”, and in short, CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

Although a little technical, CSS is very easy to learn.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block, and each declaration is made up of a property and a value:

CSS Tutorial for Beginners

Here is how they work:

  1. The selector points to the HTML element you want to style.
  2. The declaration block contains one or more declarations separated by semicolons.
  3. Each declaration includes a CSS property name and a value, separated by a colon.
  4. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

There are too many selector and declaration combinations to memorize, therefore we will focus on learning the basics.

CSS Comments

Just like with HTML, you can “comment” inside the CSS file to make annotations. I also use them to “suspend” declarations or entire selectors.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines, and this is how it may look:

Selectors

There are selectors for most HTML tags, and any well designed website makes use of all of them.

You don’t have to memorize their names, but learn their function and how to implement them.

We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on element, class, id). There can also be universal declarations or declarations for groups of selectors.
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

This section will focus on the most commonly used Simple Selectors.

  1. Universal Selector
  2. Grouping Selector
  3. Element Selector
  4. Class Selector
  5. ID Selector

1. Universal Selector

The Universal Selector (*) selects all HTML elements on the page.

Since it’s a Universal Selector, there’s no need to implement in HTML.

What this means is that every HTML element will be aligned to the left, and any text will be blue.

2. Grouping Selector

The grouping selector selects all the HTML elements with the same style declarations.

Instead of having these many selectors with the same declarations…

It will be better to group them to minimize the code.

To group selectors, separate each selector with a comma.

3. Element Selector

Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name. Thus, a selector of h1 would match all HTML h1 unstyled elements.

The Element Selector declaration will be applied to any h1 element, and will override universal selectors.

In this example any h1 element will be displayed in red and centered, as opposed to aligned to the left and blue.

4. Class Selectors

The Class Selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

You can use one or more Class Selectors per class attribute. Unlike ID Selectors, you can use the same Class Selector as many times as necessary on a single page. Class selectors will also override both Universal and Element Selectors.

In this example, the h1 element will be aligned to the right, measure 50px and displayed in yellow.

5. ID Selectors

Limitations:

  • The id selector uses the id attribute of an HTML element to select a specific element.
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash (#) character, followed by the id of the element.

This is what an ID selector looks like:

This is how it’s implemented:

These type of selectors are usually combined with a JavaScript function.

External CSS

Let’s say you have the following HTML tags that use an external CSS file:

And these are their CSS declarations:

You can add any number of declarations to any available selector.





Search