Cascading Style Sheets

Cascading Style Sheets By Mimi Opkins

What We’ll Cover • Specifying style sheet rules • External and inline style specifications • Creating new HTML elements through style sheet classes • Specifying font and text properties • Controlling spacing and alignment • Controlling foreground and background properties

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

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

Example - No Style Sheet <HTML> <HEAD> <TITLE>No CSS Example 1</TITLE> </HEAD> <BODY> <H1>No CSS Example 1</H1> <H2>Advantages of Style Sheets</H2> 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 <STRONG>much</STRONG> richer and the world a better place to live. </BODY> </HTML>

Result - No Style Sheet

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

Result, With Style Sheet

Ways to Use Style Sheets • Linking to an External Style Sheet • Embedding a Style Sheet • Inline Style Sheets

External Style Sheets • Specify link to external style sheet in the HEAD section of the HTML <LINK REL=STYLESHEET HREF=“Mystyle.css” TYPE=“text/css”> • Mystyle.css H1 {text-align: center; font-family: Arial} H2 {color: #440000; text-align: center; font-family: “Arial Black”, Arial, sans-serif}

Embedded Style Sheet • Code the sheet with a <STYLE> in the <HEAD> section of the HTML <HTML> <HEAD> <TITLE>CSS Example 1</TITLE> <STYLE TYPE="text/css"> BODY { background-image URL(agc.gif) } H1 { text-align:center; font-family: Arial } H2 { font-family: "Comic Sans MS" } STRONG {text-decoration: underline } </STYLE> </HEAD> ….

Inline Style Sheets • Use the STYLE attribute for each HTML element to directory specify the style <H1>Style Sheets are great</H1> <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 • To 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 • To use, supply the name of the style class in the CLASS attribute of the HTML element <H1>Style Sheets are great</H1> <P CLASS=“abstract”> This slide show will teach you some of the basics of using Cascading Style Sheets.

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

Using Global Style Classes • To use, specify the style class in the CLASS attribute of the HTML element <H2 CLASS=“blue”>A Blue Heading</H2>  This text is in the default color, but <DIV CLASS=“blue”>this text is blue.</DIV>

Defining Contextual Selectors • Defines styles in a given context (ex. a tag within a tag) • Example: P B {color:red} • This stylesheet rule tells the browser to make all bold text red only if it appears within <P> text

Result Contextual Selectors • Example: <H1><B>Mimi Opkins<B>, Teacher </H1> <P>Java, HTML, CSS, Ethics. All these subjects, what does she <B>really</B> like the best? • Result: Mimi Opkins, Teacher Java, HTML, CSS, Ethics. All these subjects, what does she really like the best?

Inheritance • Stylesheet rules are inherited from “parent” to “child” • Example: B {color:blue} <B>All my Web pages will use cascading stylesheets within <I>four</I> weeks. • Result: There’s no rule for the <I>, but since it occurs within the<B>, it inherits the style for <B>

Conflicting Style Sheets • What happens if an embedded style sheet, inline style sheet and a linked style sheet all define rules for the same element? • Example: A linked style sheet says <P> is blue, an embedded says <P> is green and an inline says <P> is yellow

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

Font Properties • font-weight • font-style • font-size • font-family • text-decoration

font-weight • Relative weight (boldness) of font • normal | lighter |bold | bolder | xxx • where xxx is 100, 200, …, 900 • Normal nonbold text is 400 • Example: H1 { font-weight: 200} H2 { font-weight: bolder}

font-style • Font face type within a family • normal | italic | oblique • Example: P { font-style:normal } TH { font-style:italic }

font-size • Either relative or absolute size of font • Three basics ways to specify the size • points, ems, pixels and other units • keywords • percentage values

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

Pixels • Screen measurement • Consistent across all platforms • However, web pages will not print consistently • Example: P {font-size: 20px}

in-inches cm-centimeters mm-millimeters pc-picas Example: P {font-size: 1in} xx-small x-small small medium large x-large xx-large Example: P {font-size:large} Other Units

Example, font properties-HTML <HTML> <HEAD> <TITLE>Camp CECS</TITLE> <LINK REL=STYLESHEET HREF="CampCECS.CSS" TYPE="text/css"> </HEAD> <BODY> <H1>Camp CECS</H1> We have the following activities: <H2 CLASS="computer">Computer Building</H2> <H2 CLASS="compiler">Compiler Construction</H2> <H2 CLASS="software">Software Engineering</H2> <H2 CLASS="java">Java Brewing</H2> </BODY> </HTML>

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 • Describes text additions or decorations that are added to the text of an element • none|underline|overline|line-through| blink • Example: P {text-decoration: underline}

Alignment and Spacing • text-align • vertical-align • text-indent • margin-top, margin-bottom, margin-left, margin-right

text-align • Determines how paragraph are positioned horizontally • left|right|center|justify • Example: P {text-align:right}

vertical-align • Determines how elements are positioned vertically • top|bottom|text-top|text-bottom| baseline|middle|sub|super • Example: P {vertical-align: super}

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

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

Example, Alignment & Spacing - HTML <HEAD> <TITLE>Letter to the Lakers</TITLE> <LINK REL=STYLESHEET HREF="yoda.css" TYPE="text/css"> </HEAD> <BODY> <P CLASS=rhead>January 15,2003<HR> <P CLASS=rhead>Jedi Master, Yoda Universal Force <P CLASS=lhead>Owner Los Angeles Lakers Los Angeles, CA <P><BR>To Whom It May Concern: <P CLASS=body>I wish to thank you for your generous offer to join your basketball team. However, I <B>must</B> 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. <P CLASS=foot>Sincerely, <BR><BR>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 • color • background-color • background-image

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

background-image • Specifies an image to use as the background of any element • none|url(filename) • url can be either relative (images/bg.gif) or a full url (http://www.csulb.edu/images/my.gif) • Example: TABLE {background-image: url(abc.gif)}

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

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

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

Result, Foreground & Background

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

Cascading Style Sheets