what is styling
If you have programmed in microsoft word you have probably used styles. If you have not you should have. A style in a document tells you what type of font to use if it is a paragraph. what type of font or color to use if it is a heading etc.
The benefit of this approach is that you can change the look of all paragraphs by simply changing the style of a paragraph. You will see this in this article.
Show me an example
<html>
<head>
<style>
p
{
color:orange;
font-size:14;
}
h1
{
color:navy;
font-size:20;
}
</style>
</head>
<body>
<h1>This will be navy blue text in font size of 20.</h1>
<p>
This will be a paragraph and will be in color
of orange. It will
have a font size of 14.
</p>
</body>
</html>
This is an html document with typical sections. There is an html tag at the top and the bottom. There is a head section and there is a body section.
The body section has a heading and a paragraph. The heading and the paragraph doesn't say anything about their style.
The head section contains a sub section called "style" that describes how a paragraph looks and how a heading 1 should look like. Each of the html tags such as "p", "h1" etc can be specified inside a style section. Almost all html tags are allowed in this section.
For a tag like "p" the values "color" and "font-size" are called style attributes for the tag "p".
You can discover the style attributes for each of the tags at w3c schools.org.
Classifying paragraphs
the styles are good so far. You are able to give one style for a heading and another style for a paragraph. What if you have two paragraphs. Furthermore the first paragraph you want in black. The second paragraph you want it in yellow. The way you do this is by assigning a class to each of the paragraph tags.
<p class="black-para">
This is a black
paragraph.
</p>
<p class="yellow-para">
This is a yellow
paragraph
</p>
In this example the "black-para" and "yello-para" are called classes. You can attach a class like this for any html tag.
Once you have these classes you can assign style attributes for these clases.
<style>
.black-para
{
color:black;
}
.yellow-para
{
color:yellow;
}
</style>
With these styles your paragraphs with proper class names will reflect the corresponding styles. This example is also showing you the syntax for defining styles for classes. The "." followed by the classname and the curly braces is indeed the syntax for defining sytles for classes.
To stress, this idea of specifying class names for html tags and then defining their styles in the style section works for all html tags.
Removing styles to a separate file
In real world applications the styles are speciified in a separate file. These files typically carry the extension of ".css"
Here is an example of a file called "mystyle.css"
//This is a comment in the file.
//Just take everything in your style section
//and move it to a sep file.
//You don't need the <style> word in this file
.black-para
{
color:black;
}
.yellow-para
{
color:yellow;
}
Once you have this file you can rewrite the html document as follows
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<p class="black-para">para1</p>
<p class="yellow-para">para2</p>
</body>
</html>
notice how the style sheet file is included in the head section of your html document using the tag "link". There is no logic to this except assume that this is how you include a .css file.
A note on html tags
There is an html tag called "hr". This tag stands for "horizontal line". You can use it like this.
<h1>Heading</h1>
<hr></hr>
<p>
para
</p>
The tag "hr" does not contain anything inside it. In cases where there are no children to a tag like this you can shorten it by saying like thie
<hr/>
This is equivalent to
<hr></hr>
More useful way of using this tag is
<hr class="thick-line"/>
<hr class="thin-line"/>
ofcourse you will need to provide a style definition for classes "thick-line" and "thin-line" using what you learned about classes.
This idea of avoiding the tail of a tag is also used in the "link" tag when we have specified an external style sheet.