Cascading Style Sheets By Mimi Opkins

What We’ll Cover uSpecifying style sheet rules uExternal and inline style specifications uCreating new HTML elements through style sheet classes uSpecifying font and text properties uControlling spacing and alignment uControlling foreground and background properties

Benefits of Cascading Style Sheets uPowerful and flexible way to specify the formatting of HTML elements u Can define font, size, background color, background image, margins, etc. uShare style sheets across multiple documents or entire Web site uCan specify a class definition for a style, effectively defining new HTML elements uRules are applied in a hierarchical manner

Specifying Style Rules uGeneral form of rule selector {property:value} or selector {property1:value1; property2:value2; … propertyN:valueN} uExample H1 {text-align:center; color:blue }

Example - No Style Sheet No CSS Example 1 No CSS Example 1 Advantages of Style Sheets Cascading Style Sheets (CSS) make the web a better place by allowing you to more easily and quickly control the layout of your web pages. CSS will make your life much richer and the world a better place to live.

Result - No Style Sheet

Example, With Style Sheet CSS Example 1 BODY { background-image: URL(“earth.gif”) } H1 { text-align:center; font-family: Arial } H2 { font-family: "Comic Sans MS" } STRONG {text-decoration: underline }

Result, With Style Sheet

Ways to Use Style Sheets uLinking to an External Style Sheet uEmbedding a Style Sheet uInline Style Sheets

