CSS Basics:

Cascading Style Sheets are linked with HTML elements

CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.

How To Add CSS

There are three ways of inserting a style sheet:

• Inline CSS
• Internal CSS
• External CSS

For the majority of websites, external CSS is strongly recommended since multiple HTML pages can be style with one single CSS file. Changes to that external CSS will then affect all the pages.

Inline:

Internal:

External:

Simple, styled example web page

CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.

Result in browser:

HTML code:

CSS code:

Result in browser:

The CSS Box Model

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.

CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.

HTML code:

CSS code:

Result in browser:

You differentiate between so called Block elements and Inline elements. Block elements in this case are "h1", "h2", "p" and they take up the whole width of the browser and are stacked on top of each other. Inline elements flow within the text and are as wide as their content (text) is. Inline elements here are "em" and "span".

The default fot color is black (no extra CSS necessary). In order to make one of the h2 headlines red we need to add a class to the second h2 tag in the HTML. In the CSS the class rule starts with a dot.That way the color red overwrites the default black.

Same thing happens with the "blue-box" class. Since the "blue-box" element is declared to be specifically different (blue border, blue type) it overwrites the default styles (black border, black type).

Margin is the space between each box. Padding defines the space between text and the edge of each box. They can either be applied to all 4 sides or only to one side of an element. In this case we only have a top margin but a padding for all sides.

CSS Floats

In order to make elements to appear side by side you can make them "float". In the example below I wrapped two sections of text in div elements and made them float side by side.

CSS code:

Result in browser:

The Cascade

Definition: "A process whereby something is successively passed on."

See the Pen Cascade by Oliver Roeger (@uic-des) on CodePen.

Reading:

Download and read this PDF with an excerpt about CSS Basics from the book "HTML + CSS – design and build websites").