Basic CSS

Basic CSS

To make a page now the best way is html with css not just html. It is very easy to style all the elements of your page. Here are the basic atributes to to elements you can style, remember to end all of these in semi-colons:



background: either enter a color-code or url(path/to/image.type);

border: thickness solid color;
Replace thickness with a pixel value, leave solid as solid, and replace color with a hex code such as #ffffff or white. To further customize this you can make the different sides of the border different colors, only have a left border, etc. To do this; change "border:" to "border-top:", "border-left:", "border-right:", or "border-bottom:".

margin: amount;
Replace amount with a pixel value. To further customize this you can specify where you want to have this property in effect. To do this use this format:
property-direction: atributes;
Replace property with your property or here it is margin. Next, replace direction with top, bottom, left, or right.

padding: amount;
Replace amount with a pixel value. To further customize this you can specify where you want to have this property in effect. To do this use this format:
property-direction: atributes;
Replace property with your property or here it is padding. Next, replace direction with top, bottom, left, or right.

width: amount in pixels;

height: amount in pixels;

color: hex code for color;

font-size: size in pixels;

font-famliy: name of font;

text-align: either left, right, or center;



All of these can be used to style basic elements of a site. These elements are:
body, p, a:link, a:active, a:visited, a:hover, h1, h2, h3, h4, h5, div, span, table, tr, td, font, etc.

The basic format is:

Code:

element{
atribute: property;
atribute: property;
atribute: property;
}

And for code cleanliness and ease of further editing, if it can be, make the CSS and external file and then include it in the header:

Code:

<link rel="stylesheet" type="path/to/your/css/file.css" />

I prefer to use the newer "html5" directory structure:

>main directory-
-->assets
------>img
------>css
---------->file.css
------>js
>index.html

So..

Code:

<link rel="stylesheet" type="assets/css/file.css" />

This would be the path the CSS file.

Remember when we didn't use CSS... woah

CSS FTW btw as mentioned above several times, you should always use % so when you resize your browser or are on a different screen size your design looks the same