Specificity

to minimise time spent hunting for bugs need to understand how browser works

determines which css rules are applied and ignored by the browsers
ie. which css rules are more or less important

specificity determines which rules takes precedence

usually the reason why rules don't apply to some elements

every selector has its place in the heirachy

if 2 applied - highest wins

4 categories - inline styles, id, classes, elements

when equal - rule appears last is rule applied

unequal - more specific is applied

with more specific has greater specificity

rules stored within embedded style sheet has greater specificity

rules embedded within document have greater specificity than other rules

id selectors have higher specificity that attribute selectors

always use ids to increase specificity

any universal or inherited selected has specificity value of 0 0 0 0


p {background-color:#06C;}
p {background-color:#F00;}

#text {background-color:pink;} /* 0,1,0,0 */
body p {background-color:green;} /* 0,0,0,2 */
p {background-color:red; font-weight:bold;} /* 0,0,0,1 */
p.one, p.three {background-color:yellow;} /* 0,0,1,1 */ = class is used
html body p.one {background-color:yellow;} /* 0,0,1,3 */
html body p#text {background-color:yellow;} /* 0,1,0,3 */
/style>
/head>

body>
p class="one" id="text" style="background-color:F00">content /p> br/> /* 1,0,0,0 */
p>content /p> br/>
p class="three" id="text">content /p> br/>
pcontent /p> br/>

How is specificy calculated
calculated on the highest digit in the specificity = number of elements
if class is used - takes priority

if no conflict - rule will be applied
0=inline embedded, 0=id, 0=class, 0=element
id is preferred use for specificity

Display property to create a display system

body>

ol>
li> a href="#">home /a> /li>
li> a href="#">about us /a> /li>
li> a href="#">information /a> /li>
li> a href="#">people /a> /li>
li> a href="#">contact us /a> /li>
li> a href="#">FAQ /a> /li>
/ol>
/body>

an ordered list creates boxes across the entire line
ol & li are block boxes
a elements & span elements are inline elements - can be all on same line

style type="text/css">
#nav li {
display:inline;
list-style:none;
}
b {
display:block;
}
p {
display:none;
}
/style>
/head>
body>

ol id="nav">
li> a href="#">home /a> /li>
li> a href="#">about us /a> /li>
li> a href="#">information /a> /li>
li> a href="#">people /a> /li>
li> a href="#">contact us /a> /li>
li> a href="#">FAQ /a> /li>
/ol>

text text text text text text text text text text text

one two text

/body>

can be useful for visibility but not for printing

Print

optimise css style sheet for print media
should consider adding in a print specific style sheet

eg - the browser removes the background for print

2 ways of achieveing the same result

link rel-"stylesheet" type="text/css" href-"css.css" media="screen, handheld"/>
link rel-"stylesheet" type="text/css" href-"print.css" media="print"/>


css document

h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:1.2em;
color:#F90;
}
p {
font-family:Verdana, Geneva, sans-serif;
font-size:.7em;
color:#CCC; }


When printed to pdf - there are no styles - defaults - needs to be overridden in the print css style sheet


Second method:

style type="text/css">
@media screen
{
styles for media
}
@media print
styles for print
}
@media screen,print
{
styles for screen and print
}
/style>

Tips for optimising for print

font sizes - print media preferred is points - 11 or 12pt = 1em or 100%
remember % and em are relative

if site has fixed width, doesn't translate well with some browsers for print
can be cropped or shrunk to fit - ideally width needs to be set to width:100%;

remove a component: inside print eg.
p {
display:none;
}
don't forget to change font sizes to points & width to 100%

Clear Property

clear:right; - will clear everything on right
clear:left; - will clear everything on left
clear:both; - will clear everything on right & left

generally use - clear:both;

What the clear property does
It takes the top margin property and sets to size it would need to push it down below these elements

to add extra gap - place margin-bottom on content and sidebar containers

Shorthand

style type="text/css">
div#box {
width:300px;
height:300px;
background-color:#99f;
padding-left:>100px;
padding ....
}
/style>
/head>

body>
div id="box">content /div>
/body>

Shorthand
Padding goes - top right bottom left - top clockwise
padding: 100px 140px; = 100px top and bottom & 140px right and left
margins have same principal
border-width same principal
border-style same principal
border-color same principal



style type="text/css">
div#box {
width:300px;
height:300px;
background-color:#99f;
padding:100px 110px 120px 140px;
margin:10px 20px 30px 40px;
border-style:solid dotted dashed double;
border-width:1px 2px 3px 4px;
border-color:green yellow blue black
}
/style>
/head>

body>
div id="box">content /div>
/body>

Important Rule

When there is a specicifity conflict between 2 selectors that may have same specicifity value

Mainly used for debugging when conflict may occur

Way of making css cascade but also have the rules u think crucial always applied
If has the important property - will always be applied - no matter where the rule appears within the document or conflict occurs

head>
meta ...
link href="styles.css" rel="stylesheet" type="text/css" />
title>!important /title>
/head>

body>
div id="important">
p>text text /p>


/div>

/body>



Style sheet - conflict
p {color:#0C0;}
p {color:#F00;}
second rule is applied -

p {color:#0C0 !important;}
p {color:#F00;}the important rule overrides any conflict

#important p {color:#0C0;}
p {color:#F00 !important;}

if rule is not being applied - try the important rule
if still nothing happens - check for typos/selectors

the more !importants in doc - the more problems site can have

preferable use to debug - then fix the proper way

Embedded styles

Embedded in head of document - only effect content within that document
style tags inside head element
underneath title - put comment tags around the css tags embeddedin document
some browsers don't support css - these will read these as comments and ignore the css - ignore within the comment tags
style type="text/css">
!--

-->

/style>

when embedding css in document don't forget style tags & type attribute with the value text/css
embedding css within doc is best
good for: logs gadgets widgets template driven sites
larger more complex - not efficient to embed all css within each document - other options are available

Descendant selectors

More advanced selectors
HTML are made up of elements which can hold other elements -
html>
head>
title>
body>

Parent / child relationships

html - parent of head - ancestor of title
head - child of html - parent of title
title - child of head - decendant of html - never has any children - neither does an image element

html - parent of body - ancestor of all below
body - child of html - parent of div - ancestor of p and strong
div - child of body - parent of p - ancestor of strong
p - child of div - parent of strong
strong - child of p - descendant of div

html - parent of body
body - child of html - parent of div
div - child of body - parent of h1
h1 - child of div - descendant of body

example:

ol a {
background-color:#F00;
}
will only effect elements within any ordered list

to be more specific
# menu ol a {
background-color:#F00;
#footer ol a {
background-color:yellow;
}

div#extra = div with the child of extra
div #extra = div with the descendant of extra

div#extra ol li img {
background-color:red;
padding:1em;
}
allow to write clean css - allows to name key elements - container, header area, content area and use descendant selectors to pick out which elements within those areas to format - saves time and easier to update

Float 2

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>Untitled Document /title>
style type="text/css">

#content {
width:30em;
background-color:#C3F;
float:left;
padding: 0 0 0 11em;
clear:both;
}
#sidebar {
width:10em;
background-color:#0C0;
margin:0 0 0 -41em;
float:left;
}
#footer {
width:41em;
background-color:#C00;
clear:both;
}
/style>

/head>

body>
div id="content">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text /div>
div id="sidebar">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text /div>
div id="footer">text text text text text text text text text text text text text text text text text text text text text text text text text


/body>
/html>

Margins - collapsing

Collapsing margins are useful - can be fidly and annoying
remember - margins are outside borders, padding is inside borders

p{
margin:0;
padding:1em 0;
(margin? - inserted 1em of padding for each p element - adding border below shows this)
border:1px dotted pink;
}
Try
p{
margin:1em 0;
padding:1em 0;
(margin collapses - margin moves up until it touches the border of the other - they overlap until one margin touches edge of the border of the other element)
border:1px dotted pink;
#two {
margin-top:2em; (will extend until it touches the border of previous element - the area inside the border are solid objects - around that the margin creates a shield - shield of one element cannot go into a solid object, but the two margins can overlap)
}
/style>
/head>
body>
p>During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
p id="two">During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
p>During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
p>During the first Internet boom, the most common business model was
probably, "get a ton of traffic, then figure out how to make money" /p>
/body>

User Agent Styles

An application that renders web pages, ie a web browser: Explorer, Mozilla, Safara, Opera - come with built in style sheets

visit mozilla.org to find out more info about changing the user agent style sheet

Styles sheets we have applied are called: Author styles

User style sheet: created by end user - allows user to overide any styles, whether from user agent or author - designed for people who may have disabilities, eg. visual increase for partially blind or if colorblind - every hyperlink must contain an underline

Author style sheet; user agent style sheet; user style sheet

Not well known that end users can modify user style sheet - not even web developers are aware

Conflict between user agent, author and user style sheets
Resolve - source is considered
Author style sheet can override user agent style sheet
User style sheet can override user author style sheet

In most cases author style sheet will win unless the user has written a style sheet

Group - Selectors

Assigning single selector to every declaration blocks can cause code to bloat

clumsy code=

style type="text/css">
h1 {text-decoration:underline;
h2 {text-decoration:underline;
h3 {text-decoration:underline;
h4 {text-decoration:underline;
h5 {text-decoration:underline;
h6 {text-decoration:underline;
}
/style>
/head>

body>
h1>header /h1>
h2>header /h2>
h3>header /h3>
h4>header /h4>
h5>header /h5>
h6>header /h6>
/body>

cleaned-up code - group selector

style type="text/css">
h1, h2, h3, h4, h5, h6 {text-decoration:underline;}

/style>
/head>

body>
h1>header /h1>
h2>header /h2>
h3>header /h3>
h4>header /h4>
h5>header /h5>
h6>header /h6>
/body>

don't place a comma after last selector - code will not apply
not limited to h1 elements - order doesn't matter - NO COMMA at end
can also be applied to any type of selector: class, ID, html element selectors

style type="text/css">
h1, h2, h3, h4, h5, h6, p, .green {text-decoration:underline;
background-color:#3CC;}

/style>
/head>

body>
p class="green">text /p>
h1>header /h1>
h2>header /h2>
h3>header /h3>
h4>header /h4>
h5>header /h5>
h6>header /h6>
/body>

create a new style sheet - Styles.css
create link within html
link rel="stylesheet" href="Styles.css" type="text/css" media="all">

now go into style sheet and make some rules

/* CSS Document */
body {font-family:"Times New Roman", Times, serif;}
this font family will be inherited unless otherwise specified by all decended elements in the document
h1, h2 {font-family:Verdana, Geneva, sans-serif;
color:#39F;
font-size:2em;
}
p, ol{
color:#111;
font-size:1em;
}
back to html file - headers are formatted - but not in Times

second header:
h2>About CSS /h2>

Import Style Sheets

title>page one /title>
meta http-equiov="content-type" content="text/html; charset=iso-8859-1">
style type="text/css">

@import url(CSS/LayoutDONE.css);

/head>
body>
div id="container">
div id="header'>
ul>
li> a href="about.html">about /a> /li>
li> a href="blog.html">blog /a> /li>
li> a href="rss.html">RSS /a> /li>
/ul>
/div>

in order to use the import command need to use the style element
import location of url or uri file within brackets

Two different methods of importing css
Link = uses xhtml
Import = @import is css syntax

to import cascading style sheets - use import method

both work well in most cases

Reasons developers use @import
older browsers dont recognise @import so can hide styles from them
can use just one link element & one master css file - then use one @import instance inside the master css file to import further css documents - allows to organise and structure their css

using link element
it allows to specify an alternative style sheet
allows to interact with css using javascript

can use a combination

Dreamweaver

Pseudo class = tries to be a class but isn't quite
appears in css not html - adds functionality

css2 pseudo classes =

ul has a default margin & padding included therefore set margin & padding to zero

Web Publishing Wk 4

Inline & Block Level Elements

2 main types of elements
block level
inline

when you insert some elements - stay on same line eg.
b>bold /b> em>text /em> p>text /p>

p> is a block level element - goes onto new line
b> em> inline elements - stay on same line

inline - takes up immediate area
block level - takes as much space as possible

Tags:
Inline: bold, emphasizes, italic, strong, span
Block Level: header 1 - 6, paragraph, div, lists

Tested using background color as suggested

Should never place a block level element inside an inline element, eg.
em>text div>div /div> /em>

Can place inline element within block level element.

Linking - Ext Style Sheets
External styles - written in separate doc - linked to various web docs such as html
Any changes to ext doc will effect any doc linked to it

Benefits
allows to sep content from presentation
can hold all the styles/rules for website
simply edit style sheet - all pages linked will be updated
save bandwidth - only needs to be loaded once
hosting includes how much data is downloaded from the server
save time and money - allows to create a more flexible easy to maintain site

link element creates a link to another document:
link rel="stylesheet" "type="text/css" href="CSS/styles.css" "media="all">

/head>

copy & paste within each of the documents to be link

Main document:
link rel="stylesheet" "type="text/css" href="CSS/styles.css" "media="all">

/head>

click on CSS - double click on folder
em>@charset "utf-8";
/* CSS Socument */

body {

background-color:#CCF;
}

h2 {
font-family:Verdana, Geneva, sans-serif;
font-sie:2em;
color:#09F;
}
body p {
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
color:#111;
}

any changes made in the style sheet will update all pages


Linking Two
linking 2nd style sheet - change address - put link in all documents
conflicts - methods in place to decide which overrides the other

comment in css - good idea to comment to organise styles, eg. fonts, format text, headers, etc.
/* comment */


advantage of using multiple ext style sheets
can store all layout rules in one css doc
can store all text rules in another css doc


Border of elements
/head>
style type="text/css">
#one {
background-color:yellow;
border-width:thin;
border-style:solid;}

#two {
background-color:red;
border-width:medium;
border-style:dashed;}

#three {
background-color:green;
border-width:thick;
border-style:double;}

body>
span id="one">box1 /span> span id="two">box2 /span> span id="three">box3 /span>

/style>
/body

be aware that the browser decides how thin/thick the border is when using keywords
can still use px for width, eg.border-width=10px; or 5em

Blue box, solid border - diff px, styles diff, color


#one
border-top-width:1px;
border-right:2px;
border-bottom:3px;
border-left:4px;
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:ridge;
border-left-style:hidden;
background-color:#0CF;
width:300px;
height:300px;
border-color:green;
border-top-color:red;
border-bottom-color:yellow;
}
/style>

body>
div id="one">box1 /div>

/body>


Padding
Controls distance between content of element and outer padding/border

/head>
style type="text/css">
#one {
padding-left:30px;
padding-top:0px;
padding-bottom:30px;
padding-right:0px;
background-color:#CCC;
}
/style>
body>

can also be specified using percentages, eg. 30% instead of px

Floating
Old technique for web - can be adapted to many elements including header

Insert text & image - wrap text
body {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
img {
border:#999 1px solid;
padding:5px;
background-color:#CCC;
float-left;
margin:10px 10px 10px 0px;
}
h1 {
font-size:24px
color:#09F;
}
/style>
/head>

Dreamweaver

AP Divs used in combination

Positioning

Static
Relative
Absolute designed elements are positioned in relation to the parent
Fixed - stays in position when scrolling

Web Publishing Wk 3 - Margins

Margins to space & separate elements

element gives a margin above & below element = 1em top & bottom - provided by the browser - so is relative to browser used
best to set margin to 0

strong element is a block element not inline

header

text text

new

header

Text text text text. text text text text text text text text

Web Publishing Wk 3 - box

box model - box or rectangular container

Content - Background color - Padding or spacing - Border - margin (invisible)

Using margin - can position elements on page

div element will take up maximum width it can

by default - set to zero
padding is added to height & width
background image will appear within the padding and the height & width
border will also be added to height & width in some browsers
margin is 100px

text

remember that this would be 220px by 220px or in some browsers 222px by 222px
margin on outside of box 100px

Web Publishing Wk 3 Span

span tag

designed to add structure as an inline level element
span & div tag not interchangeable

use div tag for main compents as block level element
use span tag for structure control for inline element

we can't place block level element within an inline element

This appears to be a scam of the simples

not just limited to formatting text - can be used on a wide variety of elements

Web Publishing Wk 3 div

div

Use div tag to organise content into sections

name of company

google
yahoo
live

ALERT:

May 26th

As with the recent spate of

According to

Daniel Fitzsimmons @ 2006-2007

Wk 3 - Web Publishing

ID Selector

Similar to class - not identical

header

add to css

header

should only use ID selector once in document - bad practice to use more than once

When do we use ID Selector - when going to apply the rule to one element in the document - only use for key components - only used once

more selective - don't use any spaces - ID tag is case sensitive - be consistant
h1#header
will only use when