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