User blog:Penguin-Pal/Tutorial - CSS - Part 2

Hello again,

This is the second part in the CSS tutorial that i post. This part contains the syntax of CSS and how it works.

So, first of all, before learning CSS, it's important to learn the structure of a HTML document. As you know, there is the opening &lt;html&gt; tag, and inside it there are the other tags. It looks about like this: Test document Hello world!  List item 1 List item 3  List item 3			 

On this example you can see- and i added spaces so it is very clear- the body tag. It has inside it the following tags: But as you can see, only the li and span are first placed in other tags before the p tag: Tags that are found directly after another tag are called children, and the container of a "child" is its parent. A parent can have more than one child (e.g. the unordered list at the top).
 * p
 * ul
 * li
 * span
 * The li tags are placed inside a ul tag that is placed in the p tag.
 * The span tag is placed first in a li tag, which is placed inside a ul tag that is placed in the p tag.

How it works
The idea of children and elements inside other elements is what makes the CSS detect a particulart element. The structure of a CSS code looks like this: selector { style } First of all, here is a list of selectors: Those are the most used selectors (for a more detailed list, see this page). You can play with them and combine them as well.
 * The selector specifies what part(s) of the document to select.
 * The style is where you place the styling that you want to apply.

For example: ul#chocolate > li:first-child:hover Will select the first "li" element when hovering above it- only if its parent is a "ul" element with an id of "chocolate". The HTML that will trigger this looks like this: first child (HERE!!!!) second child third child 

So no, lets move on for the styling. The styling actually looks exactly like the value of the "style" attribute in HTML: The entire styling is put between a pair of curly brackets ({}) and comes after the selector.
 * A colon devides between the property to its value.
 * After a value a semicolon is added.

For example: selector { font-size: 14px; } Note that usually white spaces are added between the lines to make the text tidier, and making finding properties or values easier, like this: selector { font-size: 14px; }

Lets try this out. Suppose you want to paint all the "span tags" in red. What do you do? (please think of it first! only check after you though of it)

If you got it right- well done! If not, don't worry :) after a little practice you will be more familiar with CSS, and it will come to you more naturally.

Comments
You can add comments inside CSS files. It is done using: /* write your comment here */ It is extremely helpful in case of future updates.

Saving a CSS file
Css files have an ending of .css Just like in HTML, make sure that the "save as type" is set to Cascading Style Sheets (*.css) or to All files (*.*).

Important
There are 3 levels of stylings: The styling in the style attribute is always the dominant, and styling in the HTML document itself is more dominant than CSS that you import from other pages.
 * 1) Imported stylesheets.
 * 2) CSS in the current HTML document.
 * 3) Styling in the style attribute.

In case there is a conflict between one style to another, and there is need to make the styling that is not affective dominant, add after the value of the necccesary property the word !important (before the semicolon).

However, don't use it if the code doesn't need this addition in order to work properly- only use it when it's needed.

So...
That's all for this part. For the last part of the tutorial, click the link to part 3 below.