CSS - Cascading Style Sheets
HTML is the language of the World Wide Web - www. As the body consists of cells, a web page is full of HTML tags. The basic ones are as follows:
Cascading Style Sheets add unique aesthetic appearance to html tags, which in turn, turn the web pages into attractive items to read and of course, explore. The following two blocks illustrate the difference:
The top block is written with basic html tags.
Once upon a time there was an enterprising Scottish actor, callde Arthur Ferguson, who discovered that he could make a very good living selling things that didn't actually belong to him. He first got the idea, when he was
sitting in the middle of Trafalgar Square in London. That was in 1923. He saw an American tourist admiring the stone lions, fountains and Nelson's Column. He introduced himself as the 'official guide' to the Square and started to explain the history of the place.
The same pargraph is written below, using CSS. Spot the differences:
Once upon a time, there was an enterprising Scottish actor, callde Arthur Ferguson, who discovered that he could make a very good living selling things that didn't actually belong to him. He first got the idea, when he was
sitting in the middle of Trafalgar Square in London. That was in 1923. He saw an American tourist admiring the stone lions, fountains and Nelson's Column. He introduced himself as the 'official guide' to the Square and started to explain the history of the place.
1) A dashed red border has been created around the text.
2) The background colour has been changed into black.
3) The first letter of the paragraph has been made very big.
4) 'Scottish actor' has been emphasized.
5) 'Arthur Ferguson' has been written bold.
6) 'Trafalgar Square' has been written in blue.
7) There is a clear margin between the border and the contents.
These are the some of the styles that could be applied to selected elements of a web page, which remove the dullness of a plain web page.
Applying CSS to Elements:
Before applying CSS, we must recognize the two main types of elements of a web page. They are:
1)Inline Elements - <span>, <strong>, <em>, <a>, <img>
2)Block-level Elements - <p><h1-6>,<hr>, <div>
Inline elements can never contain Block-level Elements. However, a Block-level elements can contain both Block-elements and inline elements.
E.g.
<p><em>An emphasis</em></p>
<span>A highlighted bit<\span>
The Box Model:
The above image illustrates the componets of the Box Model. The size of the margin determines the closeness between two adjacent elements; the greater the margin, the greater the distance between them. The border is the first visible outline of an element. Its width, colour and the style can easily be set by CSS, in one step or with a series of steps.
Padding determines the space between the border and the contents; the higher the number, the greater the space.
The Box Model for a <div></div> can be manipulated as follows; the <div> begins just below red line and ends just above the green line.
margin-top:5px
width:300px; - width of the section
height:200px; - height of the section
color:olive; - colour of the text
border-top:5px red solid;
border-right:10px blue dotted;
border-bottom:15px green dashed
border-left:20px yellow groove;
background-color:#fffacd or lemonchiffon
padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;
margin-bottom:20px;
The above example clearly demonstrates the effets on margins, borders and padding.
Formatting a Paragraph with CSS
font-family:Arial;
font-weight:lighter;
font-size:small;
font-style:italic;
color:olive;
background-color:#fffacd;
Manipulating Hyperlinks with CSS
Hyperlinks can easily be manipulated with CSS. The following pseudo classes can be used to manipulate hyperlinks.
•a
•a:link
•a:visited
•a:hover
•a:active
E.g.
Vivax Solutions
When the mouse is moved over the above, the effects on the hyperlink is produced by the following code:
a {font-family:Georgia,serif; font-size:small}
a:link {color:blue;}
a:visited {color:#D2691E;}
a:hover {text-decoration: none; color:olive;
font-weight:bold;font-size:large;}
a:active {color: red;text-decoration: none}
Creating a Vertical Menu with CSS
The way hyperlinks are manipulated, can be extended to create vertical menus, also known as navigation bars. Please study the following:
The code that produced the above vertical menu is as follows: the bottom-half is the HTML code; the top-half is the CSS code.
<head>
<style type="text/css">
.hyperlink {text-align:center;}
.hyperlink a {font-family:Georgia,serif; font-size:small}
.hyperlink a:link {color:blue;}
.hyperlink a:visited {color:#D2691E;}
.hyperlink a:hover {text-decoration: none; color:olive;font-weight:bold;font-size:large;}
.hyperlink a:active {color: red;text-decoration: none}
.verticalmenu ul
{ list-style-type:none;
margin:0;
padding:0;
}
.verticalmenu a:link
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#D2691E;
width:120px;
text-align:left;
padding:4px;
text-decoration:none;
text-transform:capitalize;
border:3px dashed red;
}
.verticalmenu a:hover
{
background-color:maroon;text-align:center;
}
.verticalmenu a:active
{
color:Red;
}
.verticalmenu a:visited
{
color:Blue;background-color:#D2691E;
}
</style>
</head>
<body>
<ul class="verticalmenu">
<li><a href="#home">Home</a></li>
<li><a href="#maths">Maths</a></li>
<li><a href="#physics">Physics</a></li>
<li><a href="#web">Web</a></li>
<li><a href="#iqtest">IQ Test</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
Creating a Horizontal Menu with CSS
The code for achieving the above is as follows:
<head>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Maths</a></li>
<li><a href="#">Physics</a></li>
<li><a href="#">Web</a></li&g..'t;
<li><a href="#">Contact</a></li>
</ul>
</body>
Please note the significance of float-left and display:inline in producing the horizontal menu.