Web Design:

Web Design:Basic to Advanced Techniques

Fall 2011Monday 8-10pm

200 Sutardja-Dai Hall

CSS Introduction


Lecture Code:

Recap 1: Good Coding Style

HTML is flexible – case insensitive, largely works even if your tags are missing a few things

However, as developers, it’s important to pay attention to how your code *looks* as well as how it *works*

Why? Easier to edit later, easier for others to read, matches strict industry standards, etc.

Tips are on Piazza also:

Recap 2: DivsDivs are essential

They help us organize groups of content on our websites

Basic tag is <div> </div>

Can help identify our div groups by giving them a name (called an ID or class)

Some did this on the previous lab

We won’t cover it until next lecture!

What is CSS?Cascading Style Sheets

Separate structured content (HTML) from visual appearance (CSS)

More formatting and styling options than HTML alone

Avoid repetition of code

Bottom line: Makes your page look good

How would the Internet look without CSS?


How does CSS work?CSS communicates with our HTML page through a special link (should all be on one line):

<link href=“style.css” rel="stylesheet” type="text/css”/>

We put this between the <head> and </head> tags in every HTML page that needs to be styled

You can replace “style.css” above with the name of your stylesheet, but style.css is standard

This technique is called using an external style sheet

HTML Element SelectorsWhat if I want to give all my paragraphs a certain font color?

I could…Put in some code in front of each <p> tag

that says “make the text blue!” [wrong answer]

Use CSS to select all HTML elements with a <p> tag, and set their font color in one place [yes]

Let’s see this in action:

Element Selector: pHTML code (sample.html)

CSS code (style.css)

The result (sample.html)

Element Selectors: Syntax

1: Name of our HTML element (selector)2: Opening brace {3: The properties and their values; 4: Closing brace

p {font-family: Helvetica;color: #3399ff;

}

Let’s try img Result:

CSS (style.css):

HTML code (sample.html):


CSS (style.css):

HTML code (sample.html):

Quick question:What’s going on with my images?!

How can I possibly have the same image

appear with different src

values?!


CSS (style.css):

HTML code (sample.html): Answer:The first one

links to the image online: we just copied the image

URL (right click).

The second one means we

downloaded the image, uploaded it to Cyberduck, and put it in the same folder as our HTML

file.

CSS Questions: 1How do we know what properties are available for our elements?I.e., how do we know that “color” is

available for p? Is it available for img? What about others?

For now, use the properties we’ve given you in the Lab – they’re pretty comprehensive

If you want more than you’ll ever need, look here: http://w3schools.com/cssref/ Organized by type of HTML element

http://w3schools.com/cssref/

CSS Questions: 2How do I know what values are available for my properties?

Google “x property CSS”. Usually, will go to W3Schools:

CSS Questions: 2

…info continued down the page

CSS Questions: 3What if I only want *one* of my paragraphs to be a certain style, and the others to be different?

This will be covered in the next lecture

CSS gives us ways to choose which HTML elements will receive certain styles, even if they are the same kind of HTML element!

CSS Questions: 4What the heck are those letters and numbers in the color property?

Hex codes: how the internet understands colors

Really fun to choose! Google “hex colors”:

Lab 3Complete the labAsk us for help!Try Extra for Experts if you want

Resource for CSS properties, values, and background:http://w3schools.com/cssref/

Excellent resource in case you forget HTML syntax: http://www.w3schools.com/


http://w3schools.com/cssref/

http://www.w3schools.com/

Web Design:

Documents

Transcript of Web Design: