CSS - Cascading Style Sheets...ITIY3 Introduction to Web Publishing University of Tampere, COMS 1 CSS - Cascading Style Sheets As a W3C standard, CSS provides a powerful mechanism

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 1

CSS - Cascading Style Sheets

As a W3C standard, CSS provides a powerful mechanism for defining the presentation of elements in

web pages. With CSS style rules, you can instruct the web browser to render page content. With

conditional rules, layout may even adapt to different environments and software solutions. Features

like the viewport’s size may be quite different in desktop and mobile environments. Mobile web

browsers have user interfaces and interactive features that differ from the typical desktop schemes.

All these differences can be taken into consideration when designing web pages.

With CSS as a separate presentation layer, you can alter the layout of a document and its elements

without changing the structural layer created with HTML markup. There may be no need to alter the

hierarchical and semantical structure of the document to adapt styling solutions, so presentation and

structure may be kept separate.

One of the great advantages of CSS lies in the possibility to centrally control the styles of multiple

documents in a web site. The same set of style rules may apply to all documents or a selected set of

documents within a site. At the document level, you can add styles to selected element types, specific

parts of the document (element groups), and even to single elements if needed.

https://www.w3.org/standards/webdesign/htmlcss#whatcss

https://www.w3.org/Style/CSS/

https://www.w3.org/standards/techs/css#w3c_all

Online example demonstrating CSS:

An example site intended as a demonstration of what can be accomplished through CSS-based design.

The same HTML-document is redesigned using only CSS rules and design specific graphics. Read the

description on the page, check the designs and inspect HTML and CSS code examples from the pages:

http://www.csszengarden.com/

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 2

CSS versions

CSS standards exist in different versions and development stages (levels): CSS level1 (CSS1), CSS level2

(CSS2), CSS2.1 revision and 2.2 revision on the way. CSS versions 1 define a complete collection of

definition rules and level 2 extends it further with its revisions. However, development of different

parts of the standards may have different developmental stages (levels) which form independent

modules which are published piece by piece instead of always providing one single complex

recommendation (like CSS1 & 2). Modules can be and are developed, tested, and adapted individually

making the working progress faster (also faster support by browser software is a result). Modules in

level 3 (and even 4), often referred as CSS3, bring new rules that can be incorporated to newer

versions of CSS (e.g. the next revision CSS 2.2).

https://www.w3.org/TR/2016/WD-CSS22-20160412/about.html#css2.2-v-css2

To be more up to date with the current CSS status, the W3C also issues “Snapshots” which give more

information to implementers than actual CSS authors. Web browser support for CSS3 modules may

have full or only partial support, or experimental level support with different browser specific

(vendor) prefixes for different web browsers.

Snapshot 2017 - https://www.w3.org/TR/css-2017/

Introduction and background process - https://www.w3.org/TR/css-2017/#intro

CSS levels - https://www.w3.org/TR/css-2017/#css-levels

CSS 3 module example – CSS Color Module Level 3 (extending the part of CSS2.1 version that is about

color definitions) - https://www.w3.org/TR/2011/REC-css3-color-20110607/

Styles affecting presentation of HTML documents

Web browsers apply inbuilt default styles for all opened web documents with HTML markup – the

collection of default browser styles is referred as User Agent Stylesheet. We have seen examples of

this in the previous exercises with HTML elements. Default styles vary with web browser types and

versions. There are some general guidelines and W3C recommendations how elements should be

displayed by default, usually suggesting features suited for the elements’ meaning. Differing

interpretations are somewhat common, especially for mobile browser implementations. The user

may alter some of the default browser styles. Browser settings offer certain basic options to choose

from e.g. font size and font family. Some browsers allow the usage of additional customized user

designed style sheets that may override default browser styles and if required even author style

sheets.

Both browser default and user defined styles may be replaced by the web page designers with CSS

style definitions (author styles) added to the web pages. Author style rules can be added as element

styles affecting a single element, as document specific styles defined in the HTML document, and as

site-specific styles with linked external style documents. The external style documents can be linked

