Follow us on Twitter!
Your life is ending one minute at a time. If you were to die tomorrow, what would you do today?
Sunday, April 20, 2014
Navigation
Home
HellBoundHackers Main:
HellBoundHackers Find:
HellBoundHackers Information:
Learn
Communicate
Submit
Shop
Challenges
HellBoundHackers Exploit:
HellBoundHackers Programming:
HellBoundHackers Think:
HellBoundHackers Track:
HellBoundHackers Patch:
HellBoundHackers Other:
HellBoundHackers Need Help?
Other
Members Online
Total Online: 26
Guests Online: 23
Members Online: 3

Registered Members: 82843
Newest Member: hx47
Latest Articles

Basic CSS Tutorial

Arrow Image Basic CSS tutorial for newbies.



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...):

<table>
<tr>
<td bgcolor="yellow">
<font color="#e0e0e0" size="2"> Hi, this text is in the table's cell. </font>
</td>
</tr>
</table>

But if you had styled the table in a class/id, you will have to do :

<div id/class="the class or id you mentioned">Table here without bgcolor and stuff </div>
Or you can define a class for the table and tds etc...

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 :


<p class="left">
Left aligned
</p>

<p class="right">
Right aligned
</p>

To apply more than one class in one given element syntax will be:

<p class="right bold">
Text here.
</p>

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;
}

<h1 class="right">
Header with right align
</h1>

<p class="right">
This paragraph will also be right-aligned.
</p>

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:
<h1 id="green">H1 font with ID </h1>

#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:

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

where "mystyle.css" is the file which contains the CSS code.

Second:

To embed it in the HTML code:

<head>
<style type="text/css">
body
{
color:green
}
</style>
</head>

To hide the code from Old browsers which doesn't recognize <style> tag:
You hide it in an HTML element:

<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>

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, %)

Comments

I-O-W-Aon July 12 2007 - 13:12:14
nice article very infomative and very clear and easy to understand!
midoon July 12 2007 - 16:40:57
Thanks man, i appreciate, and yea, i learned from my last article to make the coming articles more simple Smile
Ubuxon July 12 2007 - 17:06:07
Even though I already know CSS, Very good Smile I will most likely use this as a reference... Cheers!
sleazoidon July 13 2007 - 23:51:18
css ftw
Damnationon July 14 2007 - 08:59:40
Great article bud. Pfft
loxaXcrackeron October 18 2007 - 15:39:06
VERY VERY GOOD ARTICLE!!!!:happy:Grin
Post Comment

Sorry.

You must have completed the challenge Basic 1 and have 100 points or more, to be able to post.