Cascading Style Sheets CSS 1 CHAPTER 3 Outline

Cascading Style Sheets CSS 1 CHAPTER 3

Outline 2 �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

CSS 3 �The CSS 1 specification was developed in 1996 �CSS 2 was released in 1998 �CSS 3 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

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

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

Levels of style Sheets 6 �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

Levels of Style Sheets 7 �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

Inline Style 8 �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>

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

External Styles 1 -2 10 �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 />

Selector Forms 11 �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

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

2. Class Selectors 13 � 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>

3. Generic Class Selectors 14 • 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 <h 1 class = "really-big"> … </h 1>. . . <p class = "really-big"> … </p>

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

5. Pseudo Classes 16 �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

5. Pseudo Classes 17 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> Class Description : hover an element that has the mouse over it. : link a link that has not been visited. : visited a link that has already been visited.

Properties & Properties Values 18 �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

Font Properties 19 � 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 14 pt Arial Helvetica Order must be: style, weight, size, font name(s)

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

Font Size 21 • Font Size E. g. Font-size: 10 pt �Units: - 16 px, 16 pt, 1. 16 em Vague font sizes: xx-small, medium, large, x-large, smaller, larger Percentage font sizes, e. g. : 90%, 120% xx- 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

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

Properties & property Values: Color 23 �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

Colors 24 � 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

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

Styling Page Sections 26 �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

Motivation for page sections 27 �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/

Introduction to Layout 28 �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

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

Borders 30 h 2 { border: 5 px solid red; }. . . <h 2> This is a heading. </h 2> Property Description border thickness/style/color of border on all 4 sides

More border properties 31 Property Description border-color, border-width, borderstyle Specific properties of border on all 4 sides border-bottom, border-left, borderright, border-top All propertiesof border on a particular side border-bottom-color, border-bottomproperties of border on a particular side style, border-bottom-width, border-leftcolor, border-left-style, border-leftwidth, border-right-color, border-rightstyle, border-right-width, border-topcolor, border-top-style, border-topwidth Complete list of properties

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

Padding 33 Property Description padding on all 4 sides padding-right padding on right side only padding-left padding on left side only padding-bottom padding on bottom side only padding-top padding on top side only Complete list of padding properties

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

Margin 35 Property Description margin on all 4 sides margin-right margin on right side only margin-left margin on left side only margin-bottom margin on bottom side only margin-top margin on top side only Complete list of margin properties

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

Floating Elements 37 �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

Floating Elements 38 Property Description float Removed from normal document flow; underlying text wraps around as necessary. Possible values: left, right, or none (default) img {float: right; } … <img src=”f. jpg" /> <p> First paragraph - First paragraph – First. . </p>

Floating Elements Diagram 39

Clear property 40 Property Description clear disallows any floating elements from overlapping this element. Possible values: left, right, both or none (default) img {float: right; } … <img src=”f. jpg" /> <p> First paragraph - First paragraph – First. . </p> <p style="clear: both; "> Second paragraph </p>

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

Sizing & Positioning 42 �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

Sizing & Positioning 43 div#ad {position: fixed; right: 10%; top: 50%; } … <div id=“ad”> I’m here </div> Property Value Description Position static default position relative offset from its normal static position absolute a fixed position within its containing element fixed a fixed position within the browser window Right, left, top, bottom positions of box's corners

Static and Relative Positioning 44 �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

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

Absolute Positioning 46 #menubar { position: absolute; left: 400 px; � 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 top: 50 px; }

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

Alignment vs. float vs. position 48 If possible, lay out an element by aligning its content 1. 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 2. if alignment won't work, try floating the element 3. if floating won't work, try positioning the element absolute/fixed positioning are a last resort and should not be overused.