to any desired HTML document, which makes maintaining layout easier for multiple documents or for

the entire site.

All three methods can be used for adding styles to the same document. The added style rules have an

increasing specificity (weight, rule strength) in affecting web page layout. The linked styles are the

least specific and the element-styles are the most specific. More specific rules override less specific

rules if they define overlapping styles for a selected element. Similarly, browser default styles are less

specific than document specific styles added by the author. Site-wide external rules can be overridden

with document specific rules e.g. to create exceptions to general rules. Both of these can be

overridden at the level of individual elements with element styles. All these form a hierarchy of styles.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 3

Defining style rules - syntax Style rules are added using specific syntax. CSS syntax is different from HTML syntax.

To apply presentational styles, you must first specify what element or elements of the document will

be affected by the style rules. You must also define which presentational features to change? How to

change them?

For the selection of elements, CSS selectors are used. The selector is followed by a declaration which

elaborates the property (or properties, features) to change, and what values should be used to

change them.

selector { property: value; }

A simple example:

h1 { color: blue; }

when added to a document within the STYLE element (document specific style), the rule means that

for any h1 element defined in the document, the text color is set to blue!

h1 = selector for all h1 elements in the document, selecting the element type “h1”

{ } = marking the declaration of the styles

color = property which defines text color in the selected element

: (colon) = compulsory separator

blue = value that corresponds to a specific color value that is used for the selected property (here text

color)

; (semi-colon) = marks the end of property / value pair, acts as a separator

Do not confuse properties in CSS styles with attributes in HTML elements!!!

selector { property: value; }

The selector in the example is an element

type selector – a simple selector that selects

all occurrences of the specified HTML element

type in a document.

h1 { color: blue; } – selects all H1 headings in

the document, text color is changed to blue

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 4

Changing the selector applies the style to another element:

p { color: blue; } – changing text color to blue for all paragraphs

You can also group selectors to apply the same declaration to

multiple elements:

h1,p { color: blue; }

The separator is a comma (,) between selectors! Here, all the

occurrences of H1 and P elements are selected.

There may also be more than just one property-value pair in a declaration – here an example of

adding color and font weight to the text of the selected

element:

h1 { color: blue; font-weight: normal; }

The separator is a semicolon (;) is a must between property/

value pairs.

You may make the rules more transparent and legible if you have multiple property / value pairs in a

declaration.

h1,h2 { color: red; font-size: 18px; text-transform: uppercase; }

You can also place each new property on a separate line:

h1,h2 {

color: red;

font-size: 18px;

text-transform: uppercase;

}

In the above example, the rule selects all h1 and h2 elements in the document.

color: red = all text in the both elements is red (black default)

font-size: 18px = changing font size to 18 pixels (smaller then default)

text-transform: uppercase = transforms all characters to uppercase

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 5

Adding CSS to HTML documents

As described above, you can define styles as element-styles, document specific styles and linked

external styles. The style syntax is the same for these (selector and declaration), except for the

element-styles, which do not need a separate selector as these are added straight to HTML elements.

Inline element-styles with the style attribute Style rules can be added to individual elements using the HTML style attribute.

syntax:

<element style=”property: value”>…</element>

The value of the style attribute must be a valid style declaration (property/value). No selectors

needed since the affected element is selected by defining the style attribute in the element itself.

Style declaration contains property definitions and value for these. There may be multiple property /

value pairs as a value for a style attribute.

If multiple properties are present, a semicolon (;) is used as separator!

<element style=”property:value; property:value”>…</element>

<h1 style=”color:red; font-weight:normal”>…</h1>

The above is yielding the text in that particular h1 element rendered in red and without the default

bold typeface in the heading.

Note that inline element-style rules for a property will have high specificity (weight). This means that

any style rules for that specific property, if defined at the document level or as linked styles, will be

ignored. Element-styles are always added to individual HTML elements in the body part and the

browser will interpret them as the element is parsed in the body! Document specific and linked styles

are added earlier in the head part of the document and are therefore processed earlier.

