Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau

1. Cascading Style Sheets(CSS)Xingquan (Hill) Zhuxqzhu@cse.fau.edu CSS

2. CSS • Introduction • Levels of Style Sheets • Inline style sheets • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

3. Introduction • Evolution • The CSS1 specification was developed in 1996 • CSS2 was released in middle-1998 • CSS3 is on its way • Things you should know about CSS • CSSs provide the means to control and change presentation of HTML documents • But Why? Element presentation vs document structure • CSS is not technically HTML, but can be embedded in HTML documents • Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents • Style is specified for a tag by the values of its properties CSS

4. Levels of Style Sheets • Inline • Specified for a specific occurrence of a tag and apply only to that tag • Appears in the tag itself (Example) • Document-level style sheets • Apply to the whole document in which they appear • Appears in the head of the document (Example) • External style sheets (Example) • Can be applied to any number of documents • In separate files, potentially on any server on the Internet • A <link> tag is used to specify that the browser is to fetch and use an external style sheet file • <link rel = "stylesheet" type = "text/css" • href = "http://www.wherever.org/termpaper.css"> • </link> CSS

5. CSS Validation http://jigsaw.w3.org/css-validator/validator-upload.html CSS

6. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

7. Style Specification Formats • Format depends on the level of the style sheet • Inline • Style sheet appears as the value of the style attribute • General form: style = "property_1: value_11, value_12, value_13; property_2: value_2; … property_n: value_n;“ Final ; optional but preferred Example CSS

8. Style Specification Formats: Document level • Style sheet appears as a list of rules that are the content of a <style> tag • The <style> tag must include the type attribute, set to "text/css" • The list of rules • Selector1 {property_1: value_1; property_2: value 2} • Selector2 {property: value} • Comments in the rule list must have a different form - use C comments (/*…*/) Example CSS

9. Style Specification Formats: Conflicting Styles • Styles defined by the user take precedence over styles defined by the user agent • Styles defined by authors take precedence over styles defined by the user. • Styles defined for parent elements are also inherited by children (nested) elements • Inheritance Example • In case of conflict • Properties defined for child and descendant elements have a greater specificity than properties defined for parent and ancestor elements. CSS

10. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

11. Selector Forms • Simple Selector Form • The selector is a tag name or a list of tag names, separated by commas • Simple examples: • H1, h3, p • Contextual selectors • Ol ol li • P em CSS

12. Selector Forms: Class Selector • Used to allow different occurrences of the same tag to use different style specifications • A style class has a name, which is attached to a tag name • p.narrow {property: value; …} • p.wide {property: value; …} • The class you want on a particular occurrence of a tag is specified with the class attribute of the tag • <p class = "narrow"> This is narrow </p> • <p class = "wide"> This is wide class </p> CSS

13. Selector Forms: Generic Selector • A generic class can be defined if you want a style to apply to more than one kind of tag • A generic class must be named, and the name must begin with a period • .really-big { … } • Use it as if it were a normal style class • <h1 class = "really-big"> … </h1> • … • <p class = "really-big"> … </p> Example CSS

14. Selector Forms: id Selector • Allow the application of a style to one specific element • General form: • #specific-id {property-value list} • Example: • #section14 {font-size: 20} • When referring to this the id selector • <h1 id=“section14”> Welcome to my Home </h1> CSS

15. Pseudo Classes • Pseudo classes are styles that apply when something happens, rather than because the target element simply exists • Names begin with colons • hover classes apply when the mouse cursor is over the element • focus classes apply when an element has focus Example CSS

16. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Conflicting Styles • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

17. Property Value Forms • There are 60 different properties in 7 categories • Fonts • Lists • Alignment of text • Margins • Colors • Backgrounds • Borders CSS

18. Units of Measurement • Units (no space is allowed between the value and the unit specification) • px - pixels • in – inches (1 inch = 2.54 cm) • cm - centimeters • mm - millimeters • pt – points (1/72 inch) • pc - picas (12 points) • em - height of the letter ‘M’ • ex-height - height of the letter ‘x’ • Example • P { line-height:150% } /* 150% of ‘font-size’ */ • P {line-height: 1.5em} • #banner { height: 60%; width:70%; margin-left:15%; border: 1px solid #000} /* a box */ CSS

19. Font Property • Font-family • Value is a list of font names - browser uses the first in the list it has • font-family: Arial, Helvetica, Courier • Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS) • Browser has a specific font for each • If a font name has more than one word, it should be single-quoted • Font-size • Possible values: a length number or a name, such as xx-small, smaller, xx-large, etc Example CSS

20. Font Property • Font-style • italic, oblique (useless), normal • Font-weight - degrees of boldness • bolder, lighter, bold, normal • Could specify as a multiple of 100 (100 – 900) • 400 is the normal size • Font (shorthand) • For specifying a list of font properties • font: bolder 14pt Arial Helvetica • Order must be: style, weight, size, name(s) CSS

21. Text related Properties • Text-decoration • line-through, overline, underline, none • Letter-spacing; Word-spacing • Value is any length property value • Text-align • Left; right; center; justify • Vertical-align • Baseline; sub; super; top; text-top; middle; bottom; text-bottom; <percentage> • Text-transform • Capitalize; uppercase; lowercase; none • Text-indent • Value (percentage) • Line-height • Value (number, percentage) CSS

22. Position properties • Absolute positioning • Position: absolute; top, left, z-index Example # one{ position:absolute; top: 1em; left: 1em; } • Relative positioning • Position: relative; Example • Span • Grouping element: does not apply any inherent formatting to its contents CSS

23. Alignment of Text • Element dimensions • Specify the actual dimensions of each page element Example • Nested elements Example • The text-indent property allows indentation • Takes either a length or a % value • The text-align property has the possible values, • Left (the default), center, right, or justify • Sometimes we want text to flow around another element • the float property • Left, right, and none (default) CSS

24. Alignment of Text (contd.) • If we have an element we want on the right, with text flowing on its left, we use the default text-align value (left) for the text and the right value for float on the element we want on the right • <img src = "c210.jpg" style = "float: right" /> -- Some text with the default alignment – left • Clear float • <p style=“float: clear” … Example CSS

25. Border related properties Box model • Margin-top (right, left, bottom) • Value (percentage) • Padding-top (right, left, bottom) • Value (percentage) • Border-top-width (right, left, bottom) • Thin, medium, thick (value) • Border-style • Dotted, dashed, double, none • Border-color Example CSS

26. Background • Background-color: • Red; #0000FF • Background-image: • url(myimage.jpg) • Background-repeat: • Repeat; no-repeat; repeat-x; repeat-y: • Background-position: • Top; center; bottom; left; right; 20px 20px • Background-attachment: • Fixed; scroll; Background for single elements Example CSS

27. List Property • list-style-type • Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. • Can also use an image for the bullets in an ordered list • <li style = "list-style-image: url(bird.jpg)"> Example CSS

28. User Style Sheets • Users format pages based on preference • <html xmlns = "http://www.w3.org/1999/xhtml"> • <head> • <title>User Styles</title> • <style type = "text/css"> .note { font-size: 9pt } </style> </head> • <body> • <p>Thanks for visiting my Web site. I hope you enjoy it. • </p><p class = "note">Please Note: This site will be moving soon. Please check periodically for updates.</p> • </body> • </html> Example CSS

29. Other interesting stuff • Cursor Example • Specifies the type of cursor to be displayed when pointing on an element. • Cursor: url(sample.cur), cursor: crosshair • First letter (pseudo element)Example • Adds special style to the first letter of a text • P:first-letter{color:#000; font-size:xx-large} • Mighty Hover Example http://icant.co.uk/csstablegallery/index.php?css=75#r75 Complete CSS2 Properties:http://www.w3schools.com/css/css_reference.asp CSS

30. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Conflicting Styles • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS