Web Design week 5

Now for the good stuff CSS (Cascading Style Sheets)

 CSS define how to display/style a website.

---

External style sheets save alot of work

    h1             { color      :    blue  ;            font-size   :   12px; }
selector           property      value               property        value

can also be written as

h1 {

color:blue;
font-size:12px;

}

---

A id or class is a way of specifying your own selectors

for example <div class ="peter">

can be styled

.peter {

font-height:1em;
font-family:sans-serif;

}

---

Linking style sheets

<link rel = "stylesheet" type="text/css" href="../css/styles.css" />

that links the file to a styles.css file that is within a css folder.

---

Order is important!!!!

CSS is read from top to bottom so a style at the top will be overridden by a style at the bottom.

For example

p {
color: pink;
font-size:20px;
}

then later in the stylesheet you have

p {
color: green;
font-size:12px;
}

the second CSS command will be displayed.

To overcome this we use the id's or classes

Web Design week 4

We learned about a major part of web design. Planning

"Plan big, execute small"

While planning, you get to know the website, so you have to ask yourself a few questions...

1. What are the site's goals?
2. Who will use the site?
3. What do you expect them to do when they visit?
4. What could potentially stand in the way of success?

• Dont copy someone else's work ---- get inspiration from it.
• Dont' work backwards from a foregone conclusion.
• Don't use all available bells and whistles just because you can.

if you can't get a good idea to work maybe its a bad idea

WEb Design week 3

We learned how to keep or mark up clean. ie neat 

We also did a file structure to keep it organised.

1. html
2. css
3. img
4. js

All our html pages go into the html folder. The css goes within the css folder. etc

We link our page together using 

• <a href = "name of file"> Example </a>

to go back a directory we use a ../

example <a href = "index.html"> Home </a>    - links to our index page or home

Web Design week 1/2

Week 1/2

Few point from the first class

HTML - Hyper Text Markup Language 

<open tags>

</close tags>

example

<p>This is a paragraph.</p>

<h1>A header tag. </h1>

<ul>Unordered list</ul>

<ol>Ordered list</ol>

<li>List item</li>

etc