CSS stands for Cascading Style Sheets. CSS is the very simple mechanism for adding style (this is fonts, colors, spacing) to Web pages. This post is about how to use css into an html documents and how these two can be work together. Step by step it is discussed of using css into html documents.
Step 1: Create a Html file.Simply you can use notepad on windows or vi on unix to write a simple html file. You can use third party open source program like notepad++. But never use wordprocessor, such as Microsoft Word or OpenOffice. Because their outcome comes in different format and browser can't read it.
Note that in html comment starts with <!-- and ends with -->
My content of index.html is below.
<html>
<head>
<title>My first styled page</title>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navigation_bar">
<li><a href="index.html">Home page</a>
<li><a href="products.html">Our Products</a>
<li><a href="contact_us.html">Contact us</a>
<li><a href="about_us.html">About us</a>
</ul>
<!-- Main content -->
<h1>This topic is one is for learning css</h1>
<p>Welcome to http://arjudba.blogspot.com
<p>It is just an example.
You can enhance it as you go on.
The style does not look so good.
<p>More learning materials
are coming soon.
<!-- Just publishing today's date with signature -->
<address>14th July, 2009.<br>
by Mohammad Abdul Momin Arju.</address>
</body>
</html>
In the example the tag <ul> introduces an "Unordered List", which means a list in which the items are not numbered. The <li> is the start of a "List Item." Note that <ul>, <p> does not need closing tags.
Step 2: Add some colours:If you run codes of step1 you will see black text within white background. So with css we want to add some colours to background as well as to text. For css style we should make another file named style.css so that we can use that style for another html file. But in this post to make it easier, I am placing css styles in the same html file index.html. To do it we need to add a <style> element to the HTML file.
Let's see my style looks like,
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: green;
background-color: #ededed }
</style>
</head>
<body>
etc...
Note that in case of adding css element there is followed by rules and each rule contains three part..
selector{
property:value;
}
1. The selector (in the example: "body"), which tells the browser which section of the web page will be affected by css style.
2. The property (in the example, 'color' and 'background-color' are both properties), which tells the browser what aspect of the layout is being set.
3. And the third one is value (in the example 'green' and '#ededed'), which gives the value for the style property.
Step 3: Add fontsFor good design and good look and feel you can add different fonts to different section of the page. For body Georgia font is used, if it is not available, Times New Roman or Times will be there, and if all else fails, the browser may use any other font with serifs.
For heading section Helvetica will be used. If not available Arial will be there, if both unavailable any fonts with sans-serif.
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
</style>
</head>
Step 4: Add a navigation barWe already have navigation menu at top of the page. But we want to move menu bar on left. This is done by css position property with a value of absolute. Also we need to position of body to the right so that menu and body does not overlap. We can move the body to the right by using padding-left property. So our css code now stands,
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left:14em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
ul.navigation_bar{
position: absolute;
top: 2em;
left: 1em;
width: 9em }
</style>
</head>
<body>
Here measure 2em means 2 times the size of the current font. E.g., if the menu is displayed with a font of 14 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use.
Step 5: Style the linksStill now navigation menu looks like list. Using list-style-type property we will remove bullet. And we will make background as green of all menu items so that it looks like menu. To make each menu separate margin property would have a value. Also we will change the colours of the links. If user has not visited yet then make it blue and if user has visited link then we will make it purple.
Now it looks,
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left:14em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
ul.navigation_bar{
list-style-type: none;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
li{
background:green;
border:0;
padding:.5em;
margin:.3em;
}
a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
Step 6: Add a horizontal lineTo make separate address from main page I am adding a horizontal line after body.
So just adding this line within style sheet.
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Step 7: Put the style sheet in a separate file.Now we are separating the syle sheet in another file so that we can use this style in many other web pages. Let's name this as style.css which looks like,
body {
padding-left:14em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
ul.navigation_bar{
list-style-type: none;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
li{
background:green;
border:0;
padding:.5em;
margin:.3em;
}
a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Now from html file index.html reference it as,
<link rel="stylesheet" href="mystyle.css">
Our index.html looks like,
<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navigation_bar">
<li><a href="index.html">Home page</a>
<li><a href="products.html">Our Products</a>
<li><a href="contact_us.html">Contact us</a>
<li><a href="about_us.html">About us</a>
</ul>
<!-- Main content -->
<h1>This topic is one is for learning css</h1>
<p>Welcome to http://arjudba.blogspot.com
<p>It is just an example.
You can enhance it as you go on.
The style does not look so good.
<p>More learning materials
are coming soon.
<!-- Just publishing today's date with signature -->
<address>14th July, 2009.<br>
by Mohammad Abdul Momin Arju.</address>
</body>
</html>
The output will be,
