Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.

Part 2

Introduction to CSS

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:<p class=“p1”> This paragraph will be in Arial. </p><p class=“p2”> This paragraph will be in Times. </p>

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.

Inline style<html>

<head>

</head>

<body>

<p style = "color:blue;"> ISC340</p>

<p style ="color:red;"> Web </p>

</body>

</html>

<html>

<head>

<style type="text/css">

p.p1{color:blue}

p.p2{color:red}

</style>

</head>

<body>

<p class= “p1"> ISC340</p>

<p class= “p2"> Web </p>

</body>

</html>

Embedded Style

External Style

<html>

<head><link rel="stylesheet"

type="text/css" href=“ISC340.css" />

</head>

<body>

<p class = “p1"> ISC 340</p>

<p class= “p2"> Web </p>

</body>

</html>

ISC340.htm ISC340.css

p.p1 {color:blue}p.p2 {color:red}

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: <h1 class="center"> center-aligned heading </h1><p class="center"> center-aligned paragraph </p>

All HTML elements with class="center" will be center-aligned: .center {text-align: center}

Inline style<html>

<head>

</head>

<body>

<h1 style = "color:blue;"> ISC 340</h1>

<p style = "color:blue;"> Web </p>

</body>

</html>

<html>

<head>


.X{color:blue;}

</style>

</head>

<body>

<h1 class = "X"> ISC 340</h1>

<p class= "X"> Web </p>

</body>

</html>

Embedded Style

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.

Descendant selector exampleWhat is the output for the following cases?

<html><head>

<style type="text/css"> h1 {color:red}

i {color:blue}</style>

</head>

<body><h1>header one</h1>

<h1><i>header</i> two</h1></body></html>

<html><head>

<style type="text/css"> h1 {color:red} i {color:blue}

h1 i {color:blue}</style>

</head>

<body><h1>header one</h1>

<h1><i>header</i> two</h1>

</body></html>

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.

Pseudoclass example

<html>

<head><style type="text/css">

a:hover {color:red}</style>

</head>

<body> <a href=“http://www.kuniv.edu”> Kuwait University </a>

</body>

</html>

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.

id selector

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 <p> 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:

<p id=“para1”> This is paragraph 1 </p>

<p id=“para2”> This is paragraph 2 </p>

Inline style<html>

<head>

</head>

<body>

<p style = "color:blue;"> ISC 340</p>

<p style ="color:red;"> Web </p>

</body>

</html>

<html>


p#p1{color:blue} p#p2{color:red}

</style></head>

<body><p id= “p1"> ISC 340</p><p id= “p2"> Web </p>

</body>

</html>

Embedded Style

CSS Background

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

Background-color

<html>

<head><style type="text/css"> body{background-color: green;}

// blue, red, rgb(0,255,0) , #00ff00 </style>

</head>

<body>

<h1>My CSS web page!</h1>

</body>

</html>

background-color attribute specifies the background color of the element

Background-color

<html>

<head>


h1{ background-color:lime}

h2 {background-color:orange}

</style>

</head>

<body>

<h1>ISC340</h1>

<h2>Web Programming</h2>

</body>

</html>

Background-image

<html>

<head>


body {background-image:url('smiley.png')}

</style>

</head>

<body>

<h1>ISC340</h1>

</body>

</html>

Property background-image specifies the URL of the image Use the format url(fileLocation)

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

Background-repeat<html>

<head>


body

{

background-image:url('smiley.png');

background-repeat:repeat-x; // repeat-y, no-repeat

}

</style>

</head>

<body>

<h1>ISC340</h1>

</body>

</html>

Background-position

<html>

<head>


body

{

background-image:url('smiley.png');

background-repeat:no-repeat;

background-position:right top;

}

</style>

</head>

<body>

<h1>ISC340</h1>

</body>

</html>

Property background-position places the image on the page

Use the values top, bottom, center, left and right individually or in combination

Background Together - example<html>


body{background: green url('smiley.png') repeat-x center;} //color, image, repeat, position

</style>

</head>

<body>

<h1>My CSS web page!</h1>

</body>

</html>

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 }

</style></head>

Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.

Documents