Intro to Cascading Style Sheets IS 373—Web Standards Todd Will

CIS Web Standards-CSS 2 of 37 Topics Intro to Web Page Presentation Cascading Style Sheet Writing Properties Quick Reference CSS Workarounds Conclusion For Next Week

CIS Web Standards-CSS 3 of 37 Presentation Layer Key Points –Consumers of your information may be people or machines –People who view your site will use many different: Browsers Platforms Devices Screen sizes –Site visitors will have various levels of ability Goal: Universal usability Presentation Behavior Structure

CIS Web Standards-CSS 4 of 37 Test, test, test, test, test, test… There is no substitute for testing to see if your pages work in various browsers, platforms, screen sizes, devices For small-scale shops testing is often one of the most difficult steps Requires an investment in equipment: –PC, Mac, small screen devices, screen reader

CIS Web Standards-CSS 5 of 37 What is CSS? CSS stands for C ascading S tyle S heets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one

CIS Web Standards-CSS 6 of 37 Styles Solve a Common Problem HTML tags were originally supposed to hold the content of the document with the layout and presentation taken care of by the browser As browsers added new tags, such as and color attributes to the html, it became more difficult to separate the content of the document from the presentation To solve this problem, the World Wide Web Consortium (W3C) created Styles All major browsers support Cascading Style Sheets.

CIS Web Standards-CSS 7 of 37 Style sheets can save work Styles sheets define HOW HTML elements are to be displayed Styles are saved in external CSS files but can also be incorporated into the html page CSS allows developers to control the style and layout of several pages in just one place Web developers define a style for each html element and then apply that new style to as many pages as you want After changing the style sheet, all elements on your site can be updated automatically

CIS Web Standards-CSS 8 of 37 Multiple Styles Cascade into 1 Style sheets allow style information to be specified in many ways Styles can be specified in many ways –Inside a single HTML element, inside the element of an HTML page –An external CSS file Cascading Order –What happens when more than one style is specified for an element? If the element is defined in an external css document and then new formatting changes are added within the document –Priority of assigning formatting changes to an html element (from lowest to highest) Browser default External style sheet Internal style sheet (inside the tag) Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value)

CIS Web Standards-CSS 9 of 37 CSS Syntax CSS Syntax is composed of –A selector –A property –A value The format of a css formatting change is –Selector {property: value; – property: value;} –Selector HTML element/tag you wish to define –Property Attribute you wish to change –Value Each property can take a value –Property and value are separated by a colon –Each set of property and value are separated by a semicolon –The property and value listing for each element are surrounded by curly braces

CIS Web Standards-CSS 10 of 37 Sample CSS Syntax body {color: black} –Changes the background color to black – Note: If the value is multiple words, put quotes around the value: p {font-family: "sans serif"} –Change the paragraph font to sans serif – Note: If you wish to change more than one property, separate each change with a semicolon p {text-align:center;color:red} –Centers paragraph and changes the text color to red To make the style definitions more readable, you can describe one property on each line –p { text-align: center; color: black; font-family: arial }

CIS Web Standards-CSS 11 of 37 Grouping Grouping selectors –Separate each selector with a comma –All header elements (h1 through h6) can be assigned the color green by using: h1,h2,h3,h4,h5,h6 { color: green }

CIS Web Standards-CSS 12 of 37 Class Selector Class selector allows for different styles for the same type of HTML element Say you want to right align certain paragraphs in your document and center others, you would type: –p.right {text-align: right} –p.center {text-align: center} You must now use the class attribute in your HTML document: – This paragraph will be right-aligned. – This paragraph will be center-aligned. To apply more than one class per given element, the syntax is: – This is a paragraph. –The paragraph will be styled by the class "center" AND the class "bold". If you omit the selector, you can apply that class to all html elements, regardless of their type: –.center {text-align: center} –All elements with the class=“center” will be center aligned This heading will be center-aligned This paragraph will also be center-aligned. Do NOT start a class with a number as this is not supported by certain browsers

CIS Web Standards-CSS 13 of 37 Add Styles to Elements You can apply a style to html elements of a particular type –The style rule below will match all input elements that has a type attribute with a value of "text": –input[type="text"] {background-color: blue}

