Css

CSS- 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 ust put your html tag called the selector before the curly brackets and inside the brackets decide which
properties you want to use to gi!e you tag some style"
CSS C#$SS%S

– the synta& inside the style tag looks like this:
1" "something{color:black;} '(
)" h1"something{color:black;}
when calling a class element ust add class*+css,name+ -- for instance .h1 class*+something+/some te&t.0h1/
Css classes are use for multiple elements in the html body"
CSS I1 s
– the synta& inside the style tag looks like this:
1" 2some,name{color:black;}
3he difference compared to the classes in css is that it is used for a uni4ue element for instance if you ust want it to use
for the element called paragraph p in html .p/.0p/ than it would look like this" Inside the style tags you would ha!e to
put 2name1{color:black;} and inside the body tag you would put .p id*+name1+/somete&t.0p/"
3o sumeri5e it all" 6se id7s for only certain elements and classes for a group of elements"
- 3he css id8s within the : tags don8t work see why9
:or e&ample:
2first a: ho!er {color: green;} 00 this doesn8t work
a: ho!er {color: green;} 00this works- but I don8t want it that way
%&ternal Style Sheet
$n e&ternal style sheet is ideal when the style is applied to many pages" ;ith an e&ternal style sheet- you can change the
look of an entire ;eb site by changing one file" %ach page must link to the style sheet using the .link/ tag" 3he .link/
tag goes inside the head section:
<link rel="stylesheet" type="text/css" href="name.css"/> (example with VS2012)
<ultiple html tags in Css
If you want to add multiple html tags to css properties for e&ample if you ha!e 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 e!ery html but you can also =which
is a better solution> add commas after e!ery tag and by that you also apply the property to the other inline html tags"
%&ample
table- th- td{border;1p& solid black;}
?seudo-Classes
CSS pseudo-classes are used to add special effects to some selectors.
3he synta& 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 e&ample of the pseudo-class is shown below
a:ho!er{color:black;} '(
p:first-letter{color:blue;}
-remember: this classes are built-in classes=first-letter- ho!er>" 3his things in brackets are called
pseudo-elements"
<ultiple I1%@3IC$# html tags in css
Identical html tags inside css .style/ tags is reffered to the folowing -
e&amples:
1> div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}

)>
nav ul ul {
background: #5f6!5; border"radius: #px; padding: #;
posi$ion: absolu$e; $op: 1##%;
3& nav ul ul ul {
posi$ion: absolu$e; lef$: 1##%; $op:#;
}
'& nav ul ul li a {
padding: 15px '#px;
color: #fff;
}
"()is iden$ical )$ml $ags inside css are read as folo*ing: 1.& a image inside $)e
div image +.&a ul or unordered lis$ inside $)e main so called $)e paren$ ul and $)e
naviga$ion $ab ,- c)ild ul inside $)e paren$ ul and all inside $)e .nav/ )$ml
$ag. ... '.& a )ref inside a li inside $)e ul inside $)e main ul and $)e .nav/ all
sorounding )$ml $ag.
Child selectors
child selectors as the name says are nothing else but html tags inside css wich are childs to a parent html tag" 3he synta&
use for child selectors is the folowing
parent,hmtl,tag/ child,html,tag{properties:!alue;}
for e&ample
• p / a{color:black}
• na! ul li:ho!er / ul { 00 this means actually all the li ho!ers witch ha!e child8s ul7s display a block for them"
display: block;
}
• di!/a:ho!er{color:red;}
one <'(% %&cellent e&ample on when to use parent/child or A3B% I@SI1% #'CICD
e&ample on the drop down menu:
na! ul ul li:ho!er/ul {
position: absolute; left: 1EEF; top:E;
}
00 all the uls wich are childes to na! ul ul li:ho!er Gcode
na! ul ul ul {
position: absolute; left: 1EEF; top:E;
}
00 all the uls wich are encapsulated in other uls and where these other uls are encapsulated within the
main ul,na!Gcode
3he parent/child and the AI@SI1% #'CICD gi!e the same output"
1ifference between child Selector and $ll selector
HTML,CSS – important tin!s, conclusions, clari"iyin! stu""
5-inde& for o!erllaping- depends on the hierarchy if the abo!e element is 5-inde&
higher the element will o!erlap the down 5-inde& element"
$lso if for e&ample you put a negati!e 5 inde& on a html element the pre!ious
elemen=for e&ample a drop down menu> will be able to o!erlap this element because
of the negati!e 5-inde&"
?ostioning