CSCI 121 - Lecture 18 - Introduction to CSS

Topics Covered

What is CSS?

Cascading Style Sheets (CSS)
CSS is a language that describes the presentation of elements within an HTML document.
Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
Example:

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

CSS provides a set of rules that declare the styles to be used for specific HTML elements.
The CSS rule-sets may be placed within the <STYLE> block of a web page or within an external CSS file that is linked in via the <LINK> tag.

<link rel="stylesheet" type="text/css" href="/html/style.css">

The term "cascading" comes for the precedence (priority) that is in place for when style rules combine and override (more on that next lecture).
The term "style sheet" comes from the fact that the styles rules are often placed in an external file, separate from the

History of CSS

Problem solved

Orginally HTML did not have font and color attributes. Once properties were added for additional formatting and style in HTML 3.2 authoring of HTML started to become even more tedious with repetitive error prone authoring tasks.
CSS provided a language for describing the style and the formatting of elements, along with selectors for selecting which elements in a document should be affected by the style declarations.

Inventors

First proposed by Håkon Wium Lie on October 10, 1994.
Alternatives and the specifics were discussed and debated for two years online, with Bert Bos an active contributor to the discussions.
In 1996, Lie and Bos became co-authors of initial version CSS.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

Selector - element, id, class,...
Declaration block - property: value; pairs contained within curly braces {}.

Selectors:

element - The element selector selects elements based on the element name.

Example - Select all the <p> elements on a page so that they will be center-aligned with a red text color.

p {
    text-align: center;
    color: red;
}

id - The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be 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.
Example - The style rule below will be applied to the HTML element with id="para1".

#para1 {
    text-align: center;
    color: red;
}

class - The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.
Example - In the example below, all HTML elements with class="center" will be red and center-aligned:

.center {
    text-align: center;
    color: red;
}

You can also specify that only specific HTML elements should be affected by a class.
Example - In the example below, only <p> elements with class="center" will be center-aligned:

p.center {
    text-align: center;
    color: red;
}

HTML elements can also refer to more than one class.
Example - In the example below, the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

Selectors that all have the same declarations can be grouped rather than repeated.
Rather than this:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Group like this:

h1, h2, p {
    text-align: center;
    color: red;
}

Next lecture: Advanced Selectors; External, internal and inline style sheets and Cascading...

Sample

Sample is here.

*Note: Some materials and examples inspired and from W3Schools.com.