VirtualMV/CSS/Inline, embedded, linked
|Cascading Style Sheets|
|Overview||Inline, embedded, linked | Language | class and id selector | Example | Help Desk ( Interactive )|
|Formatting||Span | Text | Devices|
|Layout||Block centering ||
|Techniques||Navigation | Gradient filled background | Other|
Styles can be saved in an external file (called the cascading style sheet, or css) and can be attached to multiple pages. This allows one style sheet to be applied to multiple pages in your site. Changing the style definition in the css will change the HTML elements of any attached pages.
By the end of this page you will be able to:
Examples of how styles can be applied
Inline (directly in the tag)
Inline (inside a <span> tag or <div> tag)
when only a part of a paragraph is to have a style applied
when lots of tags are to have the style applied use the <div> tag
Embedded: In a style sheet in the web page
(placed in the <head> area
Linked: In a style sheet (text document)linked to the web page
- one.css contains:
- this is linked in the head area of the web page
- And all h2 tags in the web page will be blue (#0000FF), and you can use class="center" to any tag to center the contents, e.g.
An important feature of a style sheet is it’s ability to cascade. That is any definitions will be applied successively.
So if a style for h1 occurs inline, embedded and linked. The linked will be applied first, then the embedded then the inline.
For example: if inline = blue, embedded = green and linked = red, h1 will display blue.
- Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:
- Browser default
- External Style Sheet
- Internal Style Sheet (inside the <head> tag)
- Inline Style (inside HTML element)
Products such as Expression Web, Dreamweaver, and Frontpage support the use of Style Sheets, and make it easy to work with the formatting options.
- CSS Course Tutorials and Reference Guide Online (2011). Retrieved from http://www.developphp.com/list_css.php