Cascading Stylesheets: Importance and Implementation
In the world of web development, Cascading Stylesheets (CSS) play a crucial role in defining the visual appearance of web pages. This comprehensive guide delves into different aspects of CSS, from inline stylesheets to external stylesheets, showcasing their significance in web architecture. Explore the concepts of content presentation, behavior, and styling, along with practical examples. Learn how CSS interacts with HTML and XML, and the various methods to apply styles in web design.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Cascading Stylesheets COMP3220 Web Infrastructure COMP6218 Web Architecture Dr Nicholas Gibbins nmg@ecs.soton.ac.uk
Content, Behaviour, Presentation ECMAScript DOM HTML CSS XML XSLT Behaviour SVG Visual Style Content PNG MathML Web Page 3 3
HTML style attribute Presentation information specified in the style attribute of the relevant element <!DOCTYPE html> <html> <head> <title>Cinderella</title> </head> <body> <h1 style="color: red;">Cinderella</h1> <p>Once upon a time a wicked queen wanted to get rid of her pretty step-daughter.</p> </body> </html> 4 4
Inline stylesheet Presentation information provided inline in a style element <!DOCTYPE html> <html> <head> <style type="text/css"> h1 { color: red; } </style> </head> <body> <h1>Cinderella</h1> <p>Once upon a time a wicked queen wanted to get rid of her pretty step-daughter.</p> </body> </html> 5 5
External stylesheet Presentation information stored in an external stylesheet, linked from the head of the document <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" ref="style.css"> </head> <body> <h1>Cinderella</h1> <p>Once upon a time a wicked queen wanted to get rid of her pretty step-daughter.</p> </body> </html> 6 6
CSS and XML CSS stylesheets may also be applied to XML documents using a processing instruction <?xml version="1.0"?> <!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd"> <?xml-stylesheet type="text/css" href="book.css" ?> <book> <chapter> <title>Cinderella</title> <para>Once upon a time a wicked queen wanted to get rid of her pretty step-daughter.</para> </chapter> </book> 7 7
Why Cascading Stylesheets? Stylesheets may be specified by different people: By the author of a web page By a user agent (a web browser) By a user Cascading refers to the overriding of one stylesheet by another 9 9
The Cascade In ascending order of precedence: User agent declarations (i.e. browser default) User normal declarations Author normal declarations Author important declarations User important declarations Style rules have both importance and specificity Importance declared by the author of a stylesheet Specificity depends on the selectors in the style rules (see later) 10 10
Anatomy of a CSS rule set A rule set (also referred to as a rule) consists of: A selector (identifies the elements which are to be styled) A declaration block enclosed in curly braces, containing a series of declarations (specifies how the elements are to be styled) h1 { display: block; font-size: 2em; font-weight: bold; } selector declarations 12 12
Rule importance A ruleset may be marked as important (see cascade precedence order) (avoid if possible) h1 { font-size: 4em; text-decoration: blink ! important } 13 13
@rules @import url( mystyle.css ) Includes the rule sets from another stylesheet @media media-type { ... } Specifies the target media type for the rulesets in the following block Key media types: all, screen, print, speech, braille @page { ... } Used to define a page box for print media @font-face { font-family: name; src: url(...) ; } Used to specify downloadable fonts 14 14
Basic selectors and combinators * Any element E An element of type E E#myid An E element with id= myid E.warning An E element with class= warning E F An F element that is a descendent of an E element E > F An F element that is a direct child of an E element E + F An F element that is immediately preceded by an E E ~ F An F element that is preceded by an E element 16 16
Attribute selectors E[foo] An E element with a foo attribute E[foo= bar ] An E element with a foo attribute whose value is bar E[foo^= bar ] An E with a foo attribute whose value starts with bar E[foo$= bar ] An E with a foo attribute whose value ends with bar E[foo*= bar ] An E with a foo attribute whose value contains bar 17 17
Pseudo-classes E:link An E element that is the anchor of an unvisited link E:visited An E element that is the anchor of a visited link E:active An E element that is being activated by the user E:hover An E element that is designated with a pointing device E:focus An E element with focus E:lang(fr) An E element in the language fr 18 18
Pseudo-elements E::first-letter The first formatted letter of an E element E::first-line The first formatted line of an E element E::before Generated content before an E element Generated content after an E element E::after 19 19
Structural pseudo-classes E:root An E element that is the document root E:first-child An E element that is the first child of its parent E:last-child An E element that is the last child of its parent E:only-child An E element that is the only child of its parent E:first-of-type An E element that is the first E child of its parent E:last-of-type An E element that is the last E child of its parent E:empty An E element with no children 20 20
Selector specificity Specificity is based on (in decreasing order of importance): Whether the declaration appears in a style attribute The number of ID attributes in the selector The number of other attributes and pseudo-classes in the selector The number of elements and pseudo-elements in the selector 21 21
Specificity example In increasing order of specificity: * li li:first-line ul li ul ol + li h1 + [*rel=up] ul ol li.red li.red.level #x34y style= ... { ... } { ... } { ... } { ... } { ... } { ... } { ... } { ... } { ... } 22 22
Specificity example What colour is the p element? <!DOCTYPE html> <html> <head> <style type="text/css"> p { color: blue } #x97z { color: red } </style> </head> <body> <p id="x97z" style="color: green">SOME TEXT</p> </body> </html> 23 23
Declarations Declarations are a series of property-value pairs Separated by ; Many properties! Too many to list exhaustively in a lecture (but I ll show the most common ones) 25 25
Common properties font-family: Arial; font-size: 32pt; font-style: italic; font-weight: bold; line-height: 14pt; color: green; color: rgb(0,128,0); background-color: #ffff00; opacity: 0.8; text-align: center; text-transform: uppercase; text-indent: 3em; text-decoration: blink; display: block; margin: 12pt 12pt 12pt 12pt; border: 0.1in solid red; border-right: 1cm; border-top-color: green; padding: 6pt 6pt 6pt 6pt; width: 80%; float: left; clear: left; direction: rtl; 26 26
Fonts font-family: Specifies a font family by name e.g. Eurostile, Arial, Alberto Some generic font families: serif, sans-serif, serif, monospace, cursive Can specify a list of fonts to try in order e.g. Freight, Georgia, serif font-size: Specifies how big a font is Absolute size: px pixels pt points(1/72 of an inch) Relative size (to parent element): % - percentage em - width of lower-case m font-style: Specifies a font style within a family e.g. normal, italic, oblique font-weight: Specifies how heavy a font is e.g. normal, bold, bolder 27
Web Fonts @font-face used to specify a downloadable font (usually in .woff format) @font-face { font-family: Gentium; src: url(http://example.com/fonts/Gentium.woff); } p { font-family: Gentium, serif; } 28
Colours Colour specifications by name: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow by hex value #rgb #rrggbb e.g. #ff0000 is red by rgb value rgb(255, 0, 0) rgb(100%, 0%, 0%) color: Text colour background-color: Colour of element s background 29
Backgrounds background-image: url(...) Specifies an image to use as the background for an element 30
Text rendering text-indent: Specifies indentation of first line of an element text-indent: 3em; text-indent: 10%; letter-spacing: Adjusts spacing between characters e.g. letter-spacing: 0.5em; word-spacing: Adjusts spacing between words e.g. word-spacing: 1em; text-align: left, right, center, justify text-decoration: none, underline, overline, line-through, blink text-transform: none, capitalize, uppercase, lowercase 31
Generated content CSS can be used to automatically add content to elements Used in conjunction with the :before and :after pseudo-elements Commonly used for adding quotation marks and numbering p.note:before { content: Note: ; } q:before { content: open-quote; } q:after { content: close-quote; } Special values: open-quote, close-quote attr(X) Returns the value of attribute X on the element 32
Generated content: numbering body { counter-reset: chap; } counter(...) Returns the value of a counter variable counter-increment: Adds one to a counter variable h1:before { content: Chapter counter(chap) : ; counter-increment: chap; } counter-reset: Resets the value of a counter variable to 0 h1 { counter-reset: sect; } h2 { content: counter(chap) . counter(sect) ; counter-increment: sect; } 33
Inheritance A property may have a special value of inherit For a given element, the property takes the same value as the same property on the element s parent body { color: black; background-color: white; } p { color: inherit; background-color: inherit; } 34 34
A note on standardisation Very many W3C CSS standards documents: Recommendations: Notes: Candidate Recommendations: Drafts: 11 10 26 57 Very large number of standards documents Varying degrees of maturity Varying degrees of adoption 35 35
Future* CSS Other layouts: Grid, Flexible Box, Multi-column, ... Animation Drop shadows, rounded borders Custom counters (for headings and lists) Text wrapping around shapes Web fonts Many others... * Possibly usable now, but not yet standardised 36 36
Further reading List of W3C CSS standards and standards-in-progress https://www.w3.org/standards/techs/css CSS Zen Garden A demonstration of CSS capabilities many stylings of the same HTML page http://www.csszengarden.com/ 37 37
