CSS3

Rounded Borders - for mozilla & webkit
.border_rounded {
-moz-border-radius:10px;
-webkit-border-radius:10px; = safari,firefox,googlechrome, etc
border:2px solid #09F;

Shadows - only webkit
.border_shadow {
-webkit-border-radius:10px;

Text Shadow
.text_shadow {

Cursor Property

css to control appearance of cursor

style type="text/css">
#box {
/*auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait */
cursor:move; - selection of different cursors available
background-color:C9F;
border#939 solid 1px;
width:6em;
height:6em;
}
/style>

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

Formatting

Text Align

Inherit - Centre - Justify - Left - Right

p {
text-align:justify;
}



Text Decoration
blink - inherit - line-through - none - overline - underline - can combine
used mostly for hyperlink elements


p {
text-align:justify;
text decoration:overline underline;
}
a {
text-decoration:none;
}

/style>
/head>

body>
a href="#">link /a>

/body>

TIP - links preferred to have underline as users are used to them


Letter spacing - allows to control the spacing between the letters - works by allowing to enter length value - in addition to the default value -

letter-spacing:1em; - in addition to default value

can also specify negative values -

letter-spacing:-.1em;

for default value -

letter-spacing:normal;

WORD SPACING
- increases or decreases the spacing between words - can be affected by text-align:justify

word-spacing:1em;

TEXT TRANSFORM - alters how the text would appear in normal flow of doc - changes whether letters are upper or lower case

text-transform:lowercase; - reverts everything to lowercase

text-transform:capitalize; - makes first letter of every word a capital

Determination of what is a "word to capitalize" depends on the browser
currently after a space

text-transform:uppercase; - makes everything uppercase
text-transform:none;
text-transform:inherit;

Indent Property

when a screen reader reads a doc - can read all text inside doc
however - can use text indent to hide content from none screen readers
by using a large neg value - can hide structural headers off the page
can use any other fixed pixel based measurement or points, percentages - 50% would be 50% of the width of the block of text

text-style= text/css">
p {
text-indent:1.5em;
width:8em;
}
/style>

/head>

body>
p>Nothing makes a blog post more eye-catching than a great header
/body>

Pseudo Class

not to be confused with elements - different

Hover pseudo class



style type="text/css">
div {
height:5em;
width:5em;
background-color:#F39;
}
div:hover {
height:8em;
width:8em;
background-color:#3C0;
}
/style>
/head>

body>


/body>



Focus pseudo class

style type="text/css">
a:focus {
font-size:2em;
color:#0F0;
}

/style>
/head>

body>


First Child pseudo class
will only match an element if it is the first child of a parent element

style type="text/css">
li {
color:#009;
}
li:first-child {
font-size:2em;
color:#C3C;
}
/style>
/head>

body>
ul>
li>1 /li>
li>2 /li>
li>3 /li>
li>4 /li>
/ul>


/body>



P lang pseudo class

style type="text/css">
:lang (sp) {
color:#F30;
font-weight:bold;
}
/style>
/head>

body>
p lang="sp">-Habla Ingles? /p
p lang="en">Do you speak English? /p>

p lang="sp">-Habla Ingles? lkf fdjgkd skfjdk gdkst g /p>

/body>



css3 standards pseudo class - not all browsers support these standards as yet
- last child

style type="text/css">

p:last-child {
color:#F00;
}
/style>
/head>

body>
div> - parent
p>text /p> - children
p>text /p>
p>text /p>
p>text /p>
/div>

/body>

- only child

style type="text/css">

p:only-child { - only works when there is only one child
color:#F00;
}
/style>
/head>

body>

div>
p>text /p>
/div>
/body>


- first of type
first of a specified type
style type="text/css">

p:first-of-type { - will change to first of the that type
font-family:Verdana, Geneva, sans-serif;
color:#3CF;
}
/style>
/head>

body>

div>
h2>header 2 /h2>
p>text 1 /p>
p>text 2 /p>
p>text 3 /p>
h2>header 2 /h2>
p>text 4 /p>
/div>
/body>

last-of-type & only-of-type

works as first-of-type

:root {
background-color:#9CF;
border:2px solid #F00;
}

:empty { - formats empty elements
background-color:#9CF;
border:2px solid #F00;
}

can be more specific
p:empty { - only affects the p elements
background-color:#9CF;
border:2px solid #F00;

:target {
backround:red;
}
p {
background:gray;
}
/style>
/head>
body>
p>Link : a href="#pelement">target p element /a>. /p>
p id="pelement">text text text /p>
/body>

hyperlink in first para is linking to #pelement


}

Generated Content

Properties that allow us to generate content - work in conjuction with pseudo elements before & after - keep in mind that although we are generating content, and it does appear within browser - we are not altering the document - just the presentation of the document.
Embedded style sheet:

style type="text/css">
#content:before { - appears before any other content
content:"Designed by Daniel";
}
/style>
/head>
body>
div id="content">
a href="#">website /a>
/div>


Counter:

style type="text/css">
ul {
counter-reset:count
}
li:before {
counter-increment:count;
content:"number " counter(count) ": ";
}
/style>
/head>
body>
ul>
li>one /li>
li>two /li>
li>three /li>
li>four /li>
li>five /li>
li>six /li>
/ul>
/body>

Pseudo Elements

allow to extend selectors - to be more specific
allow to match elements in doc that don't appear specificly in the doc tree
eg. 1st letter of paragraph - pseudo element
- is identified in css1 & css2 by : , pseudo class is identified by :: in css3


style type="text/css">

p:first-letter {
font-size:2em;
color:#3C3;
}
/style>
/head>

body>
p>text yes it is text text yes it is text/p>
/body>


Only fully supported by Firefox and Safari at this time
partially supported by Opera

style type="text/css">
p:first-line {
text-transform:capitalize;
color:#3C3;
}
/style>
/head>

body>
p>text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text/p>
/body>

* = everything

*:selection {
background:#0F0;
color:#F00;

- any text selected by the user will be coloured by the user
}

Line Height

style type="text/css">
p {
line-height:3;
}

counts the line of text as line height
can also specify measurements
eg. 3em, 10px
cannot use negative values

most browsers have default height of 1.2em
not specified within w3 specifications - can vary

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

Web publishing wk 1

font-family property

allows developer to specify a font they would prefer to use - allows browser to replace font if preferred font is not available - creating a heirachy of preferred fonts to be used - if none are available a generic font is used: serif, sans-serif, monospace, cursive, fantasy. Specifying a generic font refers to different styles of fonts

arial

or

arial

each browser or user agent maps different fonts to the generic font families

Tips -
1. No point listing any font after a generic font since its always available on almost every system - no point placing serif in front of Times etc
2. If none of the fonts listed are available and no generic font specified the user agent will render the text using default generic sans-serif font
3. Generic fonts specified by css agents:
serif, sans-serif, monospace, cursive, fantasy

Web Publishing wk 1

My first css rule




body>

text text text text text

text text text text text

don't get too specific with names in class - be generic - eg not bold etc
can leave p out of the p. - but putting in the p makes it more specific for search
by removing the p, it assumes this is a universal selector and will apply to any html element that has the class name header - with p it can only be applied to paragraph elements with class name header
.header will apply to any html element with class name .header

can also apply multiple class selector rules to one html element, eg header text

well structured selectors is key to writing good css
tip - can be tempting to "overclass" - too many classes

Web Publishing wk 2

when setting type in css
options - keyword - small, medium, large - absolute or relative values

font sizing - 2 types - absolute & relative

Relative - em, ex, px, %, keywords
Absolute - mm, cm, in, pt, keywords

px are technically relative as size can change monitor to monitor - but behave similar to absolute

h1 {
font-size:72pt - is equal to 1" on a ruler
}
as a rule in web design - shouldn't use pt to control font size - cross browser compatibility - these font sizes are fixed - only to be used for print in css
text elements or position of elements for print - not for screen design

cm & in - also only for print

Web Publishing wk 2

allows developer to define a starting location for bg elements
once specified - can be repeated from this point
if not specified - image will be located "0" "0" - top left border
this gives complete control of bg images - can specify coordinates

body (
background-image:url(pat1.jpg);
background-position:left bottom; or right,left,center center
background-repeat:no-repeat;
)

define
body {
background-image:url(pat1.jpg);
background-position:300px 150px; 1st value how far from left of browser, 2nd value top of browser
background-repeat:no-repeat;
}
- or can use 40% 20% - this would change position of image based on the browser window -relative to size of window

bg position comes in handy re a menu system - can use bg image as a button - can use hypertext for the actual button itself - advantage - saving bandwidth - making site more accessible - using hypertext instead of image

inside body elements
index

inside style elements
body {
background-image:url(pat1.jpg);
background-position: center center;
}
a {background-image:url(pat2.jpg)
}
with css - can place a bg image on any element and control the position

Web Publishing wk 2

use small repeating images rather than one large image
loads faster and saves band width

Web Publishing wk 2

default is for bg to repeat - can be useful - but also annoying

background-repeat:repeat-y; only repeat on 'y' axis - eg down page only

background-repeat:repeat-x; only repeat on 'x' axis - eg across page only

background-repeat:no-repeat; only insert bg image once - no repeating - very useful
eg. set bg color to match outer color of bg image

background-repeat:inherit; would inherit parent property value

Web Publishing wk 2

allows the developer to define whether the bg is fixed or scrolls with the document
if you add content to previous - some text to produce a scrolling effect
the bg image fills the element and the bg image scrolls with the text
if add
background-attachment:fixed;
text appears to scroll over the background - be careful when using
can make text hard to read

background-attachment:scroll;
behaves as default

background-attachment:inherit;
will inherit bg attach properties value from its parent


bg attach by default will not inherit properties from its parent unless it is specifically specified

Web Publishing wk 2

Can provide a bg image to practically any element in a html document.
Address can be both relative or absolulte.
Image tiles across the screen - across the entire browser is because the default setting of a bg image element is to tile from the top left hand border of an element to the bottom right hand border.
Background image will not affect the margin, within margin, bg image will not be applied.
If provided url is incorrect - the image won't load - no display of"X"
Good idea to specify a bg colour in case image doesn't load

background image - div tag limits the bg image to the div
anything that falls outside the region of the element will be clipped
if the image relates to document content - embed inside html document
if there to make it look good - place it inside the style sheet as a bg image
purpose of css is to separate document structure from layout

Videos

Video 5 - Inheritance

flow chart shows the “children” - inheritance

each element can inherit properties from its “parents”

not every property is automatically inherited eg. border

will inherit font size, family, etc.

can override inherited property by inserting a new rule in the style



Video 4 - CSS Syntax

Not case sensitive in all matters under its control

Some things fall outside the control of CSS, these include:

end users operating system, mark up language, browser end-user is using

Font names are case sensitive on some operating systems

On a whole CSS isn’t case sensitive

imbedded CSS

insert style tag - type attribute





…..

text

User agents are supposed to ignore most syntax errors, ignore the declaration or block that contains error, allows to render out any remaining components in the documents without displaying error message, however, not all user agents respect these standards, so best to check documents for errors


Video 3 - CSS Intro

CSS - Cascading Style Sheets

Main purpose is to control the appearance of single or multiple html documents

Simply update one file to update appearance on all pages on website

Allows creation of a series of styles or rules stored within a CSS file which can be linked to as many html pages as needed - changes will cascade through the site

Main tags - on page 1, page 2 exactly the same except header name, both files are linked in the “head” of both documents

Associated style sheet - CSS rule associated with h1 element - 2 properties: font family & size

Separates structure from presentation

Presentation = appearance (style sheet), structure = (content) meaning of the content in the document



Video 2 - XML

XML = Extendable Mark-up Language

Designed to carry data - not display data

No predefined tags - user must find own tags

Designed to be self descriptive

Endorsed by W3C

HTML designed to display information

Store & Transport information


Video 1 - Naming
Do not use spaces, capitals or special characters in naming files

Underscores are preferred between words

.htm or .html can be used as extenstions - but be consistant