CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML 2
Background CSS1 Recommended by W3C in 1996 CSS2 Developed in 1998 Included many new features, but not all were supported CSS2.1 Developed in response to issues with CSS2 Browser support is excellent CSS3 Series of modules at various recommendation levels by the W3C since 2011 Browser support continues to improve 3 Why Use CSS? Flexible Apply style in one, many, or all cases Different tags, elements, contexts Centralized Change one style sheet change all usages Powerful Many features for text and layout 4
Style Sheet Levels Inline Lowest level Takes precedence over all other specifications <p style="color: red"> A paragraph </p> 5 Style Sheet Levels Document Mid-level Has precedence for the given document, but not over inline Selector Property <head> <style> p { color: red; </style> </head> Rule Value 6
Style Sheet Levels External Highest level Does not take precedence over inline or document styles Rules are defined in another file This is the standard p { color: red; Rule 7 External Style Sheets Rules defined in separate text file Include in an (X)HTML document header <link rel="stylesheet" type="text/css" href="path"> Relationship to Document MIME Type Path to File Include in an HTML5 document header <link rel="stylesheet" href="path"> Relationship to Document Path to File 8
Why Use External? Can be applied to multiple pages Can be validated Naturally separates content (HTML) from style (CSS) Keeps everything centralized 9 CSS Rules Used to define styles for the document Selector: what to apply the style to Property: what you want changed Value: how you want it changed /* comments */ selector { property1: value1; property2: value2;... 10
Type Selectors Use HTML element names p { color: red; h1, h2 { color: blue; Applied to all instances of the element(s) 11 Class Selectors Use a class name preceded by a period.warningtext { color: yellow; Applied to all elements where the class name is specified as an (or one of many) attribute(s) <p class="warningtext"> <h1 class="warningtext rightalign"> 12
ID Selectors Use an ID preceded by # #links { color: blue; Applied to the single element with the specified ID <a id="links" href="..."> 13 Contextual Selectors Two or more selectors separated by whitespace Represents a series of nested elements outer inner p em { color: purple; #links ul.external { color: orange; Also known as descendant selectors Applied to all elements in the given context Order is important! 14
Other Selectors Universal selector Applied to all elements in the document * { color: gray; Child selector Applied to inner elements nested immediately within outer element And more!.listhightlight > li { color: fuchsia; 15 Combining Selectors You can combine type, class and/or ID selectors together to specify a particular element p#problemdescription.errortext.highcontrast { color: red; background color: white; <p id="problemdescription" class="errortext highcontrast"> Rule not applied; incorrect tag <h1 id="problemdescription" class="errortext highcontrast"> Rule applied 16
Properties Over 60 different properties in CSS 2.1 Fonts and text alignment Lists Colours Backgrounds Margins and borders Each property has permitted value types Numbers Percentages Keywords A combination thereof 17 Specifying Colours Named predefined colour W3C has a list for CSS 2.1 RGB value Specifies values from 0-255 for red, green and blue e.g., rgb(255, 0, 0) Hexadecimal value Specifies values from 00 FF for red, green and blue e.g., #8000FF A simple, basic colour scheme works well 18
Colour Properties color Specifies foreground (usually text) colour Value: predefined name, RGB or hexadecimal background color Sets the background colour Value: predefined name, RGB or hexadecimal 19 Font font family Declares the font to be used Value: list of "font name"s and generic names List is separated by commas and evaluated from left to right font family: "Verdana", "Arial", sans serif; Generic names represent predefined families serif, sans-serif, monospace, cursive, fantasy Some named fonts may not be available Not everyone has them installed on their machine A font service might be unavailable End with a generic name as a default 20
Font font size Specifies the size of the characters Value: unit value, percentage or named Unit values Points (pt), pixels (px) or m-sizes (em or rem) em is relative to parent element s font size rem is relative to html element s font size Percentage Relative to parent element s font size Absolutely-named sizes xx small, x small,..., xx large Relatively-named sizes smaller, larger 21 Font font style Denotes text as normal or italics Value: normal or italic font weight Denotes text as normal or bold Value: normal or bold text align Specifies text alignment Value: left, center, right or justify 22
Font text decoration Specifies "decor" for characters Values: underline, overline, line through or none line height Sets the height of each line (not character) Typical value: number relative to font size (e.g., 1.5) Other values: unit value (pt, px, em or rem) or percentage 23