CSS - Cascading Style Sheets

ITIY3 Introduction to Web Publishing

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. 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:

University of Tampere, COMS

1

ITIY3 Introduction to Web Publishing

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).

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 - Introduction and background process - CSS levels - CSS 3 module example ? CSS Color Module Level 3 (extending the part of CSS2.1 version that is about color definitions) -

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.

University of Tampere, COMS

2

ITIY3 Introduction to Web Publishing

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

University of Tampere, COMS

3

ITIY3 Introduction to Web Publishing

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

University of Tampere, COMS

4

ITIY3 Introduction to Web Publishing

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:

...

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!

...

...

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.

...the style definitions go here...

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

h1 { font-size: bigger; } h2 { font-size: smaller; }

University of Tampere, COMS

5

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download