HTML and CSS Reference
In-Depth Information
You also can add styles without style sheets by using inline styles. An inline style is like a
“Break Glass in Case of Emergency!” technique. A good-looking page has a plan developed in
a style sheet. However, sometimes, you run into a case where you need some feature added,
and instead of changing the style sheet, you just pop it in with a tag.
Embedded style sheets
An embedded style sheet is simply adding the style sheet directly into the HTML5 script. In
the <head> of the program, add the style sheet using the <style> container. Place the
element you want to style in the style container, and then add values to the property to be
styled. Figure 3-7 shows the general format.
Type to define as style sheet
Open style tag
Name of element (tag)
Note semicolons
Note curly braces
53
Close style tag
Value depends on property type
Property depends on element type
Figure 3-7: An embedded style sheet.
Each element has a unique set of properties, and each property has values that can be assigned
to it. When you change the value of the property, that value appears in the text inside the
element's container. So, if you change the text color to red, all the text inside the element's
container will be red. h e following script ( CSS3fonts.html in this chapter's folder at
www.wiley.com/go/smashinghtml5 ) provides an example.
<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< style type = ”text/css” >
body {
background - color : #fbf7e4;
font - family : Verdana , Geneva , sans - serif ;
margin - left : 20px ;
color : #8e001c;
}
h1 {
background - color : #8E001C;
color : #e7e8d1;
 
Search WWH ::




Custom Search