1. 1 Cascading Style Sheets Cascading Style Sheets sound intimidating. In reality, however, CSS is one of the most convenient tools available to Web developers Rachel Andrew. "The CSS Anthology: 101 Essential Tips, Tricks & Hacks" Using HTML and JavaScript to Develop Website

2. 2 What we are talking about… l We will look at: »What are CSS –Advantages and disadvantages »Types of CSS –Look at embedded CSS –Look at external CSS »Using Selectors »Using Classes »Positioning Items –Border –Margin –Padding –Creating a 2 column layout –Creating Navigation Items

3. 3 What are cascade style sheets? l When HTML has a fundamental problem: »it does not separate page content from presentation »Not a good solution to: –Share a style (e.g., color scheme) among many pages at a site –Layout a site – forced to use tables within tables (within tables) »The W3C created cascade style sheets to allow seaperate display format from document content.W3C

4. 4 Web Page with and without CSS CSS controls text size, style, color. Line spacing, graphic spacing, and many other things This layout used stylesheets and tables. Much of this could have been done without tables. Every page within the site, has same text color and look and feel

5. 5 Cascading Style Sheets! l The basic idea: Separate style information from text content l What do they do? »Specify a common set of styles and spacing instructions for elements on a page. »E.g., a web site with 5 different pages, might use style sheets to specify things like: –Common size for headers, –default font type, – background images or colors, –margin sizes and –and other page styles.

6. 6 CSS – Advantages/disadvantages l Some advantages of using CSS: »Control - Offers greater page layout controls for all pages at a site. E.g., can specify margin, indents, line spacing, element positioning, font size, etc. »Style Separate From Document Structure »Smaller Size? - Can decrease document size - E.g., (reducing the number of FONT tags) »Maintainability - Easier site maintenance l Disadvantages: » Browser Support - Not supported in browsers earlier than I.E. 3.0 or Netscape 4.0. »Browser Implementation - IE and Netscape implement the standard differently. Netscape and IE implement many elements slightly different so need testing with both browsers.

7. 7 What we are talking about… l We will look at: »What are CSS »Advantages and disadvantages »Types of CSS –Look at embedded CSS –Look at external CSS »Using Selectors »Using Classes »All About Properties –A big properties example

8. 8 Basic CSS Syntax l Place style info at top of HTML document: H1 {Color: red; font-size: 24pt; } H2 { Color: green; font-size: 12pt; } Notice use of 2 selectors with general syntax: selector:{property:value} Specifies to make all tags red text and size 24pt. Selector - identifies the element to be affected. Includes things like H1, H2, P, EM, LI EM. property:value - identifies a stylistic property to be defined with some value. Includes things like color: red, font-site: 12pt, font- face Verdana.

9. 9 Types of Style Sheets l Still, style sheets can be used in 3 different ways: 1.Inline Styles - Put the style information in-line the text of the document. –Would specify the style for a particular line of text in the document. (highest precedence). 2.Embedded Styles - Embed the style sheet on the top of the document. –For example, would specify the default color for all items in this web page. 3.External Styles - Collect the style information in an external file and link them into all the needed files at your site. –For example, would provide a file that has all style information (like color of headers) and include or link that file into all pages of your site. Note: Its called cascading style sheets because inline style specs override, embedded style specs override, external style specifications Note: Style sheets are typically used as a separate file. Then every page that wants that “style” links to the sheet.

10. 10 1 - Inline style sheet information An Unusual Heading A Normal Heading Can specify style sheet info inline with the HTML Note: Most people seldom use inline style specification. It overrides all other style specifications and therefore effects their control.

11. 11 2 - Embedded example l Place style info at top of HTML document: I {Color: red;} H2 { Color: green; font-size: 12pt; } Sample web Page Sample Web Page This is a sample web Page with emphasis added. Note the “style” tag, used in head section.

12. 12 3 - External (or linked) Style Sheets l HTML file looks like: This is a sample web Page with emphasis added Interesting Example!! Writing interesting Web Pages is not that hard if you know the HTML language. A Short Quote Here is what JFK said... Now is the time for all good men to come to the aid of our country. l External file called stylesheet.css H1 { Color: red; font-size: 28pt; } H2 { Color: green; font-size: 22pt; } P {margin-left: 44pt; } This line loads in file stylesheet.css stylesheet.css contains only these lines. Make sure it has no blank lines and use.css suffix!

13. 13 What we are talking about… l We will look at: »What are CSS »Advantages and disadvantages »Types of CSS –Look at embedded CSS –Look at external CSS »Using Selectors »Using Classes »All About Properties –A big properties example

