ABOUT CSS

CSS (CASCADING STYLE SHEETS)

CSS is the code that provides the Web browser with the instructions on how to style the appearance and position of HTML elements. A style sheet in traditional Graphic Design is a set of rules that determine the appearance of a printed document including the typefaces, layout, color, backgrounds, photography and graphic elements used in the design. CSS provides the ability to define these attributes to HTML documents in a wide variety of ways.

CSS SYNTAX | CSS Example 1
A rule that styles an HTML element is defined by the following CSS Syntax:

Selector:
The name assigned to the rule to identify the corresponding HTML element.

Rule Declarations:
The Properties and Values assigned to the rule are called the declarations and are written inside curly brackets as follows:

h2 {
font-size: 24px;
font-weight: normal;
}

In this simple example h2 is the selector. The brackets { } contain the rule declarations including:

A font-size property with the value of 24px
A font-weight property with the value of normal

See the full list of CSS Properties & Values at w3schools.com.

Note: Properties end with a colon (:) and Values end with a semi colon (;) in the rule declarations syntax. If you don’t include these you will break the rule and all rules following the broken rule.

CSS SELECTORS | CSS Example 2
There are different types of CSS selectors that determine how the browser displays an HTML element. Selectors can also be grouped together or combined to make more specific CSS rules:

1. ID Selectors
2. Class Selectors
3. HTML Element (Tag) Selectors
4. Group Selectors
5. Compound Selectors

1. ID Selectors:
An id selector is defined in CSS by proceeding the name of the selector with the # (hash tag) symbol that corresponds to an HTML id element name (<section id=”section-1″>). id selectors have the highest value of specificity for a selector in the CSS cascade; which means it can over rule the other types of selectors.

In HTML, an id selector could be defined as:

<section id=”section-1″>section content</section>

The corresponding CSS rule might include:

#section-1 {
background-color: grey;
padding: 5px;
overflow: auto;
}

Note: id selectors need to be uniquely named and are only to be used once per page for each name. They are often used to identify or style a specific section of the HTML document.

2. Class Selectors:
A class selector is defined in CSS by proceeding the name with the . (period) symbol that matches an HTML element name. It has the second highest value of a selector in the CSS cascade.

In HTML, a class selector could be defined as:

<div class=”column”>content</div>

The corresponding CSS rule might include:

.column {
width: 47%;
float: left;
background-color: white;
margin: 5px;
padding: 5px;
}

In CSS Example 1, <div class=”column”> is used for both columns. The <div class=”column”> selector includes properties and values associated with the layout of the HTML element:

margin: 5px; = This defines 5px of space between <div class=”column”> and its parent element. Margin is the space outside the border of an HTML element.

padding: 5px; = This defines 5px of space between <div class=”column”> and its interior content. Padding is the space inside the border of an HTML element.

float: left; = This defines the two <div class=”column”> sibling elements in the HTML to align left side-by-side. Since both <div class=”column”> elements share the same class, and reside inside the same HTML parent element, they can both use the float: left; declaration. Since <div class=”column”> is assigned a width: 47%; they can share the horizontal space within the parent element.

Note: A value of 47% is used instead of 50% to accommodate the padding: 5px; of the parent element <section id=”section-1″> and the margin: 5px; applied to the <div class=”column”> element. This prevents the columns spilling over to the next block level of the HTML.

In CSS Example 2, each column is assigned their own class:
<div class=”column-1″> and <div class=”column-2″>.

In this instance, the <div class=”column-2″> element has the float: right; declaration so it aligns to the right inside the parent element. However, both columns can still reside side-by-side since they still share the width: 47%; declaration. A width of 47% ensures the column will not spill over to the next line due to the rule’s margin and padding.

Note: classes can be used multiple times in the same page (like columns) which allows a single rule to be applied selectively to multiple HTML elements.

3. HTML Element Selectors:
An HTML element selector is defined by its tag or element name without any proceeding syntax. It has the lowest value of a selector in the CSS cascade.

In HTML, an element selector could be:

<footer”>content</footer>

The corresponding CSS rule might include:

footer {
background-color: black;
padding: 5px;
font-size: 14px;
font-style: italic;
color: white;
clear: both;
}

The <footer> selector includes the clear property. HTML elements following  floated selectors require a clear property so they display underneath them and do not inherit the float property.

4. Selector Groups:
Selectors can also be grouped together to share rule declarations. For instance, you might wish h3 and h4 headlines in an HTML document to have similar styles. Selector groups are defined by using commas between multiple single selectors to make a group.

An example of a selector group might look like this:

h3, h4 {
color: black;
letter-spacing: 2px;
text-transform: uppercase;
}

