1. Part 2 Introduction to CSS

2. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You have to use the class attribute in your HTML document: This paragraph will be in Arial. This paragraph will be in Times. With the class selector you can define different styles for the same type of HTML element. p.p1 {font-family: Arial } p.p2 {font-family: Times} Do NOT start a class name with a number! It will not work in Mozilla/Firefox. For example – 22p1 is not a valid class name in Firefox.

3. Inline style ISC340 Web p.p1{color:blue} p.p2{color:red} ISC340 Web Embedded Style

4. External Style <link rel="stylesheet" type="text/css" href=“ISC340.css" /> ISC 340 Web ISC340.htmISC340.css p.p1 {color:blue} p.p2 {color:red}

5. CSS Syntax – class selector 2 You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector: center-aligned heading center-aligned paragraph All HTML elements with class="center" will be center-aligned:.center {text-align: center}

6. Inline style ISC 340 Web.X{color:blue;} ISC 340 Web Embedded Style

7. CSS Syntax – Descendant selectors To apply rules to only a certain type of element that is a child of another type, separate the element names with spaces. A descendant selector is made up of two or more selectors separated by white space. An example for child selector: h1 i {color:blue} Here, all i elements that are children of h1 elements are colored blue.

8. Descendant selector example What is the output for the following cases? h1 {color:red} i {color:blue} header one header two h1 {color:red} i {color:blue} h1 i {color:blue} header one header two

9. CSS syntax - Pseudoclasses Pseudoclasses give the author access to content not specifically declared in the document. Pseudoclasses can be dynamic. An element may acquire or lose a pseudoclass as the user interacts with the document. hover pseudoclass is activated when the user moves the mouse cursor over an element.

10. Pseudoclass example a:hover {color:red} Kuwait University Sets the properties for the hover pseudoclass for the a element, which is activated when the user moves the cursor over an anchor element Pseudoclasses are separated by a colon (with no surrounding spaces) from the name of the element to which they are applied. NOTE: Including a space before or after the colon separating a pseudoclass from the name of the element to which it is applied is an error that prevents the pseudoclass from being applied properly.

11. id selector

12. CSS Syntax – id selector 1 The id selector is different from the class selector. class selector may apply to SEVERAL elements on a page. id selector always applies to only ONE element. An ID attribute must be unique within the document. The style rule below will match a element that has the id value "para1": p#para1 { text-align: center; color: red } p#para2 { color: blue} The rule above will match this p element: This is paragraph 1 This is paragraph 2

13. Inline style ISC 340 Web p#p1{color:blue} p#p2{color:red} ISC 340 Web Embedded Style

14. CSS Background

15. Background CSS can control the background effects of certain elements by adding: Colors Images CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position

16. Background-color body{background-color: green;} // blue, red, rgb(0,255,0), #00ff00 My CSS web page! background-color attribute specifies the background color of the element

17. Background-color h1{ background-color:lime} h2 {background-color:orange} ISC340 Web Programming

18. Background-image body {background-image:url('smiley.png')} ISC340 Property background-image specifies the URL of the image Use the format url( fileLocation )

19. Background-repeat background-repeat property controls the tiling of the background image Setting the tiling to no-repeat displays one copy of the background image on screen Setting to repeat (the default) tiles the image vertically and horizontally Setting to repeat-x tiles the image only horizontally Setting to repeat-y tile the image only vertically

20. Background-repeat body { background-image:url('smiley.png'); background-repeat:repeat-x; // repeat-y, no-repeat } ISC340

21. Background-position body { background-image:url('smiley.png'); background-repeat:no-repeat; background-position:right top; } ISC340 Property background-position places the image on the page Use the values top, bottom, center, left and right individually or in combination

22. Background Together - example body{background: green url('smiley.png') repeat-x center;} //color, image, repeat, position My CSS web page!

23. Background-attachment Fixes the image in the position specified by background- position. Scrolling the browser window will not move the image from its set position. The default value, scroll, moves the image as the user scrolls the window body { background- image:url('smiley.gif'); background-repeat:no-repeat; background-position:right top; background-attachment: fixed }