External Style Sheets uSpecify link to external style sheet in the HEAD section of the HTML uMystyle.css H1 {text-align: center; font-family: Arial} H2 {color: #440000; text-align: center; font-family: “Arial Black”, Arial, sans-serif}

Embedded Style Sheet uCode the sheet with a in the section of the HTML CSS Example 1 BODY { background-image URL(agc.gif) } H1 { text-align:center; font-family: Arial } H2 { font-family: "Comic Sans MS" } STRONG {text-decoration: underline } ….

Inline Style Sheets uUse the STYLE attribute for each HTML element to directory specify the style Style Sheets are great <P STYLE=“margin-left: 0.5in; margin-right: 0.5in; font-style: italic”> This slide show will teach you some of the basics of using Cascading Style Sheets.

Defining Element Style Classes uTo define an element style class, proceed the HTML element by a period and class name P.abstract {margin-left: 0.5in; margin-right: 0.5in; font-style: italic}

Using Element Style Classes uTo use, supply the name of the style class in the CLASS attribute of the HTML element Style Sheets are great This slide show will teach you some of the basics of using Cascading Style Sheets.

Defining Global Style Classes uTo define a global style class, omit the element name.blue {color:blue; font-weight: bold }

Using Global Style Classes uTo use, specify the style class in the CLASS attribute of the HTML element A Blue Heading This text is in the default color, but this text is blue.

Defining Contextual Selectors uDefines styles in a given context (ex. a tag within a tag) uExample: P B {color:red} uThis stylesheet rule tells the browser to make all bold text red only if it appears within text

Result Contextual Selectors uExample: Mimi Opkins, Teacher Java, HTML, CSS, Ethics. All these subjects, what does she really like the best? uResult: Mimi Opkins, Teacher Java, HTML, CSS, Ethics. All these subjects, what does she really like the best?

Inheritance uStylesheet rules are inherited from “parent” to “child” uExample: B {color:blue} All my Web pages will use cascading stylesheets within four weeks. uResult: There’s no rule for the, but since it occurs within the, it inherits the style for

Conflicting Style Sheets uWhat happens if an embedded style sheet, inline style sheet and a linked style sheet all define rules for the same element? uExample: A linked style sheet says is blue, an embedded says is green and an inline says is yellow

Style Sheet Precedence Rules 1. Inline Styles 2. Embedded Styles 3. Linked Styles 4. Default Browser Styles

Font Properties ufont-weight ufont-style ufont-size ufont-family utext-decoration

font-weight uRelative weight (boldness) of font unormal | lighter |bold | bolder | xxx u where xxx is 100, 200, …, 900 u Normal nonbold text is 400 uExample: H1 { font-weight: 200} H2 { font-weight: bolder}

font-style uFont face type within a family unormal | italic | oblique uExample: P{ font-style:normal } TH{ font-style:italic }

font-size uEither relative or absolute size of font uThree basics ways to specify the size u points, ems, pixels and other units u keywords u percentage values

Points, Ems uPoints - absolute size as in print media P {font-size: 16pt} uRefers to the size of the parent element P {font-size: 20pt} B {font-size: 1.5em} Any text within text would be 30 points (1.5 times that of its parent)

Pixels uScreen measurement uConsistent across all platforms uHowever, web pages will not print consistently uExample: P {font-size: 20px}

Other Units uin-inches ucm-centimeters umm-millimeters upc-picas uExample: P {font-size: 1in} u xx-small u x-small u small u medium u large u x-large u xx-large u Example: P {font-size:large}

Example, font properties-HTML Camp CECS <LINK REL=STYLESHEET HREF="CampCECS.CSS" TYPE="text/css"> Camp CECS We have the following activities: Computer Building Compiler Construction Software Engineering Java Brewing

Example, font properties-CSS H1 {text-align: center; font-family: "Comic Sans MS"} H2.computer {font-size: 30pt} H2.compiler {font-style: italic} H2.software {font-size:.75em; font-weight: 800;} H2.java {font-family: "Algerian"}

Result, font properties

text-decoration uDescribes text additions or decorations that are added to the text of an element unone|underline|overline|line-through| blink uExample: P {text-decoration: underline}

Alignment and Spacing utext-align uvertical-align utext-indent umargin-top, margin-bottom, margin-left, margin-right

text-align uDetermines how paragraph are positioned horizontally uleft|right|center|justify uExample: P {text-align:right}

vertical-align uDetermines how elements are positioned vertically utop|bottom|text-top|text-bottom| baseline|middle|sub|super uExample: P {vertical-align: super}

text-indent uSpecifies the indentation of the first line of the paragraph u+/- pt,pc,in,cm,mm|+/- em,ex,px,% uExample: P {text-indent: -25px}

Margins uEnable you to control the margin around each side of an element umargin-top, margin-bottom, margin-left, margin-right uExample: H4 {margin-top: 20px, margin-bottom: 5px; margin-left:100px; margin-right:55px}

Example, Alignment & Spacing - HTML Letter to the Lakers January 15,2003 Jedi Master, Yoda Universal Force Owner Los Angeles Lakers Los Angeles, CA To Whom It May Concern: I wish to thank you for your generous offer to join your basketball team. However, I must decline. Since I'm sure you don't need me for my height, I must come to the conclusion that you want me for my levitation skills. This would not be a proper use of the force. Sincerely, Master Yoda

Example, Alignment & Spacing - CSS BODY {margin-right: 0.5in; margin-left: 0.5in} P {margin-top: 25px} P.rhead {text-align:right; margin-right: 1.5in; font-family: sans-serif} P.lhead {font-family: sans-serif} P.body {text-align: justify; text-indent: 0.5in } P.foot {margin-left: 60%} B {vertical-align: sub}

Result, Alignment & Spacing

Foreground and Background Properties ucolor ubackground-color ubackground-image

color uColor of the text or foreground color ucolor-name|#RRGGBB u color-name (blue, yellow, green, red, etc.) u #RRGGBB - Red, Green, Blue hexidecimal values uExample: B {color: blue}

background-image uSpecifies an image to use as the background of any element unone|url(filename) u url can be either relative (images/bg.gif) or a full url ( uExample: TABLE {background-image: url(abc.gif)}

background-color uAdds a solid color behind any element on a page, including images ucolor-name|#RRGGBB u color-name (blue, yellow, green, red, etc.) u #RRGGBB - Red, Green, Blue hexidecimal values uExample: P.yellow {background-color: #FFFF66}

Example, Foreground & Background - HTML Color Properties <LINK REL=STYLESHEET HREF=color.css TYPE="text/css"> This is a very strange example of use of color.

Example, Foreground & Background - CSS BODY {background-image: url(earth.gif)} P.yellow {background-color: yellow; color:red}

Result, Foreground & Background

Credits uThanks to the following for input to this presentation: u Core Web Programming, Cascading Style Sheets by Marty Hall, Larry Brown u Mulder’s Stylesheets Tutorial by Steve Mulder