14. 14 Using CSS Selectors l Type Selectors – Can use lots of different HTML elements: l For example, H1 { Color: red; font-size: 36pt; } H2 { Color: green; font-size: 24pt; } P {margin-left: 44pt; } EM, I { color: green; } B { color: red; font-size: 18pt; } H1 {Color: red; font-size: 24pt; H2 { Color: green; font-size: 12pt; } EM { Color: red; }

15. 15 Specifying Properties in Shorthand l So far specify properties one at a time h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; } l Can also specify same with the following: h1 { font: bold 12pt/14pt Helvetica; }

16. 16 Specifying a Page Default... l Use the * selector to specify a default for page: * { color: red; font-size: 15pt;} * { color: red; font-size: 15pt;} ID Example There are 3 ways to define style sheets: Inline styles. These are aadded to the HTML tags Internal stylesheets: defined at beginning of document. External stylesheets: defined in an external file.

17. 17 Properties - font-family l font-family - specifies a family of fonts to use l Values: list of fonts to use l Applies to: all elements l Example: P { font-family: Veranda, sans-serif } l Notes: » There are 5 possible font-families it is like specifying a generic name. It is a good idea to make one of these last in the list 1.sans-serif (e.g., halvetica or arial) 2.monospaces (e.g., courier or new courier) 3.cursive (e.g., Zapf-chancery) 4.serif (e.g., Times) 5.fantasy (e.g., western, impact, or some other display oriented font)

18. 18 Properties - font-style l font-style - specifies between the normal (default), italic, and or oblique font-face within a font-family. (oblique is slanted text, italic is slanted with more cursive characters.) »Values: normal | italic | oblique »Applies to: all elements »Example: H1 { font-style: italic } »Notes: Bold is part of the font-weight not font-style.

19. 19 Properties - font-weight l font-weight - specifies the weight or boldness of the font to use. l Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 l Applies to: all elements l Example: STRONG { font-weight: 700 } l Notes: Allows either a descriptive tag (normal, bold, bolder or lighter) or a number. Normal is the default = 400. Typical bold is 700. Not all numbers may be supported within a particular font-family and browser have inconsistent support of this feature

20. 20 Properties - font-size l font-size - specifies a size of font to use l Values: absolute size | relative size | length percentage l Applies to: all elements »As can be seen from above can be specified 3 different ways: –Absolute size l Values: xx-small | x-small | small | medium | large | x-large | xx-large l Example: H1 { font-size: x-large } l Notes: These are descriptive terms that reference a table of sizes kept in the browser. –Relative Sizes l Values: larger | smaller l Example: H1 { font-size: larger } l Notes: specifies size relative to the parent object. –Length Sizes l Values: number + em | ex | px | pc | mm | cm | in l Example: H1 { font-size: 24pt}

21. 21 Font-size cont - Length sizes can be specified differently … CodeUnitDescription pxPixelNumber of pixels relative to the monitor resolution ptPointA unit of measuring type (from publishing) equal to 72 pts = 1 inch pcPicaA unit of measurement from publishing. 1 = pts or 1/6 inch emEmA relative measurement equal the with of the capital M in the current font exExA relative measurement for the height of the width of the letter X in the current font. inInchesMeasures in inches mmMillimeterMeasures in millimeters cmCentimeterMeasures in centimeter

