1. Company LOGO In the Name of Allah,The Most Gracious, The Most Merciful King Khalid University College of Computer and Information System Web pages Development & Programming Alaa Alwabel - 2011 Chapter 4: Cascading Style Sheets (CSS) 1Ala'a Alwabel-2011

2. What is CSS? 2Ala'a Alwabel-2011 Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents.

3. Specifying Style Rule  General Form of Rule: Selector { property : value} Or Selector { property1 : value1; property2 : value2; ….. property N : value N}  Example: Ala'a Alwabel-20113

4. Example : Happiness.html (no style sheet) Ala'a Alwabel-20114 The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. Some people strive to seek material happiness in this world away from religion, thinking that this is the true happiness. But this kind of happiness will be succeeded by pain and sorrow at the Day of Judgment, and its people will know that their striving led them only to misery and not happiness. Happiness.html

5. Happiness.html (Result)- no style sheet Ala'a Alwabel-20115

6. Example : Happiness.html (with style sheet) Ala'a Alwabel-20116 h1 { text-align:center; color:red;} p{ background:green; } The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. Happiness.html Style sheet

7. Happiness.html (Result)- with style sheet Ala'a Alwabel-20117

8. Three Ways to Insert CSS Internal style sheet External style sheet Inline style Ala'a Alwabel-20118

9. External Style Sheet  An external style sheet is an ideal when the style is applied to many pages.  Each page must link to the style sheet using the tag inside the head section. Ala'a Alwabel-20119

10. Example of External Style Sheet Ala'a Alwabel-201110 The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. /* CSS Document */ body { background:url(images/a3.jpg) } hr { color: green} h1 { text-align:center; color:red;} p{background:white; text-decoration:underline; text-align:center } Style-happy.css Happiness.html

11. Example of External Style Sheet Ala'a Alwabel-201111

12. Internal Style Sheet  An internal style sheet should be used when a single document has a unique style.  Define internal styles in the head section of an HTML page, by using the tag. Ala'a Alwabel-201112

13. Internal Style Sheet Ala'a Alwabel-201113 h1 { text-align:center; color:red;} p{ background:green; } The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. Happiness.html Internal Style sheet

14. Inline style Sheet Ala'a Alwabel-201114 The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. Happiness.html Inline Style sheet

15. Inline Styles Sheet Ala'a Alwabel-201115

16. CSS Comments  Comments are used to explain your code,  Comments are ignored by browsers. Ala'a Alwabel-201116 /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

17. 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 "#". Ala'a Alwabel-201117

18. The id Selector Ala'a Alwabel-201118 #web { text-align:center; color:red;} The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. Happiness.html Id Selector

19. The id Selector Ala'a Alwabel-201119

20. The class Selector  The class selector is used to specify a style for a group of elements.  The class selector uses the HTML class attribute, and is defined with a "." Ala'a Alwabel-201120

21. Class Selector example Ala'a Alwabel-201121. web { text-align:center; color:red;} p. Web { color: green; } The Way To Achieve Happiness The Way To Achieve Happiness It is the nature of every person to seek happiness. Happiness.html Class Selector

22. Class Selector example Ala'a Alwabel-201122

23. CSS Properties Ala'a Alwabel-201123 Css Properties BackgroundText ValueProperty Red, green, yellowbackground-color url('img_tree.png')background-image no-repeat or repeat background-repeat Left right top bottom background-position ValueProperty Red green yellowcolor Center right left justify Text-align Underline overline line-through blink text-decoration 20pxfont-size

24. Css Properties Ala'a Alwabel-201124 Title for Page body { background-image:url(images/a12.jpg); background-position:center; background-repeat:no-repeat; } h1{background-color: blue;} p { text-align:center; text-decoration:underline; color:pink; font-size:36px;} Happiness Welcome to my Web page. I am so happy you are here.

25. CSS Properties Ala'a Alwabel-201125

26. Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background, etc.).  The four links states are:  a:link - a normal, unvisited link  a:visited - a link the user has visited  a:hover - a link when the user mouses over it  a:active - a link the moment it is clicked Ala'a Alwabel-201126

27. Styling Links Ala'a Alwabel-201127 Title for Page a:link {color : red; text-decoration : none; font-size : larger} a:visited {color : black} a:active {color : orange} a:hover {color : blue} Welcome to my Web page. I am so happy you are here. Be sure to visit CNN for late-breaking news.

28. Styling Links Ala'a Alwabel-201128