We use styles to change the properties of HTML elements. The properties available to be changed depends upon the type of element.
We apply the style attribute to an HTML element and then set the value of the style to indicate what properties of the element we wish to control. For example, if we wanted to set the text alignment property of a paragraph tag we would do it like this:
<p style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis. Ut mauris nibh, semper at, gravida quis, accumsan consequat, lacus.</p>
The example shows the text-align property being set to a value of right.
Applying a style in this manner is referred to as an inline style. But this is not the best of most efficient way to style HTML elements. We have much better control by placing the styles within the head portion of the document or using an external document that has the styles listed within it. We would then link any HTML pages using those styles to that external document. When setting the styles either internally on the page or in an external document we'll refer to them as style rules. These style rules are then applied to the HTML elements in a variety of ways. Consider this example if placed within the head portion of your web page:
<style>
body {text-align: right; color: blue;}
</style>
The above would cause all HTML elements on the page to be aligned to the right-hand margin and all text to be blue. This is because the rule is being applied to all elements within the body tag. I this case the body tag would be considered the selector and the properties and values are placed within a style declaration that is surrounded by parenthesis. The declaration can be made up of one or more sets of properties and values. Each set is separated by a semi-colon. In this case we are setting the value for the text-align and color properties. View Example 1
Now let's consider this:
<style>
body {text-align: right; color: blue;} p {text-align: left; color: black;}
</style>
The style declaration for the body has remained the same but now we have a selector for the paragraph tag to which we are applying a text-align property set to left and a color property set to black. View Example 2
But what do we do if we don't want all paragraphs to have the same style? In this case we can create a custom rule that does not use an html element as a selector. It is called a class selector. For this example we'll create a class called paragraph2.
<style>
body {text-align: right; color: blue;}
p {text-align: left; color: black;} p.paragraph2{padding: 6px; border: 1px dotted #000000; background-color: #f0f0f0;}
</style>
Then we apply the style to the HTML element we wish to have this style by adding a class attribute to the tag with its value set to the name of the class (without the period prefixed to the start). Like this:
<p class="paragraph2">Pellentesque sem arcu, varius eu, adipiscing in, porttitor eget, mauris. Nam in justo. Maecenas dictum quam et nisl. Suspendisse potenti. </p>
<p>Phasellus porttitor, nisi eu vehicula porttitor, arcu quam bibendum mi, eu feugiat enim tortor sed ipsum. Pellentesque mi quam, sollicitudin vel, tempus id, porttitor id, diam. Integer congue elit sed tortor. </p>
You can also define a class without prefixing a selector:
<p class="paragraph2">Pellentesque sem arcu, varius eu, adipiscing in, porttitor eget, mauris. Nam in justo. Maecenas dictum quam et nisl. Suspendisse potenti. </p>
<p class="redtext">Phasellus porttitor, nisi eu vehicula porttitor, arcu quam bibendum mi, eu feugiat enim tortor sed ipsum. Pellentesque mi quam, sollicitudin vel, tempus id, porttitor id, diam. Integer congue elit sed tortor. </p>
There is yet one other way to apply a style to an HTML element. This is through the use of an ID attribute on the element, or the ID selector. ID attribute values need to be unique. Meaning you should not have elements with the same ID. Let's look at how this works.
<style> #navigation {padding: 10px; background-color: yellow; border: 1px dashed #000000;}
</style>
The strength of setting a style based on the elements ID is that it simplifies applying styles to different sections of your web pages. For example, you might want the hyperlinks within the body copy to behave a certain way, but the hyperlinks in the navigation area to do something different. To do this we can add selectors to the element ID defined in the style:
<style> #navigation {padding: 10px; background-color: yellow; border: 1px dashed #000000;} #navigation a {color: red;}
</style>
So far all the examples have shown the styles added to the head section of the document which is referred to an internal style sheets. Even greater efficiency can be gained by creating an external style sheet and linking all the html files to that one sheet. In this case a single change on the style sheet will affect all the pages in the site. That is very powerful. To create an external style sheet:
create a document and name it 'mystyles.css' (mystyles can actually be anything - but it will do for this example).
add some style rules to the document but DO NOT include the style tags - you only want the style rules.
To every HTML page you want the styles applied to add this line within the head tags: <link rel="stylesheet" type="text/css" href="mystyles.css" />
Note that link and visited refer to the state of the link before and after being clicked. Hover is used for whent he cursor is over the link and active is for when the user is pressing the link. Also in order for the pseudo-class to work as anticipated the order of the styles must be as shown above.
