CSS - Cascading Style Sheets

Transcription

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

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

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 University of Tampere, COMS 3

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 University of Tampere, COMS 4

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> </style> </head> the style definitions go here (Optional attribute for the style element: type="text/css" is the default interpretation in HTML5, not required) <style> </style> h1 { font-size: bigger; } h2 { font-size: smaller; } University of Tampere, COMS 5

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 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. University of Tampere, COMS 6

7 <head> <link rel= stylesheet href= basic-styles.css > <style> </style> </head> /* the document specific style definitions */ h1 { color: red; } 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. University of Tampere, COMS 7

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, fontstyle, 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 University of Tampere, COMS 8

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. Conflicting rules The order of the applied rules also matters. The last rule is valid when applying multiple equalweighted 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). 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. University of Tampere, COMS 9

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: University of Tampere, COMS 10

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. University of Tampere, COMS 11

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 University of Tampere, COMS 12

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; } University of Tampere, COMS 13

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): University of Tampere, COMS 14

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 elementstyles added with the style attribute (element.style). Element-styles, when used, are on the top as these are more specific than other added styles. University of Tampere, COMS 15

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. University of Tampere, COMS 16