You are here: Reference > CSS
CSS (Cascading Style Sheets)
Formerly the display settings of HTML elements could only be specified with their attributes.
Nowadays, with the help of CSS, you can separate style settings from the source code.
CSS allows authors to set the display settings of elements in a clean and self-explanatory form, such as
font, color, border and background.
Dottoro provides you a complete CSS reference for both the standard and browser-specific language elements.
Every page contains a detailed description, syntax, browser support information, examples and more.
Wherever it is possible, you can also find cross-browser solutions for browser-specific language elements.
In HTML, style settings can be specified in three different ways:
- inline style settings
- embedded style sheets
- external style sheets
Inline style settings
Inline style settings can be specified with the style attribute for a HTML element.
The value of the style attribute must be a list of semicolon-separated declarations where a declaration is a style property name, followed by a colon and a value.
For further details, please see the page for CSS properties.
Inline style settings are useful for assigning unique styling rules for an element. If you want to use the same style settings for several elements, use embedded or external style sheets instead.
Inline style settings are useful for assigning unique styling rules for an element. If you want to use the same style settings for several elements, use embedded or external style sheets instead.
The following example uses the border-color style property to specify a background color for the body:
|
|
||||
<body style="background-color: #FF0000"> Page content. </body> |
||||
|
||||
|
Did you find this example helpful?
|
Embedded and external style sheets
Style sheets can be embedded with the style element, furthermore CSS files (external style sheets) can be included
by the link element or by the @import at-rule into HTML documents.
Two kinds of statements are allowed in style sheets. There may be zero or more at-rules at the beginning of a style sheet and zero or more rules after them.
A rule starts with selectors followed by a declaration block.
Selectors determine the matching HTML elements that the declaration block affects.
The declaration block must be enclosed in curly braces and inside there may be a list of semicolon-separated declarations where a declaration is a style property name, followed by a colon and a value.
For further details, please see the pages for CSS properties and selectors and pseudos.
The following example uses an embedded style sheet to specify a background color for the body:
|
|
||||
<head> <style> body { background-color: #FF0000; } </style> </head> <body> Page content. </body> |
||||
|
||||
|
Did you find this example helpful?
|
The following example uses an external style sheet to specify a background color for the body:
|
|
|||||
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> Page content. </body> |
|||||
|
|||||
|
Did you find this example helpful?
|
The following example uses an embedded style sheet to specify a text color for the first two division elements:
|
|
||||
<head> <style> .redDiv { color: #FF0000; } </style> </head> <body> <div class="redDiv">First division.</div> <div class="redDiv">Second division.</div> <div>Third division.</div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Inline style settings have higher precedence than embedded or external style sheets, the values of inline style properties always override the values declared in embedded or external style sheets.
Note: style settings can be modified dynamically with JavaScript. You can find a link to the corresponding JavaScript property on every page for a CSS property.
For further details, please see the page for style handling in JavaScript.
Contents:
External links:
User Contributed Comments