As a caution, do not use inline element-styles unless there is a good reason for it, since these are not

very flexible style definitions as these cannot be controlled centrally (from the style element or linked

styles). You do have to edit these rules inline, which may be much more burdensome.

Embedding document specific styles For document specific styles, use the “style” element in the head part of the document! (Note that

this is an element and not an attribute, as described in the previous section!) Styles added in the

STYLE element are effective only for the specific document (the document they are in). Style rules

here can control the layout of any selected element in the document.

<head>

<style>

…the style definitions go here…

</style>

</head>

(Optional attribute for the style element: type="text/css" is the default interpretation in HTML5, not

required)

<style>

h1 { font-size: bigger; }

h2 { font-size: smaller; }

</style>

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 6

The rule for the h1-selector (blue text,

selecting all h1) is overruled by the

element style (style attribute) in the

first heading (red text, element-style).

External or Linked Style sheets (global/site specific styles)

Instead of adding styles with style elements to every document in a web site, style definitions may be

saved in separate style documents and linked to HTML files as needed. This way the same style rules

can be added to any of the documents in a web site. The style rules are saved in a text file the same

way as HTML documents are save, but the format ending must be .css for the style documents.

There may be multiple linked style documents in a web page. Documents can selectively link to any of

the external style document defined for a site. This allows further control of layout, not all the style

definitions may be needed for all documents in the site.

The linking is done with the “link” element in the head of the document (there is also an @import rule

to import external style rules, but I recommend to use the link method):

<head>

<link rel=”stylesheet” href=”URL”>

</head>

e.g. <link rel=”stylesheet” href=”mysitestyles.css”>

The REL attribute must have the value “stylesheet”. The web browser loads the external style sheet as

an external resource when the document is parsed and applies the included styles.

The linked rules must be added before the document specific rules, preceding the STYLE element!

This way, document specific style definitions, are more effective (have more weight, more specific)

than linked definitions, and you can still make local adjustments and override site wide rules if

needed.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 7

<head>

<link rel=”stylesheet” href=”basic-styles.css”>

<style>

/* … the document specific style definitions … */

h1 { color: red; }

</style>

</head>

and the file “basic-styles.css” could contain the style rules e.g.

h1 { font-size: bigger; font-weight: normal; }

etc.

The font size for h1 elements is set to a relative bigger size and have less weight for any document

that has a link to the style document. In addition, the document we have here has document specific

styles that set the color of h1 elements to red in this document. The color does not change based on

the linked rules!

Linked style sheets must be added before document specific embedded style rules (style element) in

the head! This allows for document specific adjustments of styles if linked styles needed to be

adjusted for the particular document.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 8

Inheritance - Hierarchy in HTML and CSS -

HTML documents have an implicit hierarchical structure where elements are

contained by other elements at different hierarchical levels. There is a particular

order for basic structural elements, which contain the elements of the page. E.g.

the root element contains the head and the body elements; the body contains

content with typically block-level elements like headings and paragraphs that may

contain inline text elements like em, b, span, etc.

An element that is contained by another element is the child of that containing

element, the parent. The parent and the parent of a parent is also

an ancestor and child or child of a child is a descendant.

Structural relationships between HTML elements are important for

CSS styles rules because some of the style properties are inherited

by child elements from parent elements. This means that an

inherited property and its value is passed down from the parent element to its descendants (child

elements). E.g. changing text color for the body element will affect text color in all elements within

the body. Text color is passed to child elements and only overruled if it is separately defined for a

child element. Some of the inherited properties and certain values will affect calculated values for

child elements.

body { color: red; }

<body>

<h1>text</h1>

<p>text <em>text</em> text</p>

</body>

The red color is inherited to all elements in the body -> h1, p and em

Overlapping rules: when rules that apply to a specific property of a selected element are replaced by

rules added to its child elements for the same property. Inherited styles get replaced by styles added

for the child elements, the child element is on a higher hierarchical level in the HTML document.

body { color: red; }

p { color: blue; }

The text color is overridden for the p element and its

