8CSS- the main things

If you want to apply basic css rules to html tags use the folowing:
h1{color:black}
p{color:black;}
table{background-color:blue;}
In other words just put your html tag called the selector before the curly brackets and inside the brackets decide which
properties you want to use to give you tag some style.

CSS CLASSES

the syntax inside the style tag looks like this:

1. .something{color:black;} OR
2. h1.something{color:black;}
when calling a class element just add class="css_name" ,, for instance <h1 class="something">some text</h1>
Css classes are use for multiple elements in the html body.
CSS ID s

1.

the syntax inside the style tag looks like this:

#some_name{color:black;}

The difference compared to the classes in css is that it is used for a unique element for instance if you just want it to use
for the element called paragraph p in html <p></p> than it would look like this. Inside the style tags you would have to
put #name1{color:black;} and inside the body tag you would put <p id="name1">sometext</p>.
To sumerize it all. Use id's for only certain elements and classes for a group of elements.
-

The css ids within the : tags dont work see why?
For example:
#first a: hover {color: green;} // this doesnt work
a: hover {color: green;}
//this works, but I dont want it that way

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link>

tag goes inside the head section:

<link rel="stylesheet" type="text/css" href="name.css"/> (example with VS2012)

Multiple html tags in Css

If you want to add multiple html tags to css properties for example if you have a table and you want to modify not only
the table but the cells and rows as well you could create separated css properties for every html but you can also (which
is a better solution) add commas after every tag and by that you also apply the property to the other inline html tags.
Example
table, th, td{border;1px solid black;}

Pseudo-Classes
CSS pseudo-classes are used to add special effects to some selectors.
The syntax is the folowing:
selector:pseudo-class{property:value;}
css classes can also be used with pseudo-classes:
selector.class:pseudo-class{property:value;}
for instance, an example of the pseudo-class is shown below
a:hover{color:black;} OR
p:first-letter{color:blue;}
-remember: this classes are built-in classes(first-letter, hover). This things in brackets are called
pseudo-elements.

Multiple IDENTICAL html tags in css

Identical html tags inside css <style> tags is reffered to the folowing ,
examples:

1)

div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}

2)
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;

3) nav ul ul ul {
position: absolute; left: 100%; top:0;
}

4) nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
-This identical html tags inside css are read as folowing: 1.) a image inside the
div image 2.)a ul or unordered list inside the main so called the parent ul and the
navigation tab OR child ul inside the parent ul and all inside the <nav> html
tag. ... 4.) a href inside a li inside the ul inside the main ul and the <nav> all
sorounding html tag.

Child selectors
child selectors as the name says are nothing else but html tags inside css wich are childs to a parent html tag. The syntax
use for child selectors is the folowing
parent_hmtl_tag> child_html_tag{properties:value;}
for example

p > a{color:black}
nav ul li:hover > ul {

// this means actually all the li hovers witch have childs ul's display a block for them.

display: block;
}

div>a:hover{color:red;}

one MORE Excellent example on when to use parent>child or THE INSIDE LOGIC
example on the drop down menu:
nav ul ul li:hover>ul {
position: absolute; left: 100%; top:0;
}
// all the uls wich are childes to nav ul ul li:hover code
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
// all the uls wich are encapsulated in other uls and where these other uls are encapsulated within the
main ul_navcode
The parent>child and the INSIDE LOGIC give the same output.

Difference between child Selector and All selector

HTML,CSS important things, conclusions, clarifiying stuff

z-index for overlapping, depends on the hierarchy if the above element is z-index
higher the element will overlap the down z-index element.
Also if for example you put a negative z index on a html element the previous
element(for example a drop down menu) will be able to overlap this element because
of the negative z-index.

POSITIONING
Static: the default position of an element, object, the normal position
Fixed:

primarily used for navigation (scroll up-down) purposes, a element which is fixed

positioned stays there no matter how much you scroll your page

Absolute: Absolute positioning allows you to remove an object from the typical flow of the
document and place it at a specific point on the page. When applying this property you must
specify the left or top or bottom or right postion, without it, it won't work. Absolute position
starts from the upper left corner(BUT THIS IS NOT TRUE, ATCTUALLY IT IS COMPLETELY
FALSE!) throughout the document depending where you want to place your object. When
something has absolute positioning applied, it neither affects nor is affected by other elements
in the normal flow of the page. We do this with the top, bottom, left and right CSS properties.
Normaly you use absolute position when you want your elements which will be aboslutely
postion , you want it out of the normal flow

Relative: Relative positioning works similarly to absolute positioning in that you can use top,
bottom, left and right to scoot an object to a specific point on the page. The primary difference
is the origin or starting point for the element. As we saw above, with absolute positioning, the
starting point was at the very top left of the browser window. The origin also know as the
starting points depends on the position of the object where it would normally be (normally be
means that position:static is applied or no position is applied

-relative positioning doesn't affect the normal flow of the elements of the other page,
when applying relative position to a certain element the other elements stay still that are not
affected(the other elements do not move neither are they displaced).

THE REAL THING ABOUT POSITIONING

it doesnt always default (ABSOLUTE POSITION) to the top left of the browser window.
Instead, what position: absolute; really does is position the element relative to its first nonstatically-positioned ancestor(inherit doesnt count either). Since there hasnt been one of
those in previous examples, it was simply reset to the origin of the page.

See more:http://designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning/
All in all
-everytime you want to make a div, first position

FLOAT

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up
or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the
left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:

DISPLAY &V ISIBILITY

The display property specifies if/how an element is displayed, and the visibility
property specifies if an element should be visible or hidden.
There are 4 values of the display property: inline, block, hidden, none
-inline: displays elements, object whatever they are all in one line.
-block: displays elements, objects whatever they in a block (square model, like
a special box.

-none: remove alll elements, objects.

Elements also have a property called visible which have values of: hidden,
collapse (elements are self explanitory and easy to use).

CSS BOX MODEL