Improve HTML Document Style Using CSS

CSS (Cascading Style Sheet)
CSS is short for Cascading Style Sheet. CSS is a language which consists of a set of codes that are used to set the style of the components of a web page so that it looks more interesting. Before stepping into the CSS, you should have an understanding of HTML as a markup language which became the basis of the formation of a web page. Currently the use of CSS in a web page is common. By CSS web page look more attractive and powerful.

A Basic Introduction To CSS
Before knowing more about CSS, you need to understand in advance the term of selector, property, declaration, and value in CSS. The selector is html element that will be defined the style to them. Property is a component of the CSS used to determine the type of style on the html element. Grant of a value on a property will affect the style of html elements are declared. The declaration consists of property and value, for more details see the illustrations and explanations of the following:

Selector, Declaration, Property and Value in CSS
On the illustration above, p is the selector, color and the font-family are property. Blue is the value given on the color property that will make the text color is blue for the element of the tag <p> on the look of a web browser. To set the font type, give the value as font-type name on the font-family property such as Arial, Tahoma, Times New Roman etc. The declaration are the css code that placed between {}, every write the declaration must be ended by symbol ( ; ). To give value to the property must be separated by (:) between property and value. For example to writing the declaration:  
{color:Blue; font-family:Arial;}.

Method of Inserting CSS into HTML document
In order for the CSS can give its support in terms of performance the look of a web page, CSS should be inserted into an HTML document so that the CSS codes can be recognized in that HTML document. There are three ways to insert CSS to the HTML document, the way are Inline Style, Internal Style and External Style.

Inline Style
Inline Style is a method of inserting CSS in HTML tags with CSS codes declared as value in the style attribute. The following is an example of Inline Style:
<!DOCTYPE html>
<html>
 <head>
   <title>Inserted CSS Using Inline Style Method</title>
 </head>
 <body>
  <p style="background-color:black; color:white; font-style:italic;">
    The text in this tag will be white with the background color is black, <br />
    and the text will apear as italic.
  </p>
 </body>
</html>
For HTML document with many elements that use the same style, using the inline style method is not recommended because we have to declare CSS code for each tag that using the same style.

Internal Style
Internal Style is how to insert CSS in an HTML document by separating the CSS code from the HTML tag. Internal Style Method also called Embedded Style Sheets. To insert the CSS using this method, define the tag <style> before the closing tag </style> between <head> and </head> tags, next we put the CSS code between the <style> and </style> tag. The following is an example of Internal Style method:
<!DOCTYPE html>
<html>
<head>
  <title>Inserted CSS Using Internal Style Method</title>
  <style type="text/css">
   h2{
     font-family:Arial;
     color:blue;
     font-size:14px;
     font-style:italic;
     text-decoration:underline;
   }
  </style>
</head>
<body>
  The Following Are the three method of Inserted CSS into HTML Document:
  <h2>Inline Style</h2>
  <h2>Internal Style</h2>
  <h2>External Style</h2>
</body>
</html>
In the example above CSS code is inserted between tags <style> and </style>. On the code, the css was declared for the h2 tag style, which h2 tag defined three times with the same style, then we only have to declare css just once for this tag. The weakness of this method is when CSS style used by several different HTML document, the CSS must be declared in each document. The solution to this problem is the external style method.

External Style
External Style is how to insert CSS into an HTML document by way of specifying the location of the CSS file by using the tag Link defined between tags <head> and </head>. This means that CSS code placed in a separate file from the HTML file, so that the CSS files can be recognized by the HTML document must be determined where the location of the CSS file. To use the external-style method, first create html document like this:
<!DOCTYPE html>
<html>
<head>
<title>Inserted CSS using External Style Method</title>
</head>
<body>
 <div>
   The text will appear white with italic style. <br />
   Font type of the text is arial and size of the font is 12px.<br />
   The CSS style will be recognize by External Style Method.
 </div>
</body>
</html>
Next we declare the CSS code on different files with the filename is style.css. The Codes of the file style.css is as follows:
body{
   background-color:black; 
}
div{
   font-family:Arial;
   font-size:12px;
   font-style:italic;
   color:white;
   font-weight:bold;
}
After create the style.css insert this file to the HTML Document by adding the code below between <head> and </head> tag :
<link rel="stylesheet" type="text/css" href="style.css">
This is done so that the file style.css can be recognized by the HTML document. For more detail see the ilustration below of adding the external css to html document.

Adding CSS External FIle onto HTML Document

I hope this tutorial can help you still beginner in learning CSS. The next article will be discussed about the use of the selector class and id in CSS.
Category: , , ,