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>