INTRODUCTION TO CSS
Sample of the pdf document:
What is CSS?
- CSS, or Cascading Style Sheet, is a language that defines the presentation aspect of your HTML document.
- HTML is the content; CSS is the presentation of that document.
- The main purpose of CSS is the separation between content and presentation.
Adding CSS to HTML Documents
- Inline styles
ü Constructed where CSS codes are attached to the
element at hand.
ü It is the most specific of all because it
applies to exactly one element where the CSS codes are attached.
- Example:
<h2
style=”color: blue”>Hello World</h2>
<p style=”background-color: yellow; color: blue;”>Our
fresh pizzas and hearty pasta dishes are sure to please. And don’t forget about
our daily chalkboard specials!</p>
- Embedded styles
ü Sometimes called internal style, are
constructed by placing the CSS codes within the head element of your HTML document.
ü Embedded style sheet is contained within the style element.
ü This style sheet applies only to the page in
which they are placed.
- Example:
<html>
<head>
<title>Hello World</title>
<style
type=”text/css”>
body {
background-color: blue;
color: yellow;
}
p {
border: 4px solid red;
background-color: yellow;
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- External styles
ü A collection of CSS codes that is placed in a
document of its own with a .css file extension.
ü The CSS file is linked to the Web pages via the
<link /> element placed in the head section of your HTML document.
- Example:
ü The following are the CSS codes inside the file
styles.css
body
{
background-color: blue;
background-image: url(bg.gif);
color: white;
text-align: justify;
}
h2 {
color: red;
font-variant: small-caps;
text-align: center;
text-decoration: underline;
}
p {
color: white;
text-align: justify;
}
ü The following is the HTML code that establishes
a link to an external style sheet via a link tag in the document’s head section.
<html>
<head>
<title>Spaghetti: Our Menu</title>
<link
rel=”stylesheet” type=”text/css"
href=”styles.css” />
</head>
<body>
<h2>Good eats for hungry geeks</h2>
<p>Our fresh pizzas and hearty pasta dishes are sure to please.
And don’t
forget about our daily chalkboard specials!</p>
</body>
</html>.......
Click here for Download PDF / FREE
0 commentaires: