Introduction to CSS coding
This is a very basic stripped down introduction to CSS coding. It is very useful for the basics of MyBB theme coding.

What is CSS?
CSS stands for "Cascading Style Sheets", it is coding that works together with HTML coding to create a greater visual representation of a website. It is a not a hard language to learn, I pretty much know it like the back of my hand and I've only been using it for 3 and a half months.

Where can I learn more about CSS?
If you simply query the term "CSS Coding" in a local search engine it should show results for hundreds of different tutorials dealing with CSS, this tutorial is going to introduce you to this wonderful web language.

Basic Element Terms:
The following terms can be used in your style-sheet.

Color:
Thisrepresents the color of the text being used, it is used by typing a number sign followed by a 6 numbers/letters the outcome is the hex.

Example: #FF0000; (This means the text color would be red)

Background:
This represents the background of your CSS element, you can use images or color in this code. You can repeat the image by typing "repeat" after your image url/location, you can also choose to repeat it on the y or x axis by typing "repeat-y" or "repeat-x"

Example: #000000; (This would mean my element background is black)
Example: url(insert image url) repeat-x; (This would mean my image is only gonna repeat in a horizontal manner).

Border:
This represents if I want a border around my CSS element, you can control the thickness of the border and the color of the border.

Example: border: 1px solid #FFFFFF; (This would mean that a 1 pixel white border would surround my element).

You can also choose different border styles by using one the following (pretty self explanatory of what style they each are):

p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }


Padding:
Padding allows changes to the "white space" inside of an element, to put it in perspective, if one layer of clothing symbolized 1 px then if you had 5 layers on you would have 5 px of spacing between your arm and the outside of the 5th layer.

Example: padding: 5px; (This would mean that there is 5 px of spacing in every direction: top, left, bottom, right)


Margin:
Margins are nearly identical to the Padding attribute except for one important difference, a margin defines the "white space" around an HTML element's border, while padding refers to the white space within the border.

Example: margin-left: 5px; (This would mean that the element is pushed 5px to the left)
Example: margin: auto; (This would mean that the element is pushed both left and right so it aligns in the center of the page/outer element)

Font:
You can use CSS to select font size, style, family, weight and decoration for your element (if it contains any).

Example: font-weight: bold; (Text would be bold)
Example: font-family: arial; (Text would be arial)
Example: font-decoration: underline; (Text would be underlined)
Example: font-size: 12px; (Text would be 12px in size)

How do I use CSS
If you are using a forum software with a nice CSS interface such as MyBB, then it is a piece of cake to use this coding.

Layout advanced SS
To layout your code in a advanced SS or notepad you must begin with number sign or period (sometimes nothing if the element is universal). Here is what the signs represent:

.element title = "class"
#element title = "id"

The symbol needs to be followed by a title for your element followed by a right facing bracket, after your coding is added (see below) you close the element with a left facing bracket :

To attach the element to your HTML there are several ways to go about it, I will only tell you about the advanced Style Sheet way (Ex. MyBB).

First you have to navigate to an HTML temp. of your choice then based on whether you used a # or . you will put class or id without the symbol.

Here is what I would have to put :
Then it should appear where ever you placed it.

Hope that you like this small introduction.

Very nice intro. CSS plays a huge part in web development these days

CSS are bones for body of good Web project, good point... It is not so hard, but it is important for functionality and look of a web page... If some1 have questions about it, feel free to ask

Many people mix CSS up, they think that using one thing will work on all browsers, yet don't be fooled.
You MUST check your page throughout each web browser and versions!

(02-02-2010 09:40 PM)oToom Wrote:  Many people mix CSS up, they think that using one thing will work on all browsers, yet don't be fooled.
You MUST check your page throughout each web browser and versions!

You are totally right. Browsers are not compatible and they don't read the same codes in the same way !

CSS is a set of formatting instructions for the control displays a Web page or pages. You can build your own layout, adapting the size and color of the headers or body text, and image positioning. This is reflected, for example, the pages are programmed once, and the choice of entering the same code for each of your pages by hand. Translated by eliminating duplicate formatting.

(01-31-2010 01:05 AM)drdebcol Wrote:  You can also choose different border styles by using one the following (pretty self explanatory of what style they each are):

p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }

self-explanatory? What you've forgotten in your tutorial is one of the most important aspects: Selectors. What you've written means the following:
The first rule applies to all p-Elements, that are of the class "solid". They are allowed to have other, additional classes, though.
Now the second rule applies to all p-Elements, that have are of the class "double".

(01-31-2010 01:05 AM)drdebcol Wrote:  Example: margin-left: 5px; (This would mean that the element is pushed 5px to the left)

No, the element is not pushed to the left. It means that the element will be pushed 5 pixels to the right.

(01-31-2010 01:05 AM)drdebcol Wrote:  Layout advanced SS
To layout your code in a advanced SS or notepad you must begin with number sign or period (sometimes nothing if the element is universal). Here is what the signs represent:

.element title = "class"
#element title = "id"

I don't know what is advanced about that. This is the basics of CSS and this entire part is completely incomprehensible and wrong:

Quote:The symbol needs to be followed by a title for your element followed by a right facing bracket, after your coding is added (see below) you close the element with a left facing bracket :

Code:

.example element {

A "title" usually refers to a HTML-Element's title attribute, which has no relation with CSS. Now what this selector really means, is this: Select any element of the type element, that is descendent of any element with the class "example".
However, your HTML example does not apply to this selector.
You would have needed to use ".example.element" instead.

Thx for reply and for comments, i agree with your comments. I wrote that a year ago when i was learning CSS,
because i wanted to improve my design knowledge and not just to care about functionality !
I am not a pro designer so CSS is not my strongest weapon.
THX anyway !