VirtualMV/HTML/Basic/CSS/Inline, embedded, linked
| Internet & Web Development ( Introduction | Advanced ) | ||
|---|---|---|
| Overview | Personal Learning Environment | What is HTML? | Web authoring | Resources | Help Desk |  |
| Creating a basic web site | HTML editor | Basic tags | Head tag | Linking pages | Formating and lines | Lists | Tables | Special characters | Page icon | |
| Multimedia | graphics and images | Connected media | Audio | Video | Image map | |
| Cascading style sheets | Inline, embedded, linked | Language | Example | |
| Web page layout | Tables | CSS | iFrame | Frames | Other | Responsive | |
| Framework | Tours of Hawke's Bay | |
| Forms | Example | mailto | Add Google | |
| Misc | ||
Overview
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)
<p style="color: #00FF00">Paragraph one</p>
Inline (inside a <span> tag or <div> tag)
when only a part of a paragraph is to have a style applied
<p>Hello <span style="color:red">world</span>, Michael here</p>
when lots of tags are to have the style applied use the <div> tag
<div style="color:red"> <p>This is red</p> <p>This is also red</p> </div>
Embedded: In a style sheet in the web page
(placed in the <head> area
<style type="text/css"> h1 { color: #FF0000; } </style>
Linked: In a style sheet (text document)linked to the web page
- one.css contains:
h2 {color: #0000FF;}
.center {text-align: center}- this is linked in the head area of the web page
<link rel="stylesheet" type="text/css" href="one.css" />- 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.
<h1 class="center">This heading will be center-aligned</h1> <p class="center">This paragraph will also be center-aligned.</p>
Why cascading?
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.
Resources
References
- ↑ CSS Course Tutorials and Reference Guide Online (2011). Retrieved from http://www.developphp.com/list_css.php
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/HTML/Basic/CSS/Inline, embedded, linked. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/CSS/Inline,_embedded,_linked (zotero)
|
