Part 2 Introduction to CSS
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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>
<style type="text/css">
.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>
<head><style type="text/css">
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>
<style type="text/css">
h1{ background-color:lime}
h2 {background-color:orange}
</style>
</head>
<body>
<h1>ISC340</h1>
<h2>Web Programming</h2>
</body>
</html>
Background-image
<html>
<head>
<style type="text/css">
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>
<style type="text/css">
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>
<style type="text/css">
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>
<head><style type="text/css">
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
<head><style type="text/css">
body {
background-image:url('smiley.gif'); background-repeat:no-repeat;
background-position:right top;
background-attachment: fixed }
</style></head>
Related Documents
