CSS stands for Cascading Style Sheets. This is an HTML method to define the styles that should be used in web pages.

With a CSS definition, you can alter the styling of layout formats, such as the headings and paragraph text.

The hypertext markup language (HTML) is a coding standard that informs Web browsers on how to layout a Web page. The HTML page conventions include standard formatting for different styles, such as the font, font size, font weight, line spacing, background, and text color to use when rendering an HTML document into a Web page.

Web developers use CSS to create a unique livery for a new website. The cascading style sheet can be added to each HTML page developed for a site, making a standard appearance flow through every Web page.

Specifying a CSS formatting convention adds value because it makes the appearance of a website unique.

Background on HTML

HTML is not a programming language. It defines the layout of a page. Each instruction within HTML has standard formatting, which is implemented through HTML elements. The syntax of HTML elements uses a system of tags. These tags are contained in angle brackets and most of them have opening and closing tags, such as:

<p>This is a paragraph of text</p>

The HTML standard is maintained by a non-profit body called the World Wide Web Consortium (W3C). That organization is headed by Sir Tim Berners-Lee, who invented the World Wide Web and HTML.

How a browser works

A Web browser is a viewer for HTML code. When a user enters a Web address (which is called a “URL”) into the address bar, the browser requests the code for the page from the Web server that hosts the site.

The Web browser receives the HTML code in a stream. It reads through the code and takes actions based on the instructions within the HTML. Different elements and their attributes have different effects on the processing of HTML.

The layout of an HTML document includes a header and a body. The body section contains the code that generates objects to place on the visible Web page; the header contains internal instructions, which never appear on the visible page.

Background on CSS

Although Sir Tim Berners-Lee invented HTML, he didn’t come up with the idea for CS. Rather, it was a colleague of Sir Tim who invented cascading style sheets – a Norwegian, called Håkon Wium Lie.

Lie first made his proposal in 1994. However, there were a number of other style sheet languages proposed at the time and it wasn’t until 1996 when the idea was adopted as an official W3C standard. Lie worked with Bert Bos, the inventor of the Argo browser, and Thomas Reardon of Microsoft to get the CSS definition finalized.

As it is a separate standard, it isn’t just HTML that can use CSS. The CSS style sheet language is also used in XML, XHTML, XUL, and SVG. Like HTML, the definition of CSS syntax and conventions is free to access.  

The World Wide Web Consortium set up a CSS Working Group to examine shortfalls in the CSS system and develop improvements. This resulted in CSS 2, which was published in November 1997, and then CSS 3, published in May 1998.

The current CSS version

CSS 3 is still the current version of the CSS standard. The CSS definition started to split out into several different parallel versions with the publication of CSS 3 Selectors and CSS 3 Text. This has created complexity over the definition of CSS because the CSS 3 system is all defined in modules.

Although CSS 3 is still current, there is a CCS 4. In CSS parlance, new releases of the standard are not called “versions,” they are called “levels.” This means that different versions, can, in theory, all be valid simultaneously. The CSS Level 4 concept is to define add-on modules.

CSS Level 3 is still the current core definition of CSS but there are also a number of module definitions, which are deemed to be CSS Level 4 standards. However, there are no Level 4 standards that have been officially adopted by W3C. When a W3C standard becomes definitive, it is called a “Recommendation.” There are two pre-live statuses for standards, which are “Working Draft” and “Candidate Recommendation.” CSS Level 4 proposals are all still at these pre-endorsed stages.

CSS vs CSS 3

If you worry about which version of CSS you are working with, don’t. If you get the latest version of the CSS standard, you are using CSS 3. If you use a developer environment, it will be using CSS 3. If you look at the CSS contained in web pages by opening the Developer Tools of your browser, you are looking at CSS 3.

As CSS 3 has been around since 1997, there is very little chance of coming across web pages written with an earlier version. All currently active browser versions work with CSS 3.

Different types of CSS

CSS can be implanted in three different ways:

  • Inline CSS
  • Internal CSS
  • External CSS

Let’s look at what each of these terms means.

Inline CSS

It is possible to integrate a style change within a tag. This is thanks to global attributes that can slot into most HTML tags.

For example, a style attribute in a <p> tag that denotes a paragraph alters the appearance of just that paragraph.

Here is a paragraph that has blue text instead of the default color for text in that HTML file:

<p style=”color:blue;”>The text in this paragraph will be blue.</p>

Internal CSS

The internal CSS method involves creating a declaration of CSS values in the header of an HTML page. These CSS rules then apply to the entire document, overriding any default formatting for the entire HTML document. Keeping both CSS and HTML on a single page has its advantages.

An example of this would be:

<head>
<style>
    body {background-color: yellow;}
    h1   {color: green;}
    h2   {color: red;}
</style>
</head>

External CSS

An external CSS declaration is stored in a separate file and then read into the HTML stream as the browser works through the HTML code that it receives from the host of the website. The advantage of this method is that it can reduce clutter in the header of the HTML code for a page. This method also makes it very easy to add the same CSS properties to every page in a site or group of sites. It also makes changing the look and feel of a site easy to achieve just by working on the CSS file instead of on all the pages of a site.

The CSS file should have the extension .css. It is referenced within the header of a page thus:

<head>
   <link rel=”stylesheet” href=”styles.css”>
 </head>

The layout of the CSS rules in the CSS files can afford to be a little roomier. It is conventional to put more carriage returns in the layout.

So, the code shown for the inline CSS method above would look like this in an external CSS file:

body {
    background-color: yellow;
}
h1 {
    color: green;
}
h2 {
    color: red;
}

Why “Cascading?”

The concept of “cascading” gave this style sheet language its name and also an advantage over the rival style sheet languages that were under consideration for adoption by the World Wide Web Consortium.

Cascading refers to an inheritance concept that is built into HTML styles. For example, the style body, or “body text” refers to all text styles, such as that for H1 headers, H2 headers, paragraph format, and so on. So, if you define CSS parameters for that style, all of the subordinate styles will acquire that style’s properties.

Cascading also involves a concept of context. It is possible to have several declarations for a particular style, but the one that is more local will prevail. So, for example, you can declare a setting for H2 in the header then all instances of H2 in the document will have those CSS properties. However, if you declare different settings within the tag for an H2 text, that heading will look different.

For example:

<!DOCTYPE html>
<html>
<head>
<style>
     body {background-color: yellow;}
     h1   {color: green;}
     h2   {color: red;}
</style>
</head>
<body>
    <h1>Let’s Play with Header Color</h2>
    <h2>This First Heading is Red</h2>
    <p>The paragraph text hasn’t been altered so it will have the HTML page default color but with a yellow background, as have both the above titles.</p>
    <h2 style=”color: blue;”>This Second Heading is Blue</h2>
    <p>I forced a text color change for that heading with an inline CSS style declaration but the background color for it and this paragraph is yellow.</p>
    <h2>This Third Heading is Red</h2>
    <p>The text color change to blue didn’t apply to the whole page, just that one element. The background color for both the heading and this paragraph is still yellow.</p> </body>
</html>

CSS syntax

You have already seen a few examples of CSS. You might have noticed that the format for the inline CSS system is slightly different from that for the other two types. Both the internal and external CSS layout includes curly brackets ({}). Apart from that one difference in syntax, the format of all three systems is the same.

The syntax of a CSS rule looks a little like JavaScript and it has two parts, a selector and a declaration block. The selector is the name of the object that will be modified by the declaration. The declaration is the part in the curly brackets. 

h1 {color: green;}

The declaration has a property name terminated by a colon, followed by a value terminated by a semi-colon. Several declarations can be contained in the same brackets.

For example:

h1 {color: green; font-size: 14px;}

or

h1 {
    color: green;
    font-size: 14px
}

CSS selectors

