1. More HTML and CSS Basic Layout with Styles
HTML & CSS Part 2
More HTML and CSS
Basic Layout with Styles

2. Stylesheets Where can we put CSS?
Inline (embedded within the text we want to format)
Internal (in the head of the document, with a single list of rules)
External (in a separate file from the HTML document)

3. What does an external style sheet look like?
It is a plain text document that contains no information except properly formed style rules. It does not contain any HTML tags.
The image here is from my RIT page. Not done perfectly, I know, but it’s a complete CSS file, good as an example to say, “This is literally all there is to the CSS file. There are no special headers or anything.”
-Sean

4. External CSS: How to Do It
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css” />

5. Why Use External CSS?
For a site consisting of more than one page, defining your presentation in only one place saves you a lot of time!
All the pages in the site look the same.
If you need to change something, you only need to do it once!

6. Three Ways to Lay Out Your HTML Pages
A “Flow-like” or static layout, where HTML elements are placed on the page based on their order in your HTML document
An HTML table-based layout using the <table>, <tr> and <td> tags. (Don’t do this!)
A CSS-based layout

7. CSS Layout What are some of the advantages of using CSS based layouts?
Smaller file size
Adhering to standards means “forward compatibility” with future devices
CSS supports fluid layouts
Easier to update an entire site
What is the major disadvantage?
Disad: extra work, additional files, different browsers implement it differently.

8. Page Layout Using CSS A semi-new tag and two new properties:
<div> tag
Margins
CSS float property
CSS clear property

9. The <div> Tag <div> means “division” Is a block-level tag.
Useful for dividing up major sections of your page logically.
Examples:
<div id=“main”>…</div>
<div id=“subsection”>…</div>

10. Remember “id” and “class”?
Used to identify a unique element on a page.
A single html page can only have one element with id=“footer”
In a whole web site, each unique page could have its own id=“footer”
Starts with a “#”
class
Identifies elements that are reused and share common traits.
Classes can be reused as many times as you want
start with “.”
Mention both CLASS and ID here.

11. The Box Model
CSS treats your web page as if every element (<p>, <div>, <span> …) is enclosed in an invisible box.
CSS allows you to change a large number of the properties of this box, such as its border, color, position, flow, etc. to achieve the look and feel you are striving for.
Introduced last time. This is refresher stuff.

12. Properties of the “Box” we can set
background-color
background-image
border
Width
height
margin
padding
position
and related properties
top:
right:
bottom:
left:
Image from Ron Vullo’s Molly slides (

13. Margin vs. Padding Margin adds space “outside of the box”
Padding adds space “inside of the box”

14. Positions with Margins
Can specify the space around a box on any side
margin-top moves the element down
Ex.: margin-top:40px;
margin-left moves the element right
Ex.: margin-left:100px;
Centering a box
margin:auto;
Centers the styled box within its containing element (but only if it has a set width)
Some Web designers do all their positioning and layout using margins. Is it the best choice? Maybe, maybe not…

15. Making Elements Float
The float attribute makes an element like an island; other content flows around it, and the selected element “floats” wherever you tell it to stay.
Primarily used to make text flow around an image.
For example:
img{
float:left;
margin-right:5px; }
Will cause the image to slide over to the left and any text to flow around it
Today, we will also use float to create a two-column layout of an HTML page.

16. The float and clear Properties
float:left will push the element to the left side of its containing element. Elements that follow a floated element will try to sit on the same line if there is room.
The clear property tells an element to stop sitting next to a floated element and instead move to the next line. Any side you flag as “clear” will not be allowed to have any floating elements. Possible values include left, right, and both.
Emphasis that float works within a containing element. Important!

17. More Formatting…
Let’s talk a bit about some more specific ways of formatting text, and making it look a bit more presentable.

18. CSS and the <a> Tag
Ever wonder how websites change the color of links? That default blue underlined text is really boring (and I don’t ever want to see you use it on your websites)!
Using CSS, we can format anchors just like everything else.

19. How to Format <a>
a This is all instances of any <a> tag in the page.
a: link This is the normal, untouched <a> tag (the default appearance is blue and underlined).
a: visited This is the anchor if it has ever been clicked (the default appearance is purple and underlined).
a: active This is the anchor when the mouse button is down while over the anchor text (the default appearance is red and underlined).
a: hover This is the coolest one: how the anchor looks when the mouse hovers, or rolls over, it. There is no preset appearance for this, and you can use it to great effect. Later, we’ll discuss how to do image rollovers with CSS!
On project and whatnot, I INSIST they change these. There is no reason not to; it’s really easy, and the default colors NEVER match their chosen color scheme or design.
Also mention not to change the size of text in any way between states, as this causes all text after the link to shift.

20. Side Note: The * Selector
The wildcard selector (*) selects every element on the page.
How is this different than using body as a selector?
When and why would we want to select all of the page elements?
Body and * are not the same thing; * cuts around inheritance, body “respects” inheritance. Some people use it to “clear” margins and padding, to zero it out and set it manually to be more consistent.

21. Media-Specific Stylesheets
So far, our CSS affects what we see on-screen. We can also write CSS for other media types. For example: <link rel=“stylesheet” type=“text/css” media=“print” href=“printstyle.css” />
With a separate print stylesheet, we can format a page for print rather than screen. Why? Because print and screen are two very different media types!
Remember to use points (pt) instead of pixels (px) for print measurements. Otherwise, it’s the same as always!
We cover this specifically later on, so don’t spend too much time here.
This print CSS tutorial seems pretty nice…

22. Some Other Cool Stuff…
<img src=“mugshot.jpg” alt=“My smiling face” height=“200” width=“300” title=“Look at me! I’z on teh interwebz!” />
Used primarily on images, this brings up rollover “tool tips” for images. A good implementation of this is:
Not really CSS, but it’s a cool way to add a little more interactivity and “informative-ness” to your page.
Yes, informative-ness is intentional. ^_^ -Sean

23. Some Other Cool Stuff…
You might have noticed that HTML doesn’t let you type certain characters, like quotes, ©, &, and others.
This is because of how HTML is parsed, and how certain characters are reserved for HTML code itself.
Instead, you can use these:
Quotes = "
© = ©
& = &
Extra space (non-breaking space) =  
There are plenty of other “special characters” you can put in with HTML code too. Check your books and online resources!

24. Some Other Cool Stuff… Anchors
We already know the <a> tag is an anchor for a link. We can also create anchors within a document <a id=“pagetop” />
Then we can jump to that point with a link:
<a href=“#pagetop”>Back to top</a>
This works to link to any ID, actually!
<a href=“#”> can also be used to go to nowhere, as a “null link” (useful as a placeholder when building a page)
NOTE: with href=“#pagetop” it will look for an id of pagetop regardless of what tag it is in.

25. Targets… <a href=“#” target=“_blank” />
Opens the link in a new window/tab
This is actually a holdover from frames

26. Some Other Cool Stuff… The <pre> tag
Normally, HTML ignores whitespace. Anything inside a <pre> tag doesn’t!
While limited in its ability, this gives HTML a little control over how things look, but it only works well with mono- space fonts like Courier.
Try it!
But don’t rely on it too much…
Note, it is handy in development when working with languages such as PHP. Using <pre> maintains the formatting and tabs when dumping data arrays for debugging.

27. In-Class Exercise
Making your page pretty!