Cascading Style Sheets CSS

1. Cascading Style SheetsCSS Chapter 3

2. Outline • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning Ch#6, Sec#2 • Conflict Resolution

3. CSS The CSS1 specification was developed in 1996 CSS2 was released in 1998 CSS3 is on its way Describe the appearance, layout, and presentation of information on a web page (as opposed to HTML, which describes the content of the page). Describe howinformation is to be displayed, not whatis being displayed. Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents

4. Selector Value Rule Property Declaration Deceleration Block CSS Syntax & Terminology h1 { color : #333; font-size : large;} Note: the punctuation: The property is followed by a colon (:) and the value is followed by a semicolon(;)

5. Comments in CSS /* ... */ The // single-line comment style is NOT supported in CSS The HTML comment style is also NOT supported in CSS <!-- ... --> /* This is a comment. It can span many lines in the CSS file. */ p{ color: red; background-color: aqua; }

6. Levels of style Sheets • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning Ch#6, Sec#2 • Conflict Resolution

7. Levels of Style Sheets • Inline style sheets appear in the tag itself • Document-level style sheets appear in the head of the document • External style sheets are in separate files, potentially on any server on the Internet • Written as text files with the MIME type text/css

8. Inline Style • Style sheet appears as the value of the style attribute • General form: style = "property_1: value_1; property_2: value_2; … property_n:value_n" • E.g.: <p style="color: blue;"> This is a paragraph </p>

9. Document Level • General form: <style type = "text/css"> /* rule list */ </style> • The <style> tag must include the type attribute, set to "text/css".

10. External Styles 1-2 • A <link> tag is used to specify that the browser is to fetch and use an external style sheet file Syntax: <link rel="stylesheet" type="text/css" href="filename" /> E.g. <link rel = "stylesheet" type = "text/css" href = http://www.wherever.org/termpaper.css />

11. Selector Forms • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning Ch#6, Sec#2 • Conflict Resolution

12. 1. Simple Selector • The selector is a tag name ora list of tag names, separated by commas • p { color: blue; }  • h1, h2, h3, h4 { font-style: italic; } /*(grouping)*/

13. 2. Class Selectors • A style class has a name, which is attached to a tag name • p.narrow {property/value list} • p.wide {property/value list} • The class you want on a particular occurrence of a tag is specified with the class attribute of the tag • For example, <p class = "narrow"> ... </p> ... <p class = "wide"> ... </p>

14. 3. Generic Class Selectors • 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 • Example, .really-big { … } • Use it as if it were a normal style class <h1 class = "really-big"> … </h1> ... <pclass = "really-big"> … </p>

15. 4. Id Selectors • An id selector allow the application of a style to one specific element • General form: #specific-id {property-value list} • Example: #section14 {font-size: 20} … <p id = "section14"> … </p>

16. 5. 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

17. 5. Pseudo Classes Example: a:link{ color: green; } /* unvisited link */a:visited { color: pink; } /* visited link */a:hover { color: red; } /* mouse over link */ …. <p><a href="http://www.ksu.edu.sa" > KSU </a></p>

18. Properties & Properties Values • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning • Conflict Resolution

19. Font Properties • font-family • Value is a list of font names - browser uses the first in the list it has • font-family: Arial, Helvetica, Courier • If a font name has more than one word, it should be single-quoted • font-style • italic,normal • font-weight- degrees of boldness • bolder, lighter, bold, normal • Could specify as a multiple of 100 (100 – 900) • Font shorthands • For specifying a list of font properties font: bolder 14pt Arial Helvetica • Order must be: style, weight, size, font name(s)

20. Font Properties <style type = “text/css”> p {font-family: Georgia} h2 {font-family: “Courier New”} </style> … <p> This paragraph uses the first style above.</p> <h2> This h2 uses the second style above.</h2>

21. Font Size • Font Size • E.g. Font-size: 10pt • Units: • 16px, 16pt, 1.16em • Vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller,larger • Percentage font sizes, e.g.: 90%, 120% • pt specifies number of point, where a point is 1/72 of an inch onscreen • px specifies a number of pixels on the screen • em specifies number of m-widths, where 1 em is equal to the font's current size

22. Alignment of Text • 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

23. Properties & property Values: Color • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning Ch#6, Sec#2 • Conflict Resolution

24. Colors • The color property specifies the foreground color of elements • Property Values: • color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow • RGB codes: red, green, and blue values from 0 (none) to 255 (full) • hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full) • Property values are inherited by all nested tags • The background-color property specifies the background color of elements