There are five categories of CSS selectors:

  1. Simple selectors
  2. Combinator selectors
  3. Pseudo-class selectors
  4. Pseudo-elements selectors
  5. Attribute selectors

Within each category, there are several methods possible, as explained below.

Simple selectors

This category of selectors identifies elements by name, id, or class. There are a couple of other methods in this category.

Element

  • What it is: This is a CSS declaration that uses the name of the element.
  • Example:

h1   {color: green;}

ID

  • What is it: This format sets up a user-defined identifier that can be used to trigger the new format. It is prepended by a pound sign (#) and must start with a letter.
  • Example: 

#myHeading   {color: green;}

You would access this class in the HTML document as:

    <h1 id=”myHeading”>Let’s Play with Header Color</h1>
    <h2 id=”myHeading”>This First Heading is Green</h2>

Class

  • What is it: This sets up a format as a class that can be applied to many elements. Starts with a period (.).
  • Example: 

.quotation {
    text-align: center;
    font-style: italic;
}

You would access this class in the HTML document as:

<p class=”quotation”>Procrastination is the thief of time</p>

It is also possible to apply several classes at once.

<p class=”quotation bordered”>Procrastination is the thief of time</p>

Element and class

  • What is it: A class creation that will only be applied to a specified element. Effectively this is called in the same way as the class selector but it will only work with the specified element.
  • Example:

p.quotation {
    text-align: center;
    font-style: italic;
}

Wildcard

  • What is it: A universal CSS rule that applies to every element on the HTML page.
  • Example:

* {
    text-align: center;
    font-style: italic;
}

Group

  • What is it: A declaration that will apply to several named elements.
  • Example:

h1, h2, p {
    text-align: center;
    font-style: italic;
}

Combinator selectors

Combinator selectors identify elements by a relationship between them.

Descendant

  • What is it: A declaration that will apply to all instances of the second named element that are descendants of the first-named element.
  • Example:

div p {
    text-align: center;
    font-style: italic;
}

Child

  • What is it: A declaration that will apply to all instances of the second named element that immediately one level down from the first-named element.
  • Example:

div > p {
    text-align: center;
    font-style: italic;
}

Adjacent sibling

  • What is it: A declaration that will apply to the first instance of the second named element that immediately follows the first element and both have the same parent.
  • Example:

div + p {
    text-align: center;
    font-style: italic;
}

Sibling

  • What is it: A declaration that will apply to all instances of the second named element that share a parent with the first element.
  • Example:

div ~ p {
    text-align: center;
    font-style: italic;
}

Pseudo-class selectors 

This category of selectors applies CSS element when it is in a specific state. Statuses that can be used are whether a link has been visited or not or when a mouse rolls over an object.

The format of these selectors is:

selector:pseudo-class {

     property: value;

 }

The big difference between this type of CSS rule and the simple selector category is the pseudo-class part. This is a very powerful facility and can change the appearance of objects on a web page according to events. Pseudo-class selectors are not case sensitive.

There are a number of pseudo-classes that relate to links. These all start with the selector “a.”

a:link

  • What is it: A declaration that will apply the original unvisited state of a link.
  • Example:

a:link {
    color: red;
}

a:visited

  • What is it: A declaration that will change the appearance of a link after it has been clicked.
  • Example:

a:visited {
    color: green;
}

a:hover

  • What is it: A declaration that will change the appearance of a link when the pointer moves over it. This CSS rule will only work if it is preceded in the file by an a:link and an a:visited rule.
  • Example:

a:hover {
    color: yellow;
}

a:active

  • What is it: Alters a link when it is active. This CSS rule must have an a:hover CSS rule ahead of it in the file.
  • Example:

a:hover {
    color: tomato;
}

A language pseudo-class can implement changes in the appearance of elements according to the language of the prevailing language.

:lang

  • What is it: This pseudo-class takes a two-letter language code as a parameter and will alter the appearance of an element where that language is specified.
  • Example:

q:lang(fr) {
    color: blue;
    font-style: italic;
}

The above CSS rule would alter the text in a quote if it is specified as French. For example:

<p>Louis XV is famous for predicting:
    <q lang=”fr”> Après moi, le déluge.</q>
    He wasn’t wrong.</p>

There are many pseudo-classes to try out. In fact, there are 31. You can try a tutorial specifically about pseudo-classes to master this topic.

Pseudo-element selectors

A pseudo-element selector isolates part of the contents of an element. These are definitions that don’t really exist in HTML. For example, it is possible to treat the first letter or first line of a text that is formatted with the <p> tag differently from the rest of the content.

The format of pseudo-element rules is:

selector::pseudo-class {

     property: value;

 }

Here are all of the pseudo-elements available in CSS 3.

::after

  • What is it: This pseudo-element adds content to the end of every instance of an element. The only property you can use in this structure is content.
  • Example:

p::after {
    content: “ – CHECK THIS”;
}

::before

  • What is it: This pseudo-element adds content in front of every instance of an element. The only property you can use in this structure is content.
  • Example:

h2::before {
    content: “CHAPTER ”;
}

::first-letter

  • What is it: This pseudo-element alters the first letter of the target element’s content.
  • Example:

p::first-letter {
    color: red;
    font-size: xx-large;
}

::first-line

  • What is it: This pseudo-class takes a two-letter language code as a parameter and will alter the appearance of an element where that language is specified. First-letter and first-line can both be active on the same element.
  • Example:

p::first-letter {
    color: yellow;
    font-size: large;
}

::marker

  • What is it: This option selects the markers, or bullet-points, of a list for manipulation. You don’t put an element name in front of it.
  • Example:

::marker {
    color: blue;
    font-size: large;
}

::selection

  • What is it: This pseudo-element influences an element when it is selected by the user – for example, when text is selected for copying.
  • Example:

p::selection {
    color: blue;
    background: yellow;
}

Attribute selectors

This category of selector identifies elements with specific attribute values. The typical format of an attribute within an HTML tag is:

attribute=”value’

CSS attribute selectors use the same format and alter the equals sign to create different operators. The specification of the attribute to identify is contained in square brackets ([]). It follows the name of an element. The element name is optional and if it isn’t present, the selector applies to all elements that include the named attribute with the specified value.

There are seven formats for this category of selector.

[attribute]

  • What is it: This format selects all elements of the named type with the specified attribute. If no element name is given, all elements that have that attribute active will be affected.
  • Example:

p[style] {
    color: blue;
    font-style: italic;
}

or

[style] {
    color: blue;
}

[attribute=”value”]

  • What is it: Applies a change to elements that include the named attribute and it has the specified value. Again, the inclusion of an element is optional.
  • Example:

p[style=”text-align:right”] {
    color: blue;
    font-style: italic;
}

[attribute~=”value”]

  • What is it: Applies a change to elements that include the value somewhere within the attribute, such as a word in a text field. The element name is optional.
  • Example:

table[title~=”2020”] {
    border: 5px solid blue;
}

[attribute|=”value”]

  • What is it: Applies a change to elements that include the value at the beginning of the attribute. This has to be a whole and complete word that is immediately followed either by a space or a hyphen. The element name is optional.
  • Example:

table[title|=”2020”] {
    border: 5px solid blue;
}

[attribute$=”value”]

  • What is it: Applies a change to elements that include the value at the end of the attribute. This can be a partial word. The element name is optional.
  • Example:

table[title$=”202”] {
    border: 5px solid blue;
}

[attribute*=”value”]

  • What is it: Applies a change to elements that include the value anywhere in the attribute. This can be a partial word. The element name is optional.
  • Example:

table[title*=”202”] {
    border: 5px solid blue;
}

CSS color names

CSS uses the same list of color names as HTML. There are 140 of them. Colors can also be specified by RGB codes, HEX numbers, HSL, RGBA, and HSLA values. Access the full list of HTML colors at the World Wide Web Consortium website.

SHARE THIS POST