1. Cascading Style Sheets

2. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a set of style definitions; styles that describe each HTML element. HTML used only as a formatting language, responsible for the basic layout of a page. CSS is used for design of pages.

3. Cascading Style Sheets A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} OR p { color:red; text-align:center; }

4. Cascading Style Sheets Body{background-color:#b0c4de;} My CSS web page! Hello world! This is example.

5. Cascading Style Sheets Grouping Selectors Style to many selectors. Just separate the selectors with a comma. h1,h2,h3,h4,h5,h6 { color: blue }

6. Cascading Style Sheets CSS Class CSS classes allow to apply a style to a given class of an element. Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows:.Class Name { property:value;... } For example,.na { color:#0000FF;background-color:green; } To apply this style to the HTML, using the following code: This is a sample using a Class selector.

7. Cascading Style Sheets CSS ID Allow to assign a unique identifier to an HTML element. ID is specified by including a number sign (#) before the selector name. The syntax for declaring an ID selector is as follows: #[ID Name] { property:value;... } For example, #popo { color:#FF00FF; } To apply this style to the HTML, using the following code: This is a sample using an ID selector.

8. Cascading Style Sheets Three Ways to Insert CSS External style sheet Internal style sheet Inline style

9. Cascading Style Sheets External Style Sheet Used when the style is applied to many pages. Each page must link to the style sheet using the tag. The tag goes inside the head section: An external style sheet can be written in any text editor. Style sheet should be saved with a.css extension.

10. Cascading Style Sheets Css file (check.css) hr {color:brown;margin-left:100;} p {margin-left:20px;color:red;font-size:20px;} body {background-color:grey;} Html file This is a sample using an ID selector.

11. Cascading Style Sheets Internal Style Sheet Used when a single document has a unique style. Internal styles included in the head section of an HTML page, by using the tag, like this: hr {color:brown;margin-left:100;} p {margin-left:20px;color:red;font-size:20px;} body {background-color:grey;} This is a sample using an ID selector.

12. Cascading Style Sheets Inline Styles Style sheets by mixing content with presentation. To use inline styles use the style attribute in the relevant tag. The example shows how to change the color and the left margin of a paragraph: This is a paragraph.

13. Cascading Style Sheets background-attachment:Specifies whether the background stays fixed on the screen. background-color:Specifies the color of the background. background-image:Specifies the image to use for the background. background-position:Specifies the position of the background. background-repeat: Specifies whether the background image should be repeated vertically or horizontally or both. CSS properties used for background effects:

14. Cascading Style Sheets Background-attachment The background-attachment property specifies whether a background stays fixed on the screen. Possible values are "fixed" (background stays in the same place when scrolling) and "scroll" (background moves with the rest of content when scrolling). body {background-attachment: fixed; background-image: url("2.jpg"); background-repeat: no-repeat; } asdf asdf

15. Cascading Style Sheets Background-color The background-color property specifies the color of the background.

16. Cascading Style Sheets Background-position The background-position property specifies the position of the background. Two percentage values: The first value indicates the horizontal percentage, and the second value indicates the vertical percentage. body { background-image: url("2.jpg"); background-repeat: no-repeat; background-position: 10% 20%; }

17. Cascading Style Sheets Background-repeat The background-repeat property specifies whether a background image repeats itself. The default is "repeat", which means repeating the image in both the x- and y- directions. You can also specify no-repeat. body { background-image: url("2.jpg"); background- repeat: no-repeat;}

18. Cascading Style Sheets Text Color This text is styled with some of the text formatting properties. The text-align, text-transform, and color, aligned, and the space between characters is specified. popo

19. Cascading Style Sheets Text Alignment popo Text Transformation popo text-transform:lowercase; text-transform:capitalize;

20. Cascading Style Sheets Space between characters <h1 style="background- color:red;color:blue;text-align:center;text- transform:capitalize; letter-spacing:6;">popo

21. Cascading Style Sheets Font Style font-style:normal; font-style:italic; Font Size font-size:40px; font-size:30px; The font-family font-family: verdana; font-family: arial; Font-weight specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. font-weight: 100; font-weight: 900;

22. Cascading Style Sheets 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

23. Cascading Style Sheets a:link {color:red;} /* unvisited link */ a:visited {color:green;} /* visited link */ a:hover {color:white;background-color:red;} /* mouse over link */ a:active {color:blue;} /* selected link */ This is a link

24. Cascading Style Sheets Text Decoration The text-decoration property is mostly used to remove underlines from links: Example a:link {color:red;text-decoration:none;} /* unvisited link */ a:visited {color:green;text-decoration:none;} /* visited link */ a:hover {color:white;background-color:red;text- decoration:underline;} /* mouse over link */ a:active {color:blue;text-decoration:none;} /* selected link */

25. Cascading Style Sheets List ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}

26. Cascading Style Sheets Table Borders border: 1px solid black; Table Text Alignment text-align:right; The vertical-align property sets the vertical alignment, like top, bottom, or middle: <td style="height:150px; vertical- align:center; ">popo

27. Cascading Style Sheets Table Padding To control the space between the border and content in a table, use the padding property on td and th elements: Example td{padding:15px;} padding-left:5px; padding-right:30px; padding-bottom:40px;

28. Cascading Style Sheets border-style The border-style property defines the format of the border. The table below shows the possible values

29. Cascading Style Sheets border-width The border-width property specifies the width of the border. The value can be "thin", "medium", "thick", or a numerical width.

30. Cascading Style Sheets Display and Visibility Hiding an Element - display:none or visibility:hidden Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". visibility:hidden; visibility:none;

31. Cascading Style Sheets

32. checking checking checking

33. Cascading Style Sheets popo popo pp

34. Cascading Style Sheets a:link {color:white;background-color:gray;text-decoration:none;} /* unvisited link */ a:visited {color:white;background-color:gray;text-decoration:none;} /* visited link */ a:hover {color:white;background-color:red;text-decoration:none;} /* mouse over link */ a:active {color:white;background-color:blue;text-decoration:none;} /* selected link */ popo popo pp home Family Education Photo Contact

35. Cascading Style Sheets

36. Cascading Style Sheets a:link {color:white;background-color:gray;text-decoration:none;} /* unvisited link */ a:visited {color:white;background-color:gray;text-decoration:none;} /* visited link */ a:hover {color:white;background-color:red;text-decoration:none;} /* mouse over link */ a:active {color:white;background-color:blue;text-decoration:none;} /* selected link */ home Family Education Photo Contact Family Education popo