Specificity

important issues related to specificity
determines which css rules are applied to the browers and ignored.
which are more important and less important
it will choose takes preferece
if 2 selecters are in one element - one that has priority wins.
1/ determines which css rules are applied by the browswer
2/ the reason why the css rules dont apply to some elements, although you think they should
3/ every selecter has itz place in its specificity highracy\
4/ if 2 selecters apply element, the one with the highest specificity wins
5/ 4 distinct catagories, which define the spec level of a given selecter
these are:
inline styles
ids
classes
elements
6/ when selecters have = spec values, the rule that appears last is the rule that is applied tot he element.
7/when selecters have unequal spec value the more specific rule is applied to the element
8/ rules with more specific selecters, have greater specificity.
9/Rules stored within the imbedded style sheet have greater spec,than other rules asscoiated with the document
10/ rules imbedded withing the document, have greater spec than other rules asoc with the doc
11/id selecters have higher spec values than attribute selecters
12/ always try to use ids to increase speficity
14/ any universal selecters or inherited selecters have a spec value of 0 0 0 0

Display property

to create a menu system
can use the display element to manipulate
eg
id id='nav'
then in css
#nav li {
display:inline;
}
that will put the ordered list next to each other
the listed items are gone - firefox removes them, but not all browswers do.
list-style:none; will remove the ol (1234 etc)

b element as a block element will take up the whole line. display:block
p elements to display:none;
this value is a great property for pop ups etc.. or hide elements on screen until printed like page title.

Print

styling your document for print
will get rid of things like background that would chew up ink etc.
you can put it in link rel ........ media='print"
or
within you style
@media screen, print{
}
you can set your font size eg 1em in print media

fixed width - doesnt translate very well when going to print, can be shrunk, some others if content exceeds, it can be cropped.
for print media - we want the width set to 100%
we want font set to 11 or 12 pt

Clear property

clear left will clear everyting on the left
clear right will clear everything on the right
clearr both though is the one we want to use - it will clear both left and right.
it takes the top margin property and sets it to the size that it need in order to push it down below these elements.
put margins on a cleared element you need to put a margin on the botton of the others.

Clear property

Shorthand

tips for saving time by using shorthand.
shorthand way of doing padding egs
padding: 100px 110px; 120px 140px;
this way - if you think like a clock, it will go around.
or top right, bottom left.
another method:
100px 140px;
this one will apply 100px for top and bottom140 will apply to the left and right.
borders
1px 2px 3px 4px
top right bottom left
1px 4px
top bottom, right left.
doesnt just apply to integers. can do with borders styles etc
border color
border-color: green black
top bottom, right left.

Important

important rule is put into play - when we have a conflict between 2 selecters that may have the same specicifity conflict.
if in a conflict the first rule willb e ignored
putting !important in the first rule it will override any conflict
the more important you have on your style sheets, the more problems you will run into.
use the important directive to find out the bug, but then fix it, and take it out.
only use it to debug.

Embed

Embeded styles are styles that are embeded in the head of the document. they will onnly effect styles within that document.
comment tags.. there are browsers that doesnt support css so it will ignore it.

padding

padding controls the distance between the content of an element and its outer padding or its border
you can specify the thickness on top right left and bottom

descendant

more advanced selecters.
elements can hold other elements, all these elements are connected together, called parent child elements.
mozzila .com
eg. if you type in ol a... any a element within the ol will be effected.. anything out of the ol element, even if it is an a element, will not be effected as its not a descendant of the ol.
div#extra ol li img {
}
if it's a child not descendant, no space
so anything within the div id extra ol li img will do as within the element

margins

margin on a p tag will change the height
using padding, between each text there will be double the ems
margins wont
margins overlap. where padding doesnt

Float

anything can be floated
cant see the page or really hear the video
negative margin trick
using minus so it moves backwards
clear can be used to keep from other elements clashing. bit dodgy with iexploer tho

User styles

user agent styles
comes with built in style sheets
become the corner stone for our styles,
there is an author style sheet.. ones we write
default style sheets
user style sheet - created by the end user. it allows the end user to overide any styles - purpose, designed for people who may have disabilities..

selecter

using a single selecter can bloat
you could repeat the selecter individually,
using multiple selecters
eg,
h1, h2, h3, h4, h6 etc
make it nice and tidy.
Make sure u sont place a commar after the last selecter.
you can also add things like p
and add bg colors
then all the elements will have the same selecter
can be placed to a class, id or html selecters
eg. .green in head.. then put in body class="green"
link rel="stylesheet" href="style.css" type=text/css" media"all" to link the css

if u put body then pick what font etc u want, then all will be the same unless you specify otherwise.

Import

you need the style command to import
@import url(css/layoutDONE.css);
placing in the brackets

link allows the developer to specify an alternative style sheet

float

floating

wrapping text around an image

float-right or left

there is no float center
this is in the img
margin will put it around the pic
eg: margin:10px

u can put a float around a header

Border

border of elements

span elements create 3 rectangular boxes

border-width: thin, thick and medium.
border-style: solid, dashes dotted etc

tip - with our border width, specifying using keywords the actual thickness is left up to the browser - checking in diff browser, may be diff and cause some issues

Integer values... 10 px - or 10ems - etc can be used for border width.

width and height properties of a box
just put
width:30px
height:30px

you can change each border side
border-top-width
right left bottom etc instead of just saying thick
you can also specify the style for each side - just add style where width is.

border colors

overall and individual border colours
border-color:green; - individual
or
border-top:red; - individual
border-bottom:green;

Linking 2

we can link to multiple style sheets
you can simply change the address and place in all your htm documents
your style sheets can conflict.

external style sheets - comments - /"place comments in here"/ - use comments to organise your css styles

advantage of multiple style sheets - u can store all the layout rules within one css document

Linking

external styles are styles that are written ina seperate document. this doc can then be linked to various web docs.
benefits of external style sheets - allows us to seperate our content from presentation, can hold all the styles/rules for your website
save ban width - which saves room when paying for hosting,
allows for a moe flexible and easier to maintain product.
rel stands for relationship - so eg link rel in head...
link rel="stylesheet" type="text/css" href="Css/styles.css" media="all"
this goes inside each of my documents - so then they all have the correct linking information.
when u open a new style sheet - you can add all your head elements and they will apply to all pages

Block & Inline

2 main type of elements
Block - a p tag - header - div
Inline - a b tag - italic - strong - span

block will make a new line and take up as much room as possible - inline will keep on the same line

we should neva place a blockline element inside an inline element. - eg. place a div within a p tag

Margin

MArgins to space and seperate elements in our html documents.
when you insert a

element, by default, a margin on top and bottom will happen = 1px
in a class,
you can type for header or in a group
h1,p {
margin:0
}

p{
margin-top:10px
}
this is an example of how you can control your margins, istead of using your predefined margins.

use display block in the class if you get an inline tage like strong
for image
img{
margin:10px
}
body}
margin:0;
bg color;
you can als specify margins (top, right, bottom and left)

Box Model

every element from a html element contains a box or container.
Background colour - colour outside the content, u can do height and width of bg colour
Padding - added to the height and width, will occusr outside the bg colour & font
Border - will occur outside the padding
Margin -
using a margin, we can position elements on our page.

Box Model

Span

Span tag is designed to add structure as an inline level element.
You can format text

Div

Div tag is used to add structure to our elements. organise components into different sections.
So when you go into the class you can section it.
eg: #menu
#footer
#content
then you can change fonts etc individually

ID

When to use ID:
uses a #
Should only use this selecter once
When to use id: when we are going to apply a rule to one element within the document like key components - like menu.