descendants. p and em

body { color: red; }

p { color: blue; }

em { color: green; }

The text color is overridden for the em element and its descendants (here no more descendants).

The text color is the same property for all these selected elements. The selectors have equal weight

(specificity), but the element hierarchy of the HTML elements affect the style rules. The higher the

element is in the element hierarchy, the more specific the affecting rule is. This is only valid when the

affected style rules are inherited from ancestor/parent elements.

Only text properties are inherited by default (e.g. font-family, font-size, text color, font-weight, font-

style, etc.), passed down to descendant elements. This makes sense as some text properties are often

kept the same between different elements. E.g. setting a consistent text style for the whole document

is quite simple as you can define the intended style for the body element (or other parent) and you do

not need to redefine the same rule repeatedly for each text element in different levels in the

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 9

document hierarchy. This reduces redundancy in the styles quite a lot. You can still change the styles

of specific descendant elements based on their position in the element hierarchy. The higher the

element is in the element hierarchy the more weight the affecting style rule will have.

However, non-inheriting properties are not passed down to child elements unless specifically

instructed. There is a specific value, “inherited”, that makes any property inherited. This gives you

more flexibility, but require more attention and more careful planning.

https://www.w3.org/TR/CSS22/cascade.html#inheritance

Conflicting rules

The order of the applied rules also matters. The last rule is valid when applying multiple equal-

weighted rules to change a single property of a selected element:

p { color: blue; }

p { color: red; }

p { color: green; }

Style Sheet Hierarchy and Cascading order

As mentioned in the above examples, there are specificity (weight) based rules on how effective style

rules are added to the document. The weight of a rule can be calculated. Below a simplified list of

these rules in weight order (1 = least weight):

1. Browser default settings

2. User style settings (customized for the browser by the user)

3. Linked external style sheet rules.

4. Linking order of multiple external style sheets if applicable – the last linked rule is applied if

equal-weighted rules are applied in the linked CSS styles.

5. Embedded rules within the document (style element in the head) – again the order of rules

counts – the last rule has more weight if otherwise equal.

6. Also the specificity rules matters, the higher the element is in the document hierarchy, the

heavier the rule is, as described above!

7. Inline element-styles (added with a style-attribute), when applied, have more weight than

other rules, as they are defined in elements in the body (see below).

https://www.w3.org/TR/CSS22/cascade.html#cascade

Changing element styles within the document You can create general rules to specific types of elements reoccurring in the markup. You can e.g.

create style rules that select and adjust h1 heading styles for all instances of the h1 element within

your documents. One may also add more specific rules that can be assigned to unique elements (id

attribute is used with a unique value), to groups of elements (with added class attribute with

common values), and rules that are applied conditionally depending on element hierarchy context,

e.g. selecting elements within certain elements. See more about selector on the course page.

These methods described above may be applied in combination, imposing the possibility of

overlapping and furthermore conflicting rules. Hence the final layout is a composite of all delicate

interpretations, resolution of conflicts; the “cascade” of rules. Hence the name: Cascading Style

Sheets.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 10

Using the Inspect element tool in Chrome to check style rules and specificity Developer tools in Chrome is perfect for inspecting style rules added to elements. The tool also shows

rule origin, specificity, inheritance, the whole cascade of style rules (which rules are inherited, which

are overridden, etc.).

When an HTML document is opened in Chrome, open the tool with the Inspect command

(SHFT+CTRL+I or from the context menu “Inspect)” to show how the browser sees the document

(Elements tab, for HTML), and element styles (Styles tab, for CSS). See below (CTRL + SHFT + I , and

undock the panel ) :

You can inspect CSS style rules applied to a selected element, the style rules are listed in the Styles

tab. The rules are organized in specificity order, increasing weight from bottom to top. Overruled

styles show up strike-through, meaning that the style is redefined or replaced by a heavier rule. Web

browser default styles (user agent stylesheet) show with gray background. There is also a reference

(on the right) where the rule is originated - user agent, linked, embedded styles, element.styles (style

attribute).