22. 22 Properties - font-color l color - specifies the color of the element. »Values: color_name | RGB Hex Value | RGB New Values »Applies to: all element »Notes: As can be seen from above, specify 1 or 3 ways –color_name: Use 1 of the 16 color names. l values - aqua, gray, navy, silver,... l Example: »STRONG { font-style: italic; color: purple } –RGB values: Use hex value that fill in the RGB values. l values - 000000,..., FFFFFF l Example: »STRONG { font-style: italic; color: #FF00FF } –RGB New Values l values - rgb(255,0, 255) or rgb(100%, 0%, 100%) l Example: »STRONG { font-style: italic; color: rgb(255, 0, 255) } »STRONG { font-style: italic; color: rgb( 100%, 0, 100%) }

23. 23 Properties – line-height l line-height - sets height of lines. l Values: normal | number | length | percentage l Applies to: all element l Notes: As can be seen from above, specify 1 or 3 ways l Examples: P ( line-height: 1.2 } P { line-height: 1.2em } P { line-height: 120% }

24. 24 Properties – text-indent l text-indent - specifies the amount of indentation from the far left. l Values: length | percentage l Applies to: block level elements l Notes: As can be seen from above, specify length or percent of normal text »Examples: P{ text-indent: 3em } P { text-indent: 3em } Indent Example This is a example of a of a sentence. A new paragraph. This is new paragraph.

25. 25 Properties – background color l background-color - specify the color or RGB value for background color. l Values: color name | RGB value l Applies to: all element l Notes: Sets the background color of the element. »Examples: P.warning { background-color: red } STRONG { font-weight: 900; background-color: silver } STRONG { font-weight: 900; background-color: silver } Background example This is a example of a Very strong section.

26. 26 Properties – background color l background-image - specify the background image for an element. l Values: URL l Applies to: body tag l Notes: Sets the background image for element. »Examples: BODY { background-image: URL(back.gif) } Clearly this means with a CSS with this one tag, I can link into all my HTML documents and get common background.

27. 27 Classes In CSS l Classes enable creation of special categories of properties per tag »Can call classes on demand –For example make some tags look one way and others a different way. l E.g., suppose this is in a file called stylesheet3.css H1 { color: green; } H1.important {font: 36pt "Comic Sans"; Color: Blue} H1.normal {font: 24pt "Arial"; Color: red} The first part denotes the HTML element. The second part denotes the “name” or label for the element. Defines the element and property to set.

28. 28 Using the class …. Once linked to this style sheet. Have to different ways to create H1 elements: Check It Out! This is an important header … Note: you can also write a ‘default class’ with no name:.red { color=red } This can be used in multiple places as such or

29. 29 Class Example... H1 { color: green; } H1.important {font: 36pt "Comic Sans"; Color: Blue} H1.normal {font: 24pt "Arial"; Color: red} This is a sample web Page with emphaisis added Normal H1 Check It Out! This is an important header Very Interesting Indeed This is a less important header. Regular H1 tags use this Define H1.important and H1.normal classes

30. 30 Using ID selectors Allows you to override style properties: B.important {color:blue; font: 24pt> #red{Color: red} B {font-weight: 700 } I { color: green; font: 36pt "Comic Sans"; } l So you could write the following: Specifies anything with id=#red becomes color red (By Specification only use once per html element) but this is poorly enforced.

31. 31 ID Example... B.important {font: 18pt } #red { Color: red; font:8pt } b {color: green; } ID Example There are ways to define style sheets: Inline styles. These are aadded to the HTML tags Internal stylesheets: defined at beginning of document. External stylesheets: defined in an external file. Size=18 from important Color from ID= Note: The rules on ID are not consistently enforced on all browsers. (Some allow > 1 ID use per document, others overlap differently) Color from default definition

32. 32 Selectors - Special Built-in Classes – AKA Pseudo classes l There is a set of classes that are special built-in. For example, are 4 common ones used with. A:link { color: red } A:visited { color: maroon } A:active { color: lime } A:hover { color:green } A:Hover{ color:red } Indent Example Welcome to my site home | contact | questions | When put cursor over link it changes color Not visited yet As being clicked While cursor is over link

33. 33 Objectives... l How to create tables »Basic,, tags l Some arguments with table »Height, width, border l Special “tricks” »Cell text alignment »Padding the columns and Rows »Spanning Columns and Rows »Special Examples l Creating page layouts

34. 34 Hands on Assignment l Create an external style sheet that will change the following HTML to look like the following (note the background color is #c6c6c6) This is a sample web Page with emphaisis added Welcome to my page Note that the default color is blue all h1 have different style While using h2 we have complete control of everything

35. 35 One possible Solution * { font-color: blue; background: "#c6c6c6"; } H1 { Color: red; font-size: 12pt; } H2 { Color: green; font-size: 10pt; } P {margin-left: 44pt; }

36. 36 Do Only This lab... First Annual CSS Test Results No Name Score Comments 1 George 56 Missed Lab 1. Got a 60% on Test. 1 John Smithson 100 Perfect Score. Great Job. 1 Maggie May 89 Very close to an A. Should have completed last HW on time. Use the following html to create a page that looks like the Following: (Use embedded CSS) Border=2 width=100% Align center, size 36px.

37. 37 One Possible Solution... HTML>.bigcenter { font-size: 36px; color: grey; text-align: center; }.yellow { background: yellow; padding-top: 36px; }.grey { background: #c6c6c6; padding-top: 36px; }.t1 { background:#dddddd; border: 2; width: 100% } Table Lab First Annual CSS Test Results No Name Score Comments 1 George 56 Missed Lab 1. Got a 60% on Test. 1 John Smithson 100 Perfect Score. Great Job. 1 Maggie May 89 Very close to an A. Should have completed last HW on time.