RSS
Atom
FeedburnerThere are three ways to apply a style to an HTML element: Inline, Embedded, and External. Below, I demonstrate each of these methods by applying a single style to the same element three times. The necessary code is shown in bold.
Inline
The inline method is most suitable for setting the style on a single element. This is because the inline method requires us to repeat the entire specification for each element on which we want to apply it. Also, if we want to change the style, we must change it on each element. If you are setting the style for multiples elements, you should consider using either the embedded or external style sheet method.
To use the inline method, simply add style=”<< style specification >>” to the element that you want to style, where << style specification >> is the CSS style that you want to apply. For example, the element above would be written as:
<div style=”width:420px; height:120px; padding:20px; margin:30px; background-color:#ffddcc; color:#885522;“>(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.</div>
Embedded
The embedded style sheet method is most suitable for setting the style for a many elements in the same document. With this method, we define a style specification as a class inside the head element and give it a name. Then we can apply the style repeatedly in the document by using the defined class inside each of the desired elements.
To use an embedded style sheet, define all styles in a style tag inside the head, as shown below. In this case, we have defined a class called “prog.” The style associate with this class can be used by adding class=”prov” to a tag, as shown in the example code below. This class can be applied to any number of elements in the document, and the usage of the class allows us to subsequently change the style for all of the elements just by simply changing the class style definition.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>CSS Applying a Style</title>
<style>
.prov {
width:420px;
height:120px;
padding:20px;
margin:30px;
background-color:#ffddcc;
color:#885522;
}
</style>
</head><body>
<div class=”prov”>(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.</div>
</body>
</html>
External
The external style sheet is most suitable for setting a style that is used over multiple documents. Like the embedded style sheet, the external style sheet allows us to change all of the defined styles by making a single change to the style definition. However, the external style sheet uses a separate file to define the style so that it can be used in several files at once.
To use an external style sheet, create a file with a .css extension and put whatever style definitions you would like inside it. Below, I show an example with a file named “MyStyles.css” with the external style specification in it. In the HTML document, we need to add the line <link rel=”stylesheet” type=”text/css” href=”MyStyles.css” /> inside the head tag. This link tag can be used inside as many HTML documents as you would like. Then we only need to add class=”prov” to any element that we want to style, just as we did with the embedded style sheet. Note that in this example, we have the HTML document and the .css file in the same directory. However, if we want to put the style sheet file (the .css file) in a separate directory, we need to add the path to the href.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>CSS Applying a Style</title>
<link rel=”stylesheet” type=”text/css” href=”MyStyles.css” />
</head><body>
<div class=”prov”>(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.</div>
</body>
</html>
MyStyles.css
.prov {
width:420px;
height:120px;
padding:20px;
margin:30px;
background-color:#ffddcc;
color:#885522;
}
Tags: apply, css, embedded, external file, html, inline, specification, style, web, website
Michael HallBy: Michael Hall