HTML and CSS Reference
In-Depth Information
Chapter 1
Using CSS
There are three ways to insert CSS into an HTML document: by using an internal style
sheet, inline styles, or an external style sheet. An internal style sheet applies to a single
page, an inline style to a single element, and an external style sheet to potentially an
entire web site.
Internal style sheet
An internal style sheet is useful when a single document needs to have its own unique
styling. The style sheet is then embedded within the
<head>
section of the web document
using the
<style>
element. This element is a container for style sheet rules and should
have its
type
attribute set to
"text/css"
.
<style type="text/css">
p { color: red; }
</style>
Inline style
Styling can be assigned to an individual element by using the
style
attribute to set an
inline style. It is a generic attribute that can be included in any HTML start tag, and its
value is the CSS declarations that will be applied to the element, separated by semicolons.
There is no need to specify a selector because the declarations implicitly belong to the
current element.
<p style="color: green">Green text</p>
This approach should be used sparingly because it mixes style with content and
therefore makes future changes more cumbersome. It can be useful as a quick way to test
styles before they are moved out to an external style sheet.
