1. Lecture # 33 Cascade Style Sheets (CSS)

2. Cascade Style Sheets (CSS): Preserving a consistent “look and feel” of a website across multiple pages

3. Content vs Style Before version 4.0 of HTML, style information was intermixed with content. Version 4.0 and above separate HTML into –Content – what is in an html page Described in the “HTML” presentation –Style – how does that information look –Some tags were deprecated:,, –Additional capabilities were added Style is specified by “css” or cascade style sheets For a tutorial on CSS see * http://www.w3schools.com/css/demo_default.htm * http://www.w3schools.com/css/demo_default.htm http://pagetutor.com/css_tutor/index.html For free access to many books on CSS go Here and search for “css”Here

4. CSS Properties Properties: what “look and feel” features do you want to define? –Background properties – what does the background look like –Border and outline properties – what do borders look like –Dimension properties – how tall and wide are html elements –Font properties – what is the font of the text –List properties – what do lists look like –Margin properties – what do margins look like –Padding properties – what does the padding around elements look like –Positioning properties – where does an element appear on the page –Table properties – what does a table look like –Text properties – everything about the text except the font –Others: Generated content properties, print properties, pseudo- classes/elements properties

5. CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external.css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

6. Understanding Style Rules A Style Rule is composed of two parts: a selector and a declaration. TH {color: red;}. The Selector indicates the element to which the rule is applied. The Declaration determines the property values of a selector. Selector Declaration

7. Understanding Style Rules The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). The Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;). P {color: red;} Property Value

8. Declaration Syntax CSS declarations end with ; Groups are surrounded by { … }: p {color:red;text-align:center;} To improve readability: p { color:red; text-align:center; } CSS Comments begin with "/*", and end with "*/": /*This is a comment*/

9. In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; } The id and class Selectors

10. The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center- aligned: Example Below, all p elements with class="center" will be center-aligned: p.center {text-align:center;}

11. Three Ways to Insert CSS Internal style sheet - part of the current html file Inline style - imbedded in the html External style sheet - stored in a separate.css file

12. Use when a single document has a unique style: hr {color:red;} p {margin-left:20px;} body {background- image:url("images/back40.gif");} Internal Style Sheet

13. Can be used for local override of styles set for the same Selector externally: For example, an external style sheet has these properties for the h3 selector: h3 {color:red; text-align:left; font-size:8pt;} And an internal style sheet has these properties for the h3 selector: h3 {text-align:right; font-size:20pt;} The properties for h3 will be: color:red; text-align:right;Color is inherited from external style sheet font-size:20pt;Text-alignment, font-size from internal style sheet Inline Styles

14. Demos of CSS Internal & Inline Styles Go to http://www.w3schools.com/css/demo_default.htm

15. Ideal for applying style to many pages. Change the look of an entire Web site by changing the.css file. Each page must link to the style sheet using the tag: Example of a.css style sheet file: hr {color:red;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} External Style Sheet

16. Demos of CSS External Style Sheets

17. The font family of a text is set with the font- family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. p{font-family:"Times New Roman", Times, serif;} Font Family

18. Color Values Several properties take a color value. There are several ways to specify colors. Here are 2 (For more information go here.)here Use standard names: body {background-color:yellow} –Makes entire web page background yellow body {background-color:#FFFF00}

19. Measurement Values Width, height, and length properties require integer values representing “amounts”. Specify using units such as pixels, points, percentages, ems, inches, millimeters, and centimeters. For more information see http://www.w3schools.com/css/css_units.asp.http://www.w3schools.com/css/css_units.asp Examples: img {width: 100px; height:100px} Specifies width and height in terms of pixels img {width: 50%; height:50%} Specifies width and height as a percent of its enclosing block

20. tags tag: a paired tag used primarily to group elements so they can be formatted using CSS style properties

21. Layout Model All HTML elements are considered boxes In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. The box model illustrates how the CSS properties: margin, border, and padding, affects the width and height of an element.

22. Layout Model Continued When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.

23. Layout Model Continued If an element had the following properties: width:250px; padding:10px; border:5px solid gray; margin:10px; It would be 300px wide

24. What does Cascade Mean? Properties of one style sheet or style definition override another Internal overrides External Inline overrides Internal

25. Some Useful Properties Don’t expect you to memorize them. Do expect you to be able to look them up –HereHere –Or, for books on CSS go Here; search for “css”Here –Google is your friend We will introduce several CSS properties Inherited properties –Inherited from parent or containing element

26. Background Properties PropertyDescription background Sets background properties in one declaration background-attachment Sets whether a background image is fixed or scrolls with the rest of the page background-color Sets the background color of an element background-image Sets the background image for an element background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated

27. Margin Properties PropertyDescription margin Sets all the margin properties in one declaration 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

28. Border and Outline Properties PropertyDescription border Sets all the border properties in one declaration border-bottom Sets all the bottom border properties in one declaration border-bottom-color Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-right Sets all the right border properties in one declaration 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 border-style Sets the style of the four borders border-top Sets all the top border properties in one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders outline Sets all the outline properties in one declaration outline-color Sets the color of an outline outline-style Sets the style of an outline outline-width Sets the width of an outline

29. Padding Properties PropertyDescription padding Sets all the padding properties in one declaration 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

30. Dimension Properties PropertyDescription height Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element

31. Font Properties PropertyDescription fontSets all the font properties in one declaration font-familySpecifies the font family for text font-sizeSpecifies the font size of text font-styleSpecifies the font style for text font-variantSpecifies whether or not a text should be displayed in a small-caps font font-weightSpecifies the weight of a font

32. Text Properties PropertyDescription color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies indentation of first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text vertical-align Sets the vertical alignment of an element white-space Specifies handling of white-space inside element word-spacing Increases/decreases space between words in a text

33. List Properties PropertyDescription list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies where to place the list-item marker list-style-type Specifies the type of list-item marker

34. Positioning Properties PropertyDescription bottom Sets the bottom margin edge for a positioned box clear Specifies sides where other float elements not allowed clip Clips an absolutely positioned element cursor Specifies the type of cursor to be displayed display Specifies the type of box an element should generate float Specifies whether or not a box should float left Sets the left margin edge for a positioned box overflowSpecifies what happens if content overflows box position Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box visibility Specifies whether or not an element is visible z-index Sets the stack order of an element

35. Table Properties PropertyDescription border-collapse Specifies whether or not table borders should be collapsed border-spacing Specifies distance between borders of adjacent cells caption-side Specifies the placement of a table caption empty-cells Specifies whether or not to display borders and background on empty cells in a table table-layout Sets the layout algorithm to be used for a table

36. Examples Many more examples can be found at http://www.w3schools.com/css/