CSS Beginners guide [PART-1]

[Gaijin]

About:

CSS is short for Cascading Style Sheets, CSS is used to style your HTML code.
With CSS you can add images, borders, change element positions and a lot of other things to your Website.
Using CSS improves the load time of the website, because the style sheet is put into the cache once loaded, and so you can use it over multiple pages with onlye one time load.
If you have more pages and you want to change let's say background images, you would spend your time going trought all of the pages and editing it one by one, with CSS
you do changes only once in your CSS code and it's being applied to all pages that use that style sheet.

I've spoken to many people that didn't even know what CSS, or have tought that I was talking about Counter-Strike: Source (CSS).
With this tutorial I will try to teach you how to style your HTML code and Website.
I will show you only the basics of CSS, and I will leave the rest to you to find out on your own, you will learn it better if you exactly look for what you need!

Second Words:

CSS may look strange and complicated for you when you start, but it is very easy to learn and use.
I have learned to work with CSS within 1 Week, of course you will not become a Guru after 1 Week,
but you will know everything about CSS what is needed to know and, from that point it will be easier for you to improve you HTML styling skills.

How does it work:

CSS commands can be put inside of HTML code, to be specific, inside the HEAD tag.
You can also save your complete CSS styling as a new file filename.css
CSS commands are placed in selectors, a selector is a name of a tag that you want your style to adopt.
There are 3 types of selectors, Element, ID and Class selector,
the Element selector is used like:

Code:

div { }

Element selectors have the name of the HTML tag which should use the given style.
In the above, I'm creating a new selector for every <div></div> element, if you want to style let's say the body,
the selector would look like:

Code:

body { }

ID selector is defined with # at the start of the selector name:

Code:

#divID { }

The ID selector will only apply on elements that have the attribute id="".
Example:

Code:

<div id="divID">Style this with the above CSS selector #divID</div>

NOTE: To create valid HTML code you are allowed to use same ID only on one element.

Class selector is defined by placing . right before the name of the selector.

Code:

.divClass{ }

The above style is applied to every element which has the class attribute defined, class="".

Code:

<div class="divClass">.divClass select will style this div element</div>

Now you know the basics of defining CSS selectors, but that isn't all.
You can assign one selector to more elements, that's being done by separating ,.

Code:

div, span { }

The above will apply to all div and span elements.
You can use the above technique to assign styles to every HTML element.

Sometimes you want to assign styles to elements that are inside of an parent element, in most cases you would assign a class to the parent
and ID to child elements.
You can use CSS to style all div elements within other elements, that's done in the same way as grouping selectors,
but without the, .

Code:

.parent div { }

We would write our HTML like following:

Code:

<div class="parent">
    <div>I'm just a child</div>
</div>

As you can see, we create a parent div and define class as "parent", every other div insde our parent will use the above css code.


And finally, the styling parameters and values are put between { and }.

Example:

Code:

body {
    background-color:rgb(212,208,200);
}

The above code will make the background use RED:212, GREEN:208, BLUE:200 as a color, (light gray).

Inside the curly brackets we write our styling properties, first the property name is written background-color, then the colon (:) follows, background-color:,
after that we assign the value to the property, background-color: blue, background-color: #FF0000, background-color:rgb(212,208,200), and at the end of the command
the semi-colon (;) ends our definition and separate it from other commands.

To include your style sheet into HTML you have three ways,

inside the html header

Code:

<html>
<head>
<style type="text/css">
.parent {
    padding-left:50px;
    border:3px solid cyan;
}
.parent div {
    border:3px solid red;
}
</style>
</head>
<body>
<div class="parent">
    <div>I'm just a child!</div>
</div>
</body>
</html>

or by using a separate file (recommended)

style.css

Code:

.parent {
    padding-left:50px;
    border:3px solid cyan;
}
.parent div {
    border:3px solid red;
}
[code]

[color=#0BBFFF]index.htm[/color]
[code]
<html>
<head>

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

</head>
<body>
<div class="parent">
    <div>I'm just a child!</div>
</div>
</body>
</html>
[code]

and the third way is to put them as attributes into your elements

[code]
<div style="border:1px solid yellow;width:300px;height:300px;"></div>

---

By now you should have a basic understanding of how CSS works, and you can start writing your own styles.
So here are some links to help you find the right properties

W3.org - Full Property Table
Eskimo.com - All CSS Properties Listed Alphabetically

---

Thank you for reading!

[Viciousness]

Oooo, I haven't read all of it yet as I'm in school at the moment but I definitely will later.

It looks great.

[Gaijin]

Oooo, I haven't read all of it yet as I'm in school at the moment but I definitely will later.

It looks great.

Thx, I was only going about the CSS syntax....
The properties are left to the readers, to learn on his/her own.

[zone]

I suggest you to change it title to part 1. And request you to make a CSS Advanced tutorial of Part2.

That's awesome. I bookmark your tut, and will defentely suggest others to read your as a reference. Thanks for share bro.

[Gaijin]

I suggest you to change it title to part 1. And request you to make a CSS Advanced tutorial of Part2.

That's awesome. I bookmark your tut, and will defentely suggest others to read your as a reference. Thanks for share bro.

Done, Will do, and Thank you very much.

But I can't say when I'm gonna post the part 2, I look to do it when I find some time.
After/Next Week.

[zone]

Done, Will do, and Thank you very much.

But I can't say when I'm gonna post the part 2, I look to do it when I find some time.
After/Next Week.

Thank you Ninja bro that you accept my request. No problem . If you need any help, I am here to help you.

[Awesome]

As the awesome guy I am I of curse knew everything but it's a good tutorial to help newbies.

Good job man, i hope part 2 is coming soon.