Basic CSS Tutorial
Basic CSS Tutorial
mido | 7271 Reads | 1.CSS Intro:
What is CSS?: CSS stands for : CSS stands for Cascading Style Sheets. And its a language for formatting HTML document, And show how the HTML Tags should be formatted/displayed.
Why CSS?: CSS can style your HTML document, which is by default, a static and 90% styleless. CSS make your web page attractive and good-looking, and users will love to visit it. CSS is flixable and makes your HTML code clean…How?: If you wrote for an example an HTML table, and wanted to style it (background color, cellpadding, cellspacing, etc, etc…):
But if you had styled the table in a class/id, you will have to do :
2.CSS Syntax:
CSS is simple and clear. but, its too sensitive to the syntax. and all the code must be lower-case
CSS is written that way :
tag/selector {property: value}
The selector/tag is teh HTML element/tag you want to style, property is the attrib to the tag which requires a value. If you needed to define more than one property, like this: selector { property: value property2:value } You will have to put semi-colons/terminator after the value or to separate properties. To make your code more clean, you may write all of selector, property and values, on a separated lines like this:
selector { property:value; property2:value }
It will be more readable and easy to read/modify…
A nice tip in CSS you can group some of selectors, and separate them with commas “,”
h1,h2,h3,h4,h5 { color: yellow }
Class: You can make more than one selector, but defines their classes:
p.right { color:green; text-align:right }
p.left { color:yellow; text-align:left }
And the HTML code will be :
To apply more than one class in one given element syntax will be:
It will be styled by the class “right” AND the class “bold”.
You can also make a “common class” like this:
.right { color:green; text-align:right; }
Starting a class name with a number will NOT work in Mozilla Firefox.
id: The style below will match the element that has an id attribute with a value of “green”: like:
#green {color: green}
Starting an id name with a number will NOT work in Mozilla Firefox also.
3.CSS Comments:
Comments are used to make the code more clearer, and more easy to reach the part you want in the CSS.
/* This is a comment */
There are two ways to include the CSS into the HTML document:
First one:
where “mystyle.css” is the file which contains the CSS code.
Second:
To embed it in the HTML code:
To hide the code from Old browsers which doesn’t recognize tag: You hide it in an HTML element:
4.CSS Small reference:
Background:
-background: declearate all background properties in one property (e.g background-color background-image background-repeat background-attachment background-position)
background-color: defines the background color : color-rgb, color-hex, color-name,
Border:
border:A short property for setting all of the properties for the four borders in one declaration (border-width, border-style, border-color)
border-style: sets the style of the border (values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset:)
Classifications:
cursor:defines the cursor to be displayed on the desired element.
(values: url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, -resize, w-resize, text, wait, help )
Dimension:
height: defines the height of the element (values: auto, length, %)
Width: defines the width of the element (values: same as height)
Font:
font-family: defines type of the font. font-size: size of the font (values: number, %, px)
font-style: sets style of the font (values: normal, italic, oblique)
font-weight: defines the weight of the font (values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
Padding: padding-(left/right/top/bottom); sets the padding of the element. (values length %)
Text: text-color: defines color of the text. text-decoration: defines the text decoration (values: bold, underline, italic, none) text-align:sets the align of the text (values: left, right, center, justify)
Margin: The CSS margin properties define the space around elements.
margin-(top/bottom/right/left) values: auto, length, %)