There are several ways to incorporate styles to elements in your HTML and apply them throughout the document. In this we will go over three ways to include styles, and three ways to apply the styles to different elements.
Linking External Stylesheets
You can link an external stylesheet to your HTML document through the <link> tag.
[code lang=”html”] [/code]
You would place this in the <head> tag of your document. External stylesheets are to consist of only defined classes and styles, no other tags included. Here would be a basic layout of style.css:
[code lang=”css”]
.class1 {
color:#fff;
font: 11px tahoma;
}
.class2 {
color: #000;
font: 11px arial;
}
#class3 {
color: #ccc;
font: 11px verdana;
}
[/code]
Embedding Styles
You can embed styles into the <head> of a HTML document without creating an external stylesheet. Here is an example of styles embedded:
[code lang=”html”]
[/code]
These styles would be defined just as in an external stylesheet and should not include any other tags inside the <style> tags.
Importing a Stylesheet
In CSS there is an import statement you can use to import a stylesheet to the document. This the CSS @import statement. Here is an example:
[code lang=”html”]
[/code]
You can still define other styles in these <style> tags under the @import statement just as in the previous example. This will basically include the defined path to a CSS stylesheet to the document just as using the external linking example.
Now we will go over how to apply these styles to elements.
Class Attribute
In your HTML document you can apply styles using the class attribute to almost any element. Styles that are applied with the class attribute are defined with a period before their name. In the previous examples of defining styles you may see a period (.) before the titles. Ex: .class1; .class2. Here is how to apply them:
[code lang=”html”]
[/code]
ID Attribute
Styles can also be defined and applied by the ID attribute. To define a style using this attribute you would add a number symbol (#) in front of the title. In the previous examples you see that “class3” is defined with one like #class3. This works the same way was the class attribute except now we apply it with the ID attribute in the element. Here is how to apply them:
[code lang=”html”]
[/code]
In-Line Styling
Without the use of any defined styles in a stylesheet or embedded styles you can apply styles to elements with in-line styling. This is done using the style attribute in an element. Here is how to apply them:
[code lang=”html”]
[/code]
Styles can also be defined within each other. So you can define a class under the <p> tag that can only be defined to paragraphs. Like so:
[code lang=”css”]
p .small {
font-size: 11px;
}
[/code]
Now we can apply the small class to paragraphs in the document like so:
[code lang=”html”]
Regular text.
Small text.
[/code]