Introduction to CSS

CSS is among the three foundation languages for building modern webpages, the others being HTML and JavaScript. Before learning CSS, you should have prior knowledge of HTML and in case you need reference on the basics of HTML you can check out my other tutorial using the link below;

What is CSS?

CSS stands for Cascading Style Sheets and is used to describe the appearance of a website by specifying how the various HTML elements should be displayed.

In the early days of web development, the appearance of webpages was determined by setting rules on attributes for different HTML elements. This made HTML code repetitive as many of these attributes had to be redefined whenever they were to be used for a given HTML element.

This challenge was resolved when CSS was officially published in 1996 whereby web developers can now be able to place the design information for a website into a style sheet and link it to the HTML code hence making HTML code simpler and easier to maintain.

How CSS works.

CSS is used to attach rules to elements in an HTML document. These rules determine how the content of those elements will appear on a webpage.  A CSS rule consists of a selector followed by a declaration block as shown below;

CSS selectors are patterns used to determine which HTML elements a given CSS rule will be applied to. Selectors can be HTML tags like <p> or <h1>, values of the HTML class attribute and many other patterns. Since this is one of the main concepts of CSS, I’ll have a separate tutorial about selectors in detail.

CSS declaration consists of a property assigned to the selector in order to affect its style and the value assigned to the property. The property and its value are separated by a colon (:) and a semicolon (;) is used to mark the end of a given “property: value” pair.

For example, if I want the contents of a paragraph element in my HTML document to appear red in color and have a size of 15px then I’ll set a CSS rule targeting this element as;

    p {color: red; font-size: 15px;}

Commenting in CSS.

Comments enable developers to leave notes about their code and to ease the process of making changes where necessary in future. Comments are ignored by browsers. In CSS, a comment is placed inside the <style> element, and starts with /* and ends with */. as illustrated below.

There are three ways of attaching CSS to HTML documents and these are;

Inline Styles

This involves inserting the style rules directly into the start tag of a given HTML element using the style attribute.

The example below shows how to use the inline styles to target the appearance of content in the paragraph element using the CSS properties for color, font-size and text-align.

Internal or Embedded Style Sheets

Here the CSS rules are defined in the head section of the HTML document, that is, between the <head>…</head> tags. The styles are added using the <style> element as illustrated below.

Embedded style sheets only affect the document they are embedded in.

External Style Sheets

These style sheets are ideal when the style is being applied to many pages of the website. In this case the CSS rules are placed in a separate document and can be linked to any HTML file on the site.

First you need to create a style sheet file using any code editor and save it with the “.css” extension. The CSS code is then placed in this file.

To link this external style sheet to an HTML document we use the <link> tag inside the head section of the document. I’ll use the diagram below to demonstrate this better.

I have placed the CSS rules in the styles.css file and then linked this file to the index.html file that contains the HTML code.

Using external style sheets is the most flexible way of linking CSS to HTML because it makes maintenance of the website very easy. For example, you can change the look of an entire website by changing just one file.

Priority of the linking Style sheets.

It is possible to have multiple style sheets defined on one HTML document and also a single HTML element can have styles defined in multiple style sheets. In such situations the following order of priority is given to the various style sheets.

Inline CSS has the highest priority and therefore any styles that are defined in either the embedded or external style sheets will be overridden by inline styles.

Embedded styles come stands in the priority list and overrides the styles in the external style sheet.

External style sheets have the least priority and the CSS rules in these style sheets will be applied to the HTML tags only if there are no styles defined either in inline or internal style sheet.

CSS Properties.

CSS properties depend on the way the various elements are arranged and how they are to appear of a website. There are over five hundred CSS properties and with evolution of CSS more properties are being created while others become obsolete.

These properties can be categorized depending on how they are being applied in web development and design for example they can be text formatting properties, background properties, font properties, border properties, table properties, spacing properties, dimensional properties, positional properties, list properties and so on.

In this tutorial I was only giving an introduction to CSS and therefore will not look at each property in detail. However you can have a look at the list of CSS properties by W3C for further reference.