Css Style Types
2. Global CSS Styles:
It is created in the head part, between the style tags.
Style templates created this way apply to the entire page.
New features are added to an existing tag with general style templates.
CSS Syntax
In the example below, the i and body tags are formatted with css. Wherever the i tag is used on this page, it will be bold, red, 24pt, Century Gothic.
<style type="text/css">
i {
font-weight:bold;
color:red;
font-size:24pt;
font-family:Century Gothic;
font-style:normal;
}
body {
background-color:#fde333;
background-image:url(images/bg/zzz.jpg);
background-repeat:repeat-x;
background-position:left 20px;
}
</style>
If more than one tag will be given the same features, it can be used as follows:
In the example, the h1, h2, and h3 tags are formatted the same.
<style type="text/css">
h1, h2, h3 {
font-weight:bold;
color:red;
font-size:24pt;
font-family:Century Gothic;
font-style:normal;
}
</style>
Formatting can be applied to the same tag in more than one place:
<style type="text/css">
h1, h2, h3 {
color:blue;
font-family:Century Gothic;
}
h1 {
font-size:16pt;
}
h2 {
font-size:14pt;
}
h3 {
font-size:12pt;
}
</style>
In the example above, first the colors and fonts of the h1, h2 and h3 tags were determined, and then the sizes of these tags were specified separately.
how to use global style templates, page level css examples, css tutorials, apply css to tags, apply multiple styles to same tag, apply same styles to multiple tags
EXERCISES
|
Applying both a global and a local style to a tag
|
Try It
|
Click Try It button and see the codes.
|
Tutorials - Global CSS Styles
|
Try It
|
h1, h2, h3{
color:blue;
font-family:Century Gothic;}
h1{font-size:16pt;}
h2{font-size:14pt;}
h3{font-size:12pt;}
i{
font-weight:bold;
color:red;
font-family:Century Gothic;
font-style:normal;
}
Read 874 times.