CIS Web Standards-CSS 14 of 37 The ID Selector Define styles for HTML elements with the id selector The id selector is defined as a # The style rule below will match the element that has an id attribute with a value of "green": –#green {color: green} The style rule below will match the p element that has an id with a value of "para1": –p#para1 { text-align: center; color: red } Matches the id attribute to the stylesheet

CIS Web Standards-CSS 15 of 37 CSS Comments Comments explain your code Good to use comments so you know how something was structured or the reasoning behind it Comments are ignored by browsers Comments start with "/*" and end with "*/" –/* This is a comment */ –p { text-align: center; –/* This is another comment */ –color: black; font-family: arial }

CIS Web Standards-CSS 16 of 37 Inserting Style Sheets Three ways to reference a style sheet – External style sheet – Internal Style sheet – Inline styles Style sheet priorties

CIS Web Standards-CSS 17 of 37 External Style Sheets Ideal when the style is to be applied to many pages Can change the look of the entire site by changing just one file Each page must link to the style sheet using the tag –The tag goes inside the head section – –The browser reads the style definitions from the mystyle.css stylesheet and formats the document according to its specifications External style sheets can be written in any text editor The file should not contain any html tags These style sheets are saved with a css extension Sample CSS file: –hr {color: sienna} –p {margin-left: 20px} –body {background-image: url("images/back40.gif")} Do NOT leave spaces between the property value and the units –40px does not equal 40 px in certain browsers

CIS Web Standards-CSS 18 of 37 Internal Style Sheets Internal style sheets should be used when only that document relies upon that unique style Define internal styles in the head section by using the tag, like this: – –hr {color: sienna} –p {margin-left: 20px} –body {background-image: url("images/back40.gif")} – The browser will now read these style definitions, and format the document according to it. Note: A browser normally ignores unknown tags

CIS Web Standards-CSS 19 of 37 Inline Style Sheets Inline style sheets mix content with presentation Use this method sparingly Normally just use the html attribute if you want to format a single element a certain way To use inline styles you place the style attribute in the relevant tag –Style attribute can contain any CSS property –Change the color and margin of the paragraph: This is a paragraph

CIS Web Standards-CSS 20 of 37 Multiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet An external style sheet has these properties for the h3 selector: –h3 { color: red; text-align: left; font-size: 8pt } An internal style sheet has these properties for the h3 selector: –h3 { text-align: right; font-size: 20pt } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: –color: red; text-align: right; font-size: 20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet

CIS Web Standards-CSS 21 of 37 CSS Background Properties Background properties allow for control fo the background color of an element Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. Background - A shorthand property for setting all background properties in one declarationBackground –background-color Sets the background color of an element –“red”, “blue”, hex color –background-image Sets an image as the backgroundurl(URL) –background-repeat Sets if/how a background image will be repeated –background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

CIS Web Standards-CSS 22 of 37 Text Properties Text properties control the appearance of text Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. Different properties you can control: Color –Sets the color of a text Direction –Sets the text direction letter-spacing –Increase or decrease the space between characters text-align –Aligns the text in an element (left, right, center, justify) text-decoration –Adds decoration to text (none, underline, overline, line-through) text-indent –Indents the first line of text in an element (length) text-transform –Controls the letters in an element (none, capitalize, uppercase, lowercase) white-space –Sets how white space inside an element is handled word-spacing –Increase or decrease the space between words

CIS Web Standards-CSS 23 of 37 Font Properties Change font, style, and colors of text Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. PropertyDescriptionValuesIEFNW3C –FontFont A shorthand property for setting all of the properties for a font in one declaration –font-familyfont-family A prioritized list of font family names and/or generic family names for an element(Courier, CourierNew) –font-sizefont-size Sets the size of a font –xx-small –x-small –Small –Medium –Large –x-large –xx-large –Smaller –larger –font-stretchfont-stretch Condenses or expands the current font-family –Normal –Wider –narrower –ultra-condensed –extra-condensed

CIS Web Standards-CSS 24 of 37 Font Properties (cont) –font-stylefont-style Sets the style of the font –normal –italic –Oblique –Bold –italic –font-weightfont-weight Sets the weight of a font –Normal –Bold –bolder –lighter –100 –200 –300 –400 –500 –600 –700 –800 –900

