HTML css style sheets

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>



<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

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