How to attach a css template to an html page?

Html pages hold content. CSS defines the design and the layout of elements on your html page.

Why use external CSS?

• 
  It keeps your website design and content separate.
  You attach the single CSS file using the "link" tag.
  You can make changes to all your web pages with just a few changes in a single CSS file.

Consider the following paths…

//ec-server/sikora/91540_0000_SI_A/index.html
//ec-server/sikora/91540_0000_SI_A/html/leaflet.html

Which file is at the deepest level?
Which file is closest to the root of directory?

How to attach a CSS template to index.html

Where is index.html located? In the root directory.
Which folders does the browser have to go into to get to style.css? CSS
What is the path from index.html to get to the stylesheet? css/style.css

In the header of index.html enter the following:-



How to attach a CSS template to leaflet.html

Where is leaflet.html located? In the html folder which is in the root directory.
Which folders does the browser have to go into to get to style.css? Up a directory to get to the root of directory then to the css folder then the file.
What is the path from leaflet.html to get to the stylesheet?
91540_0000_SI_A/css/style.css

../ Can be used instead of the root directory
And we get
../css/style.css

In the header of leaflet.html enter the following:-

And Voila! You can view your web page now!

Eportfolio Structure

Set up your folders for your eportfolio as per digram below...

Welcome to all ICT DiDA and Applied ICT students

Hi all! I shall be using this blog to post teaching resources to support your ICT eportfolio work. I shall start by providing you with a list of application software that would be a good idea to have installed on your computers at home.

Open Source software (freely downloadable)

Freemind (Mind mapping software)
Open Workbench (Project management software)
Kompozer (Web page editor)
GIMP (image manipulation and graphics editing software)
Blender (animation software)

Proprietary software

Adobe Master Collection CS4
especially
Photoshop (image manipulation)
Illustrator (vector graphics editing software)
Dreamweaver (web page editor)
Flash (animation software)
Fireworks (graphics editing software)

Don't forget to keep your anti-virus software up-to-date!
Project work is always prone to getting lost. Make sure the most recent versions are saved in at least 3 locations all the time e.g. at home, at school and on an external HDD or memory stick.