Viruses Explained What are Trojans? What are Worms? What are Rootkits? Free AntiVirus Latest Virus Threats Top 10 Anti Virus Malware Tutorials
Spyware Explained Malware Tutorials Free Anti Spyware Manual Tips
FREE Anti Virus FREE Anti Spyware FREE Online Scanners Definition Updates Manual Updates BootUp Anti Virus Portable Protection Rootkit Removal Top Security Tips
HTML Tutorial WORD Tutorial EXCEL Tutorial Computer Beginners Windows Registry Top Security Tips Malware Tutorials
Web Templates Word Templates Word Processing

Home Page
Free Anti Virus
Free Anti Spyware
Free Online Scanners
Free USB Anti Virus
Bootable Anti Virus
Rootkit Removal
Latest Virus Threats
Viruses Explained
Spyware Explained
Windows Registry
Top 10 Antivirus
Manual Updates
Definition Updates
Malware Tutorials

Computer Basics
HTML Tutorials
Free Web Templates
Word Tutorials
Excel Tutorials

CV Creation
Free CV Templates
Free CV Examples

   IP: 54.92.142.198

Beginners HTML   Beginners Plus HTML   CSS Style Sheets   <table> tag   <div> tag  
HTML Links   Free Web Templates  

CSS Style Sheets

CSS stands for Cascading Style Sheets. These styles explain to the browser how to display HTML elements. You can define these styles within each HTML page. To make life easier and for consistent styles you can store all these styles or formats in one file, to be called into each HTML page.

    The concept here is your creating the formats e.g. font size or colour, table width or height etc. and more in one file, so as to call them from any html or other webpage you create that wants to use them.
    See also Beginners Plus HTML
So basically we need to create a file; lets call it mystyles.css we will create this below now in pink. Copy and Paste this code into notepad etc and save the file as mystyles.css onto your desktop.

This will now be your style sheet. Between the opening and closing curly brackets defines a block of code, but we have no formats between the blocks yet.

The html file is below in blue called website.html this has <div> tags called container, header, mainContent and footer. Now do you see why the blocks of code in mystyles.css have been given their names.

website.html
<html>

<head>
<link type="text/css" rel="stylesheet" href="mystyles.css">
</head>

<!-- Notice the link to the stylesheet -->

<body>

<div id="container">

<div id="header">
   The Name of Your Website
</div>

<div id="mainContent">
This is for the main content of your html page. This is for the main content of your html page.
</div>

<div id="footer">
   This is for all your footer information
</div>

</div>

</body>

</html>
mystyles.css
<style type="text/css">


body {
}

#container {


}

#header {


}

#mainContent {


}

#footer{


}


</style>


Now with the two files saved to your computer open the html file to view by double clicking and see how the html page looks. It will look plain because we have done nothing in the style sheet.

See below for how it should look when we put format between the blocks of code. Further on we will explain the code in the two files.

You can use the code below to now fill in the blocks of code in mystyles.css

The Name of Your Website
This is for the main content of your html page. This is for the main content of your html page. This is for the main content of your html page. This is for the main content of your html page. This is for the main content of your html page.

This is for the main content of your html page. This is for the main content of your html page. This is for the main content of your html page. This is for the main content of your html page.
This is for all your footer information

Lets explain the stylesheet code. Each block of code is encased by curly brackets {} and the name before each block is the name of that block.

For instance the names "container", "header", "mainContent" and "footer" are four blocks of code with information inside them. When you create your html you then create (in this case) divisions and call this code to act inside the division. See html examples in green.

<div id="container"> <div id="header"> <div id="mainContent"> <div id="footer">

<style type="text/css"> defines its a style sheet and its type.

body created as default to frame whole browser.
body {
}
container that holds header, mainContent and footer, see how to control the width and use a black border.
#container {
     width: 85%;
     margin: 0 auto;
     border: 1px solid #0729FA;
}
header at the top of your page; width:auto is used to stretch to the width of the container. padding is used to keep text off the borders.
#header{
     width:auto;
     padding: 15px 15px;
     font: 20px Verdana, Arial, Helvetica, sans-serif;
     color: #8B0606;
     border-bottom: 1px solid #6D71B4;
}
mainContent used as the content area of your page. Here you can control font, alignment etc, margin is used to control margins from the left and the right side of the container.
#mainContent {
     margin: 0 0% 0 0%;
     padding: 15px 15px;
     font: 13px Verdana, Arial, Helvetica, sans-serif;
     color: #3E3E3D;
     text-align: justify;
}
footer is similar to header with control features for border, font etc.
#footer {
   border-top: 1px solid #E2EAEB;
   padding: 10px 10px;
   font: 14px Verdana, Arial, Helvetica, sans-serif;
   color: #052969;
}

</style> Closing tag of this style sheet. You could now create multiple html pages all calling from this style sheet, so as to make the website etc look consistent.

See also Beginners Plus HTML or HTML Links