Introduction
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language.
CSS is designed primarily to enable the separation of document content from document presentation.
CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices.
The author of a document typically links that document to a CSS stylesheet, readers can use a different stylesheet, perhaps one on their own computer, to override the one the author has specified.
How to Insert a Style Sheet
External Style Sheet
Code:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link rel="alternate stylesheet" href="1.css" type="text/css" title="1" media="screen">
Internal Style Sheet
Code:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Inline Styles
Code:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Media Types
One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
Specify the target medium from a style sheet with the @media or @import at-rules.
@import url("fancyfonts.css") screen;
@media print {
/* style sheet for print goes here */
}
CSS selectors
Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.
- Rules
- DOM - Document Object Model
- Selectors
Rules
- What is a rule or "rule set"?
- Grouping declarations
- Grouping selectors
- Shorthand properties
- CSS Comments
What is a rule or "rule set"?
A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.
Rule structure
The CSS syntax is made up of three parts: a selector, a property and a value:
Code:
selector { property: value }
body { color: black }
p { font-family:"sans serif" }
p { text-align: center; color: red }
p
{
text-align: center;
color: black;
font-family: arial
}
|
