SEO Articles :: Style CSS for Beginners
Style + Layout CSS Tutorial
So, how do you code in CSS and create a style css file? How do you use layout CSS code to configure the shape of your site? Below is a quick CSS tutorial to get you started and to show you how simple CSS is to implement. If you are not at all familiar with html coding, you may wish to have a look at a few tutorials on HTML before attempting to design/redesign with CSS. Although if you follow this closely, a knowledge of HTML is not necessary.
First of all, you will need to create a text file and call it filename.css (this can be done by right-clicking your desktop or a folder and selecting new>>text document). Next, you will need to make sure your webpage makes use of this file by referencing it in the header tag, as shown:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="filename.css" />
</head>
To do this, simply open one of your websites pages in notepad (windows' basic text editor) by
right -clicking the HTML document and selecting open with, then selecting notepad.
This would load settings from a style sheet called filename, located in the root directory of your website (obviously you may want to call yours 'CSSfile' instead of 'filename'). If you wanted to have a folder specially for style CSS files, you could do. You would simply need to add the directory name before the filename when referencing it in the header tag, eg. cssfiles/filename.css.
The style CSS file itself would read something like this (in the most basic form):
body {
font-family: Georgia , serif;
color: purple;
background-color: #FFFFFF }
h1 {
font-family: Helvetica, Arial }
The above CSS code would define the background colour, default font and colour and the font of the headings in your document.
The main settings are in the ‘body' section. Then, the ‘h1' section defines what any heading text using the h1 tag will look like. This would be done as below:
<h1>Heading Text </h1>
CSS For Layout Design
CSS can also easily define the layout of a website without the need for tables. An example, as used on the www.sharethewealth.co.uk website, is shown below. This is the content area of the site and is predefined in the layout CSS file. Layout CSS code can be included in the style css file. Separation of the two is not necessary but some people use separate files simply on personal preference.
The code in the html document is as follows:
<div id="content">
content is inserted here
</div>
This makes all content between the <div> tags stick to the parameters/rules set for the <div> in the style CSS file. The code in the CSS file reads as follows:
#content{
width:929px;
margin-right:auto;
margin-left:auto;
margin-top:auto;
background-color: #eaeaea;
text-align:left;
border-style: solid;
border-color:#000000;
border-width: 2px;
}
Now here is a breakdown of that code to help you better understand how it works.
First of all we have: #content
This defines a new element/set of rules and anything associated with this tag will inherit its rules.
Next we have {}
All rules are contained between these parenthesis. They mark the start and finish of the element.
Now, the rules.
Note that all rules must end with ‘;' This ensures the rule is taken into account and finishes the rule much like the parenthesis, {}, starts and finishes the set/element.
Firstly we have a ‘width' parameter, set at 929px. This means that the ‘content' element has a set, unchanging width of 929 pixels.
Next we have left, right and top margin properties. These define how far in from left, right or top the element is placed. In this case ‘auto' has been chosen. Setting it to auto means that it will be centered in the browser window and the margins adjusted accordingly.
Next, the background color is set. Remember, this is the background of the element and not the webpage as a whole. The #eaeaea value, and color values of a similar format, can be obtained from most good graphic design packages –such as Photoshop or some websites. Values such as ‘black' and ‘white' also work but do not allow for the wide range that hex values do (#eaeaea is known as a hex value).
The text alignment aligns text much like in a word processor. So there is left, right and center alignment as well as justification (kind of right and left alignment at the same time, so the text is stretched across where necessary to keep evenness).
Next we have the border properties. This sets the edges of the element and allows you to have an edge of set width and colour or have no edge at all.
‘Border-style' is set to solid so that it is a solid line. Different styles are available, such as a dotted style. A full list of these is available from the link at the end of this short tutorial.
‘Border-color' sets the colour of the border. In this case, we have a black border.
‘Border-width' sets the with, in pixels, of the border.
Although widths, such as the width given to this element, do not have to be set in pixels it is best to stick to pixels to start with. Alternativly, percentages are not difficult to understand. You may set the width of an element to ‘50%'. This would automatically resize the element to take up half of the visible browser window. Any text inside would adjust to fit. Personally, I prefer having set widths that are centered in the browser as I think it's a lot neater but there are scenarios where percentages are needed.
You can go on to set many, many different properties. A great resource for help on style CSS can be accessed from the following link:
http://www.w3schools.com/css/css_examples.asp
Back to SEO Articles<<