A simple example, the BODY element is selected (elements tab) for inspection. You can click on an

element in the elements tab to see all the styles affecting it in the Styles tab. Body styles here (see

below) include the default user agent styles and added text color as an embedded style in the

document head (style element):

You can also select any element from the browser’s viewport with the arrow tool (image below).

Select the tool (blue) and click on an element in the browser window. The style tab will show the

selected element’s styles:

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 11

Style inheritance example in the Developer Tool:

Here, the em element is selected from the

document. You can see the elements of the

document in the “Elements” tab, click the triangles

to open the nested elements. The bottom left

indicates the element hierarchy for the selected

element. Here: html > body > p > em

The style tab shows styles applied for the selected element both browser styles (user agent

stylesheet, mid gray) and author styles, here added in the style element.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 12

The style tab shows all style rules that affect the presented styles of the selected element. On the top,

the declaration (color: green) of the em type selector, which override inherited rules below.

Browser default styles (user agent stylesheet) apply here, the text in em elements is renderd with

italic style (cursive text). It is also visible that besides the em element, there are other elements that

get the same style (i, cite, var, address, dfn) by default.

The em element also inherits text styles (here, text color) from its parents. The em element is in a

paragraph (p) and the paragraph is a child of the body element. The inherited styles for text colors are

overridden by the more specific em selector, element hierarchy for the em element is higher.

Both styles inherited from the p and body elements are stroke through (these are overridden):

Some overridden relative values may still affect the final styles of the element!

The inspector also displays the origin of the style rule. On the right after each selector, there is a

reference to the origin of the rule. In the image above, “selector-1.html:8” and “selector-1.html:7”

suggest that the rules are document specific (selector-1.html is the example HTML file name). The

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 13

digits 8 and 7 are references to the line numbers the rules are added to the document (see below,

view-source CTRL+U).

If there are styles originated from an external stylesheet, the there is a reference to that stylesheet.

Here below some additional rules are added from a separate stylesheet – “example.css”.

<head>

<meta charset="utf-8">

<title>Page Title</title>

<link rel="stylesheet" href="example.css">

<style>

body { color: red; }

p { color: blue; }

em { color: green; }

</style>

The file contains the following rule:

em { font-weight: bold; }

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 14

em { font-weight: bold; } is on line 1 of the linked CSS file “example.css”.

em { color: green; } is displayed above the linked style, since it is defined in the style element within

the document. Document specific styles must be defined after the linked styles to allow document

specific changes when needed. If the linked style sheet would have overlapping styles with document

specific styles (em { font-weight: bold; color: purple; } in example.css), the document specific styles

win (color: green):

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 15

Inspecting more complex element styles from the examples (css-hierarchy.html):

The HTML code of the selected element in the image above:

<h1 id="orange2" class="purple blue" style="color:black">Heading text</h1>

Besides the added styles in the style element, the above example element also contains element-

styles added with the style attribute (element.style). Element-styles, when used, are on the top as

these are more specific than other added styles.

ITIY3 Introduction to Web Publishing

University of Tampere, COMS 16

Comments in HTML and CSS

Comments may be added to both HTML and CSS code to guide and to help the editor in maintaining

and updating of the document. Comments will not affect the content or interpretation of the page

and are not visible on the page.

HTML comment syntax: <!-- … -->

<!-- Text of the comment that is hidden from the user, not displayed

as a part of the page -->

CSS comment syntax: /* … */

/* CSS comments to be added among the definitions */

HTML comments are only valid in the HTML part of the document (everywhere outside the STYLE

element). CSS comments are valid only within the STYLE tag and in external CSS files.

CSS

<style>

h1{ color: red; } /* red main heading */

/* style comments in the style element or external style documents */

</style>

HTML (anywhere in the HTML document except for the style element)

<!-- document content start -->

<h1>This is an HTML heading 1</h1>

DO NOT MIX syntax, you cannot use HTML markup nor HTML comments in style

definitions! Also, style rules must be within style attributes and/or style elements

within an HTML document.