CIS Web Standards-CSS 25 of 37 Border Properties Style and color of an element's border Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. Border –Set all of the properties for the four borders in one declaration border-bottom –A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width border-style border-color border-bottom-color –Sets the color of the bottom border border-bottom-style –Sets the style of the bottom border border-style border-bottom-width –Sets the width of the bottom border Thin Medium thick border-color –Sets the color of the four borders, can have from one to four colors border-left –A shorthand property for setting all of the properties for the left border in one declaration border-left-width border-style border-color border-left-color –Sets the color of the left border border-left-style –Sets the style of the left border

CIS Web Standards-CSS 26 of 37 Border Properties (cont) border-left-width –Sets the width of the left border Thin Medium thick border-right –Properties for the right border in one declaration border-right-width border-style border-color border-right-color –Sets the color of the right border border-right-style –Sets the style of the right border border-right-width –Sets the width of the right border thin Medium thick border-style –Sets the style of the four borders, can have from one to four styles None Hidden Dotted Dashed Solid Double Groove Ridge Inset

CIS Web Standards-CSS 27 of 37 Border Properties (cont) border-top –A shorthand property for setting all of the properties for the top border in one declaration border-top-width border-style border-color border-top-color –Sets the color of the top border border-color border-top-style –Sets the style of the top border border-top-width –Sets the width of the top border thin Medium thick border-width –A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin Medium thick

CIS Web Standards-CSS 28 of 37 Margin Properties Define the space around the html elements Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. Margin –A shorthand property for setting the margin properties in one declaration margin-top margin-right margin-bottom margin-left margin-bottom –Sets the bottom margin of an element margin-left –Sets the left margin of an element margin-right –Sets the right margin of an element margin-top –Sets the top margin of an element

CIS Web Standards-CSS 29 of 37 CSS Padding Properties The CSS padding properties define the space between the element border and the element content –Negative values are not allowed –The top, right, bottom, and left padding can be changed independently using separate properties –A shorthand padding property is also created to control multiple sides at once. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. Padding –A shorthand property for setting all of the padding properties in one declaration padding-top padding-right padding-bottom –Sets the bottom padding of an element padding-left –Sets the left padding of an element padding-right –Sets the right padding of an element padding-top –Sets the top padding of an element

CIS Web Standards-CSS 30 of 37 Dealing with Different Browsers Old Way: Browser sniffing JavaScript New Way: Standards-compliant code Your page does not have to be exactly the same in all browsers—in fact, it shouldn’t be Solutions: –the two-sheet solution… –Media-specific CSS –CSS hacks

CIS Web Standards-CSS 31 of 37 The CSS Two-sheet Solution Older browsers (version 4 and below) don’t and have limited support for CSS, “path/to/style.css” hello world

CIS Web Standards-CSS 32 of 37 Media-Specific CSS CSS defines 10 media types: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv “all” is the default Most browsers support “print” and “screen” Support for “handheld” is spotty—test

CIS Web Standards-CSS 33 of 37 Examples of Media-specific CSS

CIS Web Standards-CSS 34 of 37 CSS Hacks Most hacks are workarounds for problems with rendering of the CSS box model All visible elements in CSS are either “block” level or “inline” elements Default values exist, but you can override these with CSS style rules

CIS Web Standards-CSS 35 of 37 The Box Model Box width is supposed to equal content In IE 5.x and 6.0 in quirks mode box width is calculated margin+border+padding+content Margin Content Padding Border

CIS Web Standards-CSS 36 of 37 Cascading Style Sheets Allows you to draw out the formatting and presentation of the page to a separate file Only have to change the display in one place and have it propagate to other pages Not all browsers support style sheets Reduces bandwidth costs by 13% Test, test, test with different browsers, operating systems, etc. to see that it will work well in several different configurations

CIS Web Standards-CSS 37 of 37 For Next Week Learning about scripting Designing a style sheet homework –Download from course website –Hand in printout of your style sheet, web page source, and web page display –I don’t care how it looks just as long as you fulfill the requirements Have Fun!