1 CASCADING STYLE SHEETS (CSS) BY: RIHAM ALSMARI, PNU Lab 4
Cascading Style Sheets (CSS) 2 Three ways to apply a style to an HTML or XHTML document: Inline Styles Embedded Style Sheet External Style Sheet
1-Inline Styles 3 Inline styles are easy to use and interpret because they are applied directly to the elements they affect. <element style= style1: value1; style2: value2; style3: value3; > Example: < h1 style = text-align: center; color:red > Welcome </h1> Each CSS property is followed by a colon then the value of the attribute. Properties are separated by semicolons. The STYLE attribute allows the specification of a style property.
1-Inline Styles 4 Apply directly to the elements they affect.
2-Embedded Style Sheet (Document level style) 5 In the HEAD section of the document styles may be applied to the whole document by using the STYLE element (not attribute) The style sheet begins with <STYLE TYPE = text/css > The TYPE attribute specifies the MIME type - standard for specifying the format of content - text/html, image/gif, text/javascript
2-Embedded Style Sheet (Document level style) 6 <style type= text/css > </style> rule_list Each style rule in a rule list has two parts: a selector, which indicates the tag or tags affected by the rule, and a list of property/ value pairs. selector {style1: value1; style2: value2; style3:value3;..}
2-Embedded Style Sheet (Document level style) 7
3-External Style Sheet 8 Apply to the all Web site pages. An external style sheet is a text file that contains style declarations and it is extension.css
3-External Style Sheet 9 To apply it: (4 steps) 1- Create a new file with the.css extension. 2- Declare like the following: h1 {text-align: center; color: red} 3- You can add comments /* comments */ 4- link element to link a Web page to an external style sheet and placed it in the head section. <link href= url rel= stylesheet type= text/css /> LINK a specifies a relationship between the current document and another using the REL attribute
10
11 Selector Forms 1.Simple Selector Forms 2.Class Selectors 3.Generic Selectors 4. ID Selectors 5. Universal Selectors
1. Simple Selector Forms 12 Example 1: <style type= text/css > h1 {text-align: center; color:red} </style> Example 2: <style type= text/css > h1 {text-align: center; color:red} </style> Example 3: <style type= text/css > h2,h3 {text-align: right; color:blue} </style>
13 1. Simple Selector Forms
14 <html> <head> <title>cs 543</title> <style type="text/css"> h1 {text-align:center;color:red} ul ul {color:blue} </style> </head> <body> <h1> welcome</h1> <ul> <li>main Stick</li> <ul> <li>weight: 7 oz.</li> <li>length: 24 inches</li> <li>tape: Dura-Coat finish with laser-style color choices.</li></ul> <li>handle Sticks <q>one pair /</q></li> <ul> <li>weight: 2 oz</li> <li>length: 18 inches</li> <li>tape: Soft ivory tape with rubber core.</li></ul> </ul> </body> </html>
15 The Output :
2.Class Selectors 16 The CLASS attribute can be used to create custom styles for a set of items on a page Class Syntax: In a style element or sheet: P.myclass { color:blue;} In a body element or html page: <P CLASS= myclass >Text</P>
17 2.Class Selectors
18 3.Generic Selectors
4. ID Selectors 19 1- Use the declaration #id {style rule} Example : #subtitle {color:red} 2-Apply to that specific element <h2 id = subtitle >Welcome </h2>
20 4. ID Selectors
21 5. Universal Selectors
Defining Text and Background Colors 22 Background color definition: background-color: color Text color definition: color: color where color is either the color value or the color name
Working with Fonts and Text Styles 23 In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial") Arial, the value sans-serif is a generic font family - used if Arial and helvetica is not found on the system.
Working with Fonts and Text Styles 24 font-size : specified in pt point also relative : xx-small, x-small, small, medium, large, x-large and xx-large. Different browsers can use different values for the relative font sizes. For example : small might mean 10 points on one browser and 8 points on another.
25 Working with Fonts and Text Styles
Working with Fonts and Text Styles 26 The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
27
Working with Fonts and Text Styles 28 Font-weight : The font-weight property sets how thick or thin characters in text should be displayed. The default value is normal. The values is: Normal. Lighter. Bold. Bolder. font-weight : value;
29 Working with Fonts and Text Styles
Working with Fonts and Text Styles 30 Text-decoration: text-decoration: type Where type is underline, overline, line-through, or none. p { text-decoration:underline}
31 Working with Fonts and Text Styles
Setting the Image Size 32 By default, browsers display an image at its saved size You can specify a different size by adding the HTML attributes width="value" height="value"
Formatting Backgrounds 33 The syntax for inserting a background image is: background-image: url(url) URL is the location and filename of the graphic file you want to use for the background of the Web page
34
Background Image Options 35 By default, background images are tiled both horizontally and vertically until the entire background of the element is filled up You can specify the direction of the tiling using the style: background-repeat: type
36 Background Image Options
37 Background Image Options
38 Background Image Options
39 The Background Style You can combine the various background styles into the following single style: Possible Values scroll (default) - the background image will scroll with the rest of the content. fixed - the background image will remain stationary as the rest of the content is scrolled. Example body {background-image: url(wallpaper.jpg); background-repeat: no-repeat; background-attachment: fixed}
Background Position 40 The background-position property sets the starting position of a background image. Property Values left top left center left bottom right top right center right bottom center top center center center bottom If you only specify one keyword, the other value will be "center"
Background Position 41 body {background-image: url(wallpaper.jpg); background-repeat: repeat-y; background-attachment: fixed; background-position:right }
42 Background Position
43 THE END Lab 4