Design and Create Your Own CSS
Design and Create Your Own CSS - In this tutorial I will show you
how simple it is to create your own external css file by using some
proven methods.
Let’s get started in building our external style sheet.
The css file we will be creating will make our website look something
like the following snapshot.
The css code to create this file is:
————————————–
BODY, TD {
background: navy;
color : white;
font-family : Arial, sans-serif;
font-size: 14px;
text-align: justify;
}
H2 {
font-size: 14pt;
color: #87CEFA;
}
H3 {
font-size: 13pt;
color: #7FFFD4;
}
H4 {
font-size: small;
font-variant: small-caps;
font-weight: bold;
color : white;
}
A {
text-decoration: none;
color: aqua;
}
A:Hover {
text-decoration: underline;
color: #32CD32;
}
HR {
color: blue;
height: 1pt;
}
————————————–
To use the above css code please open a new text file (Windows users can use Notepad) paste the code into your file and save the file as mycss.css not mycss.css.txt.
Break Down of CSS Meanings
BODY, TD {
background: navy;
color : white;
font-family : Arial, sans-serif;
font-size: 14px;
text-align: justify;
}
The above code formats the background color of your webpage and applies other formatting for Font Type to be used in the web pages, font size, font color and text alignment.
H2 {
font-size: 14pt;
color: #87CEFA;
}
The above code changes the formatting of a H2 element to a font size 14 and a specific color.
H3 {
font-size: 13pt;
color: #7FFFD4;
}
The above code changes the formatting of a H3 element to a font size 13 and a specific color.
H4 {
font-size: small;
font-variant: small-caps;
font-weight: bold;
color : white;
}
The above code changes the formatting of a H4 element to a small font size, small caps, bold and white text.
A {
text-decoration: none;
color: aqua;
}
The above code changes the font color.
A:Hover {
text-decoration: underline;
color: #32CD32;
}
The above code changes the hyperlink when a mouse is moved over to it to show the link underlined and in a different color - source Design and Create Your Own CSS.
HR {
color: blue;
height: 1pt;
}
The above code changes the Horizontal line to blue with a set height. Once you link a css file to your webpage’s the look and feel in this example would be like the screen shot above. If you have 20 webpage’s to change the look and feel of all of the webpage’s is a matter of just updating the css file.
You can also use a simple free program that can help you to design and create your own css style sheet.
Tags: Design and Create Your Own CSS