In this selector group both the h3 and h4 headlines will share the defined declarations. The font color will be black, there will be letter-spacing of 2px, and the font will be uppercase. Notice how this applies in CSS Example 2.

5. Compound Selectors (Combinators):
Single selectors can also be combined together to create a compound selector. This is accomplished by adding a space between more than one class, ID and/or tag, thereby making a descendent selector that has a higher level of specificity than a single selector.

An example of a compound selector might look like this:

#section-1 .column-2 p {
color: red;
font-style: italic;
}

This selector specifies that only the paragraph(s) <p> inside the element with the <div class=”column-2″> inside the element with the <section id=”section-1″> to display red italic text. Creating selectors that combine descendent elements together allows you to define CSS rules with various levels of Specificity. Notice how this applies in CSS Example 2.

Note: Compound selectors are also known as a Descendent Combinators. There are even more advanced ways to combine selectors for a broader range of specificity.

CSS CASCADE ORDER | CSS Example 2
CSS is called “Cascading Style Sheets” because it determines how each HTML element is styled based on a set of cascading values. Since style sheets can become very complex and have duplicate or conflicting rules, the cascade uses an algorithm that calculates which rule has the most importance – and displays that styling. Many Web pages also have more than one style sheet and the cascade also calculates the order in which they load. While this is all very useful, it can also be very confusing. So, lets discuss the cascade in more detail.

The Cascade Algorithm looks at the various declared values of styles applied to HTML elements and sorts them by precedence in the following order:

1. Origin & Importance
2. Selector Specificity
3. Order of Appearance

1. Origin & Importance:
Origin and importance generally refers to where the CSS rule declarations come from and whether the special declaration of !important is included.

Declaration Origins
There are three potential origins for CSS rule declarations:

a. User Agent (Lowest Priority)
This is the default CSS displayed by the browser. If no stylesheet is define by the author in the Web page, than the browser still displays HTML content with default values.

b. Author (Next Highest Priority)
Refers to person coding the Web page and includes the Inline, Internal or External style sheets written by the author.

c. User (Highest Priority)
Refers to person viewing the Web page. A user can include their own stylesheet to be used by the browser across all web pages they visit and override those CSS rules defined by author(s) or browser defaults.

Declaration Importance
If a rule includes property values with the special declaration of !important,  then those values will override origin precedence and well as selector specificity in the cascade. By default, all rules are considered normal until specified to be important. The use of !important should be limited to overriding rules in very specific instances or where there is no other sensible way to modify an elements rule declarations.

2. Selector Specificity:
After origin and importance has been determined, the cascade then considers the specificity of CSS selectors in the style sheets in the following order.

a. Inline Styles
HTML elements that have inline styling using the Style Attribute hold the highest level of specificity. Inline means the style is applied directly in the HTML selector (CSS Example 3).

b. ID Selectors
id selectors hold the next highest level of specificity.

c. Class Selectors (including pseudo-classes)
Class selectors hold the next highest level of specificity. Pseudo classes define a special state of an HTML element including:

• Style an element when the user mouses over it (a hover effect).
• Style visited and unvisited links differently.
• Style an element when it gets focus (a mouse click or keyboard input).

d. HTML Element Selectors (including pseudo-elements)
HTML Element (tag) selectors hold the lowest level of specificity. Pseudo elements are used to style specific parts of an HTML element including:

• Style the first letter, or line, of an element.
• Insert content before, or after, the content of an element.

Calculating Specificity
One method for calculating specificity is to use a numerical value system to determine a score as follows:

• Inline Styling = (1,0,0,0 points) Always has greatest specificity
• Each ID in a Selector = (0,1,0,0 points)
• Each Class in a Selector = (0,0,1,0 points)
• Each HTML Element (Tag) in a Selector = (0,0,0,1 points)

The following selector would have a specificity score of (0,1,1,1) because it contains one id, one class, and one HTML element tag:

#section-1 .column-2 p {
color: red;
font-style: italic;
}

By calculating the values of the selectors, you can determine specificity. However, It is important to remember that this is not a 10 base system of numbers. The commas are use to to indicate these values do not roll over. For example, a rule’s specificity could have a score of (0, 1, 12 ,4).

See this online Specificity Calculator to explore this method further.

A Simpler Method for determining specificity would be to think of it like a card game with a basic set of rules:

