CSS First-steps
As you can see in the map, there are many elements (some of them are unused in your page). Each of the html elements in the map has an unique CSS id (begins with '#') and/or a CSS class id (begins with '.').
Classes can be used to set the style of many similar elements while unique ids are used to set the style of one element.
To set the style of a class use the following code:
To set the style of an unique element use this code:
You can also change the style of html element by just irting it in the front of the curly brackets:
This sounds complicated, so here is an example:
If you want to change the color of all elementes in CSS class 'postbody' to red just write:
Code: .postbody { color:red; }
If you want to change the color of the element 'title' to red just wirte:
Code: #title { color:red; }
And if you want to change the color of ALL <a> elements (hyperlinks) to red you would write something like this:
Please do not forget the curly brackets, your CSS code won't work if you don't write them. You can put as many CSS code between the brackets as you need. If there are more than one CSS codes for an element the last one found will overwrite any existing styles.
CSS: Changing Font and Color
To change the used Font use:
Code: font-family:[font_name];
[font_name] can be the name of a font installed in your os. You can also specify more than one font seperated by commatas. There are also a few generic fonts:
serif, sans-serif, cursive, fantasy and monspace
To change the style of your font use:
Code: font-style:[font_style];
[font_style] can be one of the following: normal, italic and oblique
To change the size of your font use:
Code: font-size:[font_size];
[font_size] can be a numeric value with a shortcut which measure is used. 1cm is 1 centimeter, 12px are 12 pixels. you can also use on of the following keywords:
xx-small, x-small, small, medium, large, x-large and xx-large
To set the weight of your font use:
Code: font-weight:[font_weight];
[font_weight] can be on of the following: bold, bolder, lighter, normal or a numeric value from 100 (thin) to 900 (extra bold) in 100-steps.
To change the decoration of your font use:
Code: font-decoration:[font_decoration];
[font_decoration] can be one of the following: underline, overline, line-through, blink or none
To change the color of the Font use:
[colorcode] can be a hexadecimal color value like #ff00ff or the web-name of a color like 'red', 'green',...
To change horizontal alignment of your text in an element use:
Code: text-align:[align];
[align] can be left, right or center.
To change vertical alignment of your text in an element use:
Code: vertical-align:[v_align];
[v_align] can be top, bottom or middle.
CSS: Background Images and Color
To change the background-color use:
Code: background-color:[colorcode];
[colorcode] can be a hexadecimal color value like #ff00ff or the web-name of a color like 'red', 'green',...
To change the background-image use:
Code: background-image:url('[url_of_image]');
[url_of_image] is the url of youbackground image
CSS: Borders
To change the color of your border use:
Code: border-color:[colorcode];
[colorcode] can be a hexadecimal color value like #ff00ff or the web-name of a color like 'red', 'green',...
To change the size of your border use:
Code: border-width:[border_size]
[border_size] can be a numeric value with a shortcut which measure is used. 1cm is 1 centimeter, 12px are 12 pixels. you can also use on of the following keywords:
thin, medium and thick (use 0 for no border)
To change the style
Code: border-style:[boder_style]
[border_style] can be one of the following: none, hidden, dotted, dashed, solid or double
CSS: Repositioning of Elements
To change how an element is positioned use this:
Code: position:[position];
[position] can be static (no positioning), relative (from where the element would be) or absolute
To change where an element begins use this:
Code: left:[distance_to_the_left]
top:[distance_to_the_top]
all values are numeric values like described before: 1cm is 1 centimeter, 12px are 12 pixels.
To change the size of an element use this:
Code: width:[width_of_element]
height:[height_of_element]
all values are numeric values like described before: 1cm is 1 centimeter, 12px are 12 pixels.
To change the margin of an element (spacing to other elements)
Code: margin:[spacing_to_elements]
all values are numeric values like described before: 1cm is 1 centimeter, 12px are 12 pixels.
To change the padding of an element (space between element border and its content)
Code: padding:[space_to_content]
all values are numeric values like described before: 1cm is 1 centimeter, 12px are 12 pixels.
CSS: Links
There are a few special classes used for links:
- :link for links to unvisited pages
- :visited for links to visited pages
- :focus if the element gains the focus (using Tab-Key)
- :hover if the mouse hovers over the link
- :active an recently clicked link
To use them just append them to a hyperlink-css-description:
Code: a:link { }
a:visited { }
a:focus { }
a:hover { }
a:active { }
-----
This was only a very short tut on CSS, but it should be enough for your own design. |
