Tuesday, August 25, 2009

videos

Back Ground tip

You cant just use any images, in case its too big, the kb inserts are 1kb.
use small images which can be repeated which are also simple and basic.

BG Position

style type="text/css"
body {
background - image : url (pat1.jpg);
background - position : centre; can also use left top, left bottom, centre , centre centre, to put back ground where ever neeeded.
back ground - repeat : no repeat;
background - position :300px 150px;
background - position :40% 20%; %:changes relative to size of browser window.


Hyper text instead of using image

index

{
background image : url (pat2.jpg;
}
this creates an accessible menu system
you can place any image in any position or element in css.


Font Size

Keywords - small medium and large for font sizes can be used.
absolute and relative
mm em
cm ex
in px
pt %
keywords keywords



px can change from monitort to monitor

font size : 72pt; is an inch

you shouldnt use pt for fonts
the pt font is fixed and should only be used for print
absolute sizes should only be use for print.
it is better to use relative for fonts sizes.

Class Selector

Implementing styles
By placing a p in front tells the rule to look for a p tag and class there for only that rule ill be carried out.
by removing the p it becomes universal which any text can be made bold when removing this p.

text text text text text



p{ font - weight : bold;}
p. bold{text text text text text text}
p em {
font-family arial; helevetica; sans serif; font-size 9px;}




span



this can be to messy and complecated so take out the class for it to be easy to use



video ended nothing else on it need more info

Bg Colour

Easy to update and change in css using one style sheet, can make all changes needed for all pages on a style sheet. using css you can apply color to anything.

style type="text"

body {
background - color : #000;
}
p {
background - color : #000;
}


p element is ablock so it takes up the whole element

if you want a transparent colour then the default colour is transparent so dont use any colour element.

keywords can be used for colour values although it is not recommended to use keywords as you are limited.
you can specify colours using the RGB

p{
background-color: rgb(18%, 25%, 70%);
}

the colour value for rgb is 0 - 256

p{
background-color: rgb(200, 150, 50);
}

this can be applied to anything in css
you have complete control over any element in css.



Font Weight

h1 (font - size :2em; font - weight: normal)
h2 (font - size :2em; font - weight: bold)
h3 (font - size :2em; font - weight: bolder)
h4 (font - size :2em; font - weight: lighter)
h5 (font - size :2em; font - weight: 100)


Integer vlaue 100 to 900 can range from light text to dark text.
not all font weights wll be used consistantly in all browsers.

ID SELECTOR

Id selector is similar to a class selector.

header


header



# {font-family: verdana, geneva, sans-serif; font-size 2em; color:#C00;

The difference between the class selector and the id selector is th e id selector can only be sued once or should only be used once, although some browsers wil allow you to use more times,
the id selector has a #symbol.

it is bad practice to use the id selector more than once.

Sunday, August 16, 2009

Tuesday, July 28, 2009

Week 2

Back ground Image

The Back ground image is used through out a web page, the default for a background image is to be tiled as this is repeated, u can change the size if needed to fit fullscreen.
Background image iwll not effect border.
If url is not reading or working this means your url must be incorrect, Always specify a background colour incase your background image doesn't load to do this you must add to the body tag
{background color :#06C;
background - image: url(twitter.jpg);
background -attachment :inherrit;

And this will at least have some background colour if your image fails.



Background attach
video 6

continued

Video 5
back ground repeat

Back ground image : url (twitter.jpg)
back ground attachment: scrool;
back ground repeat : repeat - y; or can use x: or no repeat

Tuesday, July 21, 2009

continued

Video 4

CSS Syntax

CSS Syntax is not case sensitive unter its control.
aloth ugh font names are case senstive in th is.
Embedded CSS inside a html document a styles tag needs to be used type and attribute
opening tag style type = "text/css" closing tag
Style sheets can change colours with out tags from html
as long as its inside the h1 tag.
comment tags around t css are needed as some browsers like mobile phone dont support the css they will ignroe the css file.
rule set is a style
selector is before curly braces and a declaration is in side the curly braces.
you can have multiple blocks inside the braces you musy have a ; for each block in the declaration in a rule set.
keywords can be used alos known as an identifer

color: "yellow"; do not use
color: yellow ; do use

syntax
web browsers are meant to ignore sinytax errors! and are not to display errors!
good practice to check for errors before you publish.

Tutorials list of points and tips.

Video one

Naming files

1. Naming files - files need to be named
2. No spaces in file names as it makes it hard to find in your browser
3. If u need spaces use underscores or dash.
4. No Characters
5. No Capital letters some browsers and sites are case sensitive.
6. Always use .html on all pages.

Video two

XML and HTML

Xml is for storing and carrying data
has no defined tags and it its self discriptive.

Html is for displaying data and also has self defining tags.

Video 3

CSS - Cascading style sheets

CSS controls the appearance of the html documents and also controls multiple documents
Basically you can update one file document for an entire website that has multiples pages.
Also any tag ie h1 anything inside this tag that u change will change on all pages that have the same tag in your website. This also seprates th structure of the site from the presentation of the site. From one document to all documents, with out having to go through each page individually.