+ Add the number of ids in the selectors (#each-id)
= The selector with the most ids wins

+ In a tie, add the number of classes in the selectors (.each-class)
= The selector with the most classes wins the tie

+ If there is still a tie, add the number of HTML tags in the selectors (h1, p, etc.)
= The selector with the most tags wins the tie

~ If there is still a tie, then the selector that appears in the style sheet last wins

3. Order of Appearance:
After origin and specificity have been determined, the cascade then considers Order of Appearance of the CSS rules. Order of appearance refers to how the cascade sorts CSS rules by load order. Load order is the order in which the internal style sheet or links to external style sheets appear inside the <head> tag. Load order also refers to the location of the rule within a style sheet. If two CSS rules have the same level of origin and specificity, then the rule that appears last is used to style the element.

This is very useful when a Webpage is using a base set of CSS rules such as a external stylesheet in a predefined template and the designer wishes to globally override certain declarations. By linking to another external style sheet after the first, the designer can write rules with the same selector names, but different declarations, thereby selectively overriding the properties and values in the first style sheet.

INHERITANCE | HTML & CSS Example 3

Inheritance is the last main concept related to the CSS Cascade. Inheritance is the idea that some property values applied to an HTML element will, by default, be inherited by it’s child elements and some will not. For example, it would make sense for font-family and color to be inherited and applied globally and then override this base setting on individual HTML elements as needed. Otherwise the font-family property would have to be define for every HTML element. 

On the other hand, it would not be sensible to have properties such as width, margin or padding to be inherited by child elements. This would cause chaos when using CSS to layout Web page elements.

Inheritance is useful because otherwise many CSS rules would have to be highly redundant. Which properties are inherited, and which are not, is based mostly on common sense. HTML & CSS Example 3 includes inheritance:

<main id=”inheritance”>

#inheritance {
font-family: Times, “Times Roman”, serif;
font-size: 14px;
}

This results in all the descendant HTML elements inside the selector <main id=”inheritance”> to inherit the font-family property and display the Times font. The selector name #inheritance is only used for illustrative purposes. Generally, the font-family property would be applied to the <body> tag for inheritance but can be applied to any selector with descendants.

Note: If the Times font is not available on the User computer, then it will use “Times Roman” or any serif font. This is known as a Font Stack. In font stacks “quotation marks” are used for fonts with multi-word names.

Controlling Inheritance:
Since property inheritance defaults might need to be altered in a style sheet design, CSS includes four universal values for this purpose:

inherit
Specifies the property value applied to a selected element to be the same as its parent element.

initial
Specifies the property value applied to a selected element to be the same as the value set for that element in the browser’s default style sheet. If no value is set by the browser’s default style sheet and the property is naturally inherited, the property value is then set to inherit.

unset
Resets the property to its natural state of inheritance and acts like inherit, or to the default value in the browser’s default style sheet and acts like initial.

revert
Reverts to the property value it would have had if the current origin had not applied any styles to it. The property’s value is set to the user stylesheet’s value for the property. If a user user stylesheet’s value for the property is not set, than the property’s value is taken from the user agent’s default stylesheet.

To determine if a property has default inheritance, see the full list of CSS Properties & Values at w3schools.com.

APPLYING CSS TO HTML
There are 3 ways to apply CSS to an HTML document:

1. External style sheet (lowest level of author origin)
A style sheet can be defined in a separate document and then linked to the HTML document from inside the <head> tag. This allows the CSS and HTML code to be created and edited as separate files. Most importantly, by linking HTML to an external style sheet, it allows CSS rules to be applied and edited globally to multiple HTML documents. This allows CSS rules to be defined for all the pages in a Website.

You may have noticed that the HTML for CSS Examples 1-3 include a link to their respective CSS files in the <head> tag:

<link rel=“stylesheet” href=“css-example-3.css”>

href refers to the directory location (or path) of the external style sheet (css-example-3.) In these HTML examples, the .css files are located in the same directory as the HTML files since no other directories are listed.

2. Internal Style Sheet (next highest level of author origin)
CSS can be written directly into HTML by defining the style sheet within the <style> tag located inside the <head> tag. However, an internal style sheet only applies to the single HTML document in which it is defined.

3. Inline Styles (highest level of author origins)
The Style Attribute can also be inserted into an HTML Selector. Inline styles take precedence over other rule declarations in either internal or external style sheets because it is specific to the element itself.

An example of an Inline Style Attribute assigned to an HTML element might be:

<p style=”color: blue”></p>

CSS Example 3 demonstrates how an inline Style Attribute overrides the font color for the <p> tag inside <div class=”column-2″> even though in this instance the style for <p> is assigned by a compound selector with a high degree of specificity:

#section-1 .column-2 p {
color: red;
font-style: italic;
}

Inline Styles are useful when you need to override a rule declaration in a single instance but should be used sparingly as they override author origin and specificity in the CSS cascade.

CSS FILE NAMING CONVENTIONS
Like HTML it is important to always follow basic naming conventions when saving CSS files:

1. Use all lowercase letters or numbers to name CSS files.
2. Never use spaces in file names; instead use a hyphen to separate words.
3. Always end the name of a CSS file with file name extension .css
(Example: css-example-3.css)