1st of type
p:first-of-type {
font-family:verdana;
color:#3CF
}
the 1st p will get formatted
last-of-type {
}
formats the last of the type
only-of-type {
}
:root {
background-color:purple;
border:2px solid:red;
}
all around the document
Empty
:empty {
background-color:red
border:2px solid
}
:target {
}
enabled
input:disabled+span { color:grey; (when disabled)
font-family:verdana;
font-size:1em
}
input:enabled+span { (when enabled)
color:green;
font-family:verdana;
font-size:1em
}
checked
input:checked+span { (now when an element is checked it will go blue)
color:blue;
font-family:verdana;
font-size:1em
}
* (all
not element
p*:not(q) (everything thats not in the q element will go red)
{
background:red;
:
Tuesday, September 1, 2009
cursor
#box {
background-color:purple;
border:dark purple solid 1px;
width:6em;
height:6em;
cursor:move;
}
#box {
background-color:purple;
border:dark purple solid 1px;
width:6em;
height:6em;
cursor:crosshair;
}
background-color:purple;
border:dark purple solid 1px;
width:6em;
height:6em;
cursor:move;
}
#box {
background-color:purple;
border:dark purple solid 1px;
width:6em;
height:6em;
cursor:crosshair;
}
formatting
text align
inherit, centre, justify.. left and right
p{
text-align:justify;
text-decoration:line-through;
}
you can put overline and underline in text decoration.
where it is used most is with links
(a href)
a{
text-decoration:none;
}
most web users are used to clicking on links with lines under them. so its a good idea to leave an underline
letterspacing
p{
letter-spacing:(in addition to the default value) 1em;
}
so this puts 1em in addition to default on each letter
normal will make default.
word spacing
word-spacing:1em; will space between word elements.
both can be affected be align justify.
text-transform:(alter how the text would appear in the normal flow of the document) lowercase (so this will change everything to lowercase.
captilize make every letter at start of word word a capital.
text-transform:uppercase (makes every letter uppercase)
inherit, centre, justify.. left and right
p{
text-align:justify;
text-decoration:line-through;
}
you can put overline and underline in text decoration.
where it is used most is with links
(a href)
a{
text-decoration:none;
}
most web users are used to clicking on links with lines under them. so its a good idea to leave an underline
letterspacing
p{
letter-spacing:(in addition to the default value) 1em;
}
so this puts 1em in addition to default on each letter
normal will make default.
word spacing
word-spacing:1em; will space between word elements.
both can be affected be align justify.
text-transform:(alter how the text would appear in the normal flow of the document) lowercase (so this will change everything to lowercase.
captilize make every letter at start of word word a capital.
text-transform:uppercase (makes every letter uppercase)
indent
text indent.. allows us to put an indent in the first line of text
to hide content from nonscreen readers, structuring headers off the page.
viewers in firefox, simply wont see the header.
p {
text-indent:1.5em;
width:8em;
}
so in the first line of text there will be a text indent.
you can also use %
to hide content from nonscreen readers, structuring headers off the page.
viewers in firefox, simply wont see the header.
p {
text-indent:1.5em;
width:8em;
}
so in the first line of text there will be a text indent.
you can also use %
pseudo class
hover state can be used on any element on our document.
div:hover{
height:5em;
width:5em;
background-color:pink;
}
so it will change color when u hover
focus
a:focus {
font-size:2em;
color:green;
}
on focus, our hyperlink is going to change - click on it will change or when i tab to it.
first child.
li {
color:green;
}
li:first-child {
font-size:2em;
color:pink;
}
the first child has become pink with 2em
will only match if its the first element of the parent element
lang
:lang (sp) {
color:orange
font-weight:bold;
}
so where the is spanish content, format with these properties in the declaration
not all browsers support the following yet
p:last-child {
color:red;
}
p:only-child {
color:red
}
so where there is an only child of it's parent, it will turn red
first of type
p:first-of-type {
font-family:verdana;
color:red;
}
first of its type in the p element will format in in red
div:hover{
height:5em;
width:5em;
background-color:pink;
}
so it will change color when u hover
focus
a:focus {
font-size:2em;
color:green;
}
on focus, our hyperlink is going to change - click on it will change or when i tab to it.
first child.
li {
color:green;
}
li:first-child {
font-size:2em;
color:pink;
}
the first child has become pink with 2em
will only match if its the first element of the parent element
lang
:lang (sp) {
color:orange
font-weight:bold;
}
so where the is spanish content, format with these properties in the declaration
not all browsers support the following yet
p:last-child {
color:red;
}
p:only-child {
color:red
}
so where there is an only child of it's parent, it will turn red
first of type
p:first-of-type {
font-family:verdana;
color:red;
}
first of its type in the p element will format in in red
Generated content
these allow us to generate content.
we are altering the presentation of the document, not the document itself.
#content:before {
content: "Designed by Daniel";
}
this will then go in before any content.
a counter -
ul {
counter-reset:count;(specified a name for our counter)
}
li:before {
counter-increment:count;
content: "number " counter (count) ": ";
}
we are altering the presentation of the document, not the document itself.
#content:before {
content: "Designed by Daniel";
}
this will then go in before any content.
a counter -
ul {
counter-reset:count;(specified a name for our counter)
}
li:before {
counter-increment:count;
content: "number " counter (count) ": ";
}
pseudo-elements
aloow us to extend our selecter so we can be more specific as to what we want to select, first letter of a paragraph.
eg:
p:first-letter {
font-size:2em;
color:green
}
note css 3.. need 2 ::
p:first-line {
text-transform:capitalize;
}
note not all browsers support this property.
firefox does.
the amount on our first line can change.
*(everything)
*:selection {
background:green;
color:red;
}
any text that is selected by the user will now be highlighted and any text will be coloured red that is selcted.
opera and safari are the only 2 browsers that support this element.
eg:
p:first-letter {
font-size:2em;
color:green
}
note css 3.. need 2 ::
p:first-line {
text-transform:capitalize;
}
note not all browsers support this property.
firefox does.
the amount on our first line can change.
*(everything)
*:selection {
background:green;
color:red;
}
any text that is selected by the user will now be highlighted and any text will be coloured red that is selcted.
opera and safari are the only 2 browsers that support this element.
Line Height
line-height, counts the line of text as part of the line height
you can also count measurments in ims and pixels
1.2em is about the default heieght. but does vary from browser to browser.
you can also count measurments in ims and pixels
1.2em is about the default heieght. but does vary from browser to browser.
Tuesday, August 25, 2009
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
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.
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.
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
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 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.
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.
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.
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.
comment tags.. there are browsers that doesnt support css so it will ignore it.
Tuesday, August 18, 2009
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
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
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
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
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..
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.
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
@import url(css/layoutDONE.css);
placing in the brackets
link allows the developer to specify an alternative style sheet
Wednesday, August 12, 2009
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
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;
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
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
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
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
Tuesday, August 4, 2009
Margin
MArgins to space and seperate elements in our html documents.
when you insert a
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.
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.
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
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.
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.
Tuesday, July 28, 2009
Font weight
refers to the thinkness of text elements.
frmat with css, not forgetting comment taf if it doesnt support the browser
frmat with css, not forgetting comment taf if it doesnt support the browser