25. Colors <style type = “text/css”> p {color: red;} h2 {color: rgb(128, 0, 196); } h4 {color: #FF8800;} </style> … <p> This paragraph uses the first style above.</p> <h2> This h2 uses the second style above.</h2> <h4> This h4 uses the third style above. </h4>

26. Styling Page Sections • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning • Conflict Resolution

27. Motivation for page sections • want to be able to style individual elements, groups of elements, sections of text or of the page • want to create complex page layouts http://www.cssbeauty.com/

28. Introduction to Layout • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning • Conflict Resolution

29. CSS Box Model • For layout purposes, every element is composed of: • The actual element's content • A borderaround the element • Padding between the content and the border (inside) • A margin between the border and other content (outside)

30. Borders h2 { border: 5px solid red; } ... <h2> This is a heading.</h2>

31. More border properties

32. Border Example h2 {border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double;} … <h2>This is a heading.</h2> • Each side's border properties can be set individually. • If you omit some properties, they receive default values (e.g. border-bottom-width above)

33. Padding

34. Padding Example p{padding: 20px; border: 3px solid black;} h2 {padding: 0px; background-color: yellow;} … <p>This is the first paragraph </p> <p>This is the second paragraph </p> <h2> This is a heading.</h2>

35. Margin

36. Margin Example p {margin: 50px; background-color: #FFAAFF;} … <p>This is the first paragraph </p> <p>This is the second paragraph </p>

37. Floating Elements • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning • Conflict Resolution

38. Floating Elements img {float:right;} … <imgsrc=”f.jpg" /> <p> First paragraph - First paragraph – First ..</p>

39. Floating Elements Diagram

40. Clear property img {float:right;} … <imgsrc=”f.jpg" /> <p> First paragraph - First paragraph – First ..</p> <p style="clear:both;"> Second paragraph </p>

41. Clear Property Diagram div#sidebar { float: right; } p{ clear: right; }

42. Sizing & Positioning • Basic CSS • Levels of Style Sheets • Selectors Forms • Properties & Property Values: • Font • Color • Page Layout • Styling Page Sections • Introduction to Layout • Floating Elements • Sizing and Positioning Ch#6, Sec#2 • Conflict Resolution

43. Sizing & Positioning div#ad {position: fixed;right: 10%;top: 50%; } … <div id=“ad”> I’m here </div>

44. Static and Relative Positioning • In static position mode, the default, elements are placed left to right, top to bottom • The top and left properties are ignored for static positioning • Relative position mode allows changing position relative to where the element would be with static positioning • This could be used to create superscripts or subscripts by moving text up or down relative to its normal position

45. Relative Positioning <body style = "font-family: Times; font-size: 24pt;"> <p>Apples are <span style ="position: relative; top: 10px; font-family: Times; font-size: 48pt;font-style: italic; color: red;"> GOOD </span> for you. </p> </body> ============================================ <body style = "font-family: Times; font-size: 24pt;"> <p>Apples are <span style ="position: relative; font-family: Times; font-size: 48pt;font-style: italic; color: red;"> GOOD </span> for you. </p> </body>

46. Absolute Positioning Removed from normal flow (like floating ones) Positioned relative to the block element containing them (assuming that block also uses absolute or relative positioning) Actual position determined by top, bottom, left, right values should often specify a width property as well #menubar { position: absolute; left: 400px; top: 50px;}

47. Fixed Positioning • removed from normal flow • positioned relative to the browser window • even when the user scrolls the window, element will remain in the same place.

48. Alignment vs. float vs. position • If possible, lay out an element by aligning its content • horizontal alignment: text-align: • set this on a block element; it aligns the content within it (not the block elementitself) • vertical alignment: vertical-align: • set this on an inline element, and it aligns it vertically within its containing element • if alignment won't work, try floating the element • if floating won't work, try positioning the element • absolute/fixed positioning are a last resort and should not be overused.