HTML and CSS overview; Examining with browser developer tools

[foxfirefey]

Class Notes

I haven't heard from a lot of you! I'm hoping that all of you who are new to HTML and CSS are doing okay. Please make sure to ask questions you might be having. Remember, I split this lesson up over two weeks, to make sure to give people new to CSS some breathing room to learn!

You can always look at the syllabus to see where we are. Our previous class was the first part of the current lesson, HTML and CSS overview; Examining with browser developer tools.

Lesson Readings

For quick reference, these are the lesson readings from last week:

• HTML Primer
• CSS Primer
• Browser Developing Tools

And here are the annotated stylesheets by seleneheart:

• Bases - Steele
• Blanket - Autumn Clouds

Exercise Answers

Alright, folks, here are some answers to last week's exercises. They don't represent the One True Way to do any task, but they are a way. If you didn't use the particular technique I used but still got something you liked, don't worry about it.

Exercise Answer Key

Browser Development Tool Exercises

List all of the main div ids under the body tag

• #header
• #examples
• #menu
• #footer

What is the color of the column headings in the table? The bottom border?

• Column headings -- #401570
• Border bottom -- #6F17C2

What tag is "Animals and their characteristics" in?

<caption>

What is the padding for each table cell?

• top -- 5px
• bottom -- 5px
• right -- 10px
• left -- 10px

CSS Tweaking Exercises -- Overall

Change the background color

body { background-color: #E3FFF5; }

Change the base text color

body { color: #424E48; }

Turn the header into a box with a border and a different background color

/* Gives the header a dashed border
and different background color. */
#header {
  border: 2px dashed #424E48;
  background-color: #A7D1B9;
}

Change the base font

/* Changes the font to be a sans serif font */
body { font-family: sans-serif; }

Change the size of the header font

/* Makes the top header two times bigger
than the base font */
#header h1 { font-size: 2em; }

CSS Tweaking Exercises -- "Entry" (#example1)

Center the bigger image

/* Changes the display of the image into block;
then the margin right and left works */
.entry img {
   margin-right: auto;
   margin-left: auto;
   display: block;
}

/* Resets the icon to be inline. */
.entry .icon {
  display: inline;
}

Float the "icon" to the right

/* Floats the icon to the right */
.entry .icon {
    float: right;
}

Change the link base, hover, and visited colors

/* Base color of links in the entry */
.entry a { color: #1f6944; }
/* Different color for a visited link */
.entry a:visited { color: #67947d; }
/* Hover needs to come after the other two */
.entry a:hover { color: #2c9460; }

Give an entry a border, a margin, and padding

.entry {
  border: 1px solid #424E48;
  padding: 1em;
  margin: 1em;
}

Decorate the title

.entry h2 {
  font-style: italic;
  border-bottom: 1px solid #67947d;
  letter-spacing: .1em;
}

CSS Tweaking Exercises -- Lists (#example2)

Change the list style type of the unordered list

#example2 ul { list-style-type:square; } 

Change the list style type of the ordered list

#example2 ol { list-style-type:lower-alpha; }

Make the title part (

) of the definition bold

#example2 dt { font-weight: bold; }

CSS Tweaking Exercises -- Lists -- Menu (aka, #menu ul)

Turn this into a horizontal list

/* This way works */
#menu ul li { display: inline; }

/* A different way, but you need to clear afterwards */
#menu ul li {
  display: block; 
  float: left;
  margin-right: 10px;
}

#footer { clear: both; }

Make the items into "buttons" that change color when you hover

/* Take away the bullets reset padding and margins */
#menu ul { 
  list-style-type: none;
  margin: 20px 0px;
  padding: 0px;
}

/* Turn the links into a block
   Increases the size and clickable space 
   Adds padding and margins
   Sets the width, takes away the link underline
   Adds border to the left
*/
#menu ul li a {
  display: block; 
  background-color: #424E48;
  padding: 3px;
  margin: 5px 0px;
  color: white;
  width: 15em;
  text-decoration: none;
  border-left: 10px solid #A7D1B9;
}

/* Change colors on hover */
#menu ul li a:hover {
  background-color: #A7D1B9;
  color: #1f6944;
  border-left: 10px solid #424E48;
}

Exercises

I'm still working on these, so watch this space, and make requests if you like!

• CSS3 Tutorial -- For people who already know CSS2, these might be interesting to explore. Keep in mind that browser support has changed some since it was written--recent versions of Firefox, for instance, no longer require the -moz prefix.

Comments

[adalger]

Incidentally, the styles you applied to body, I applied to html. This also works. Does anyone know a reason to prefer one over the other?

[foxfirefey]

I'm trying to come up with a reason and I can't! If it works, it works.

[ninetydegrees]

In the HTML page structure, html is one level up above body so anything working in body will work in html. I think it was useful before because if you had margins and a background-color applied to body you ended up with white space on the side; browsers are smarter now and apply margins to body as padding, which is not how it works with other elements. However if you apply a background-color to html then style body you'll see that it's treated as other elements. And here's some sample code if you want to see what I mean:

Compare:

body {
background-color: #444;
border: 1px solid black;
margin: 10em;
}

div {
background-color: #ccc;
margin: 10em;
}


With:

html {
background-color: #666;
}

body {
background-color: #444;
border: 1px solid black;
margin: 10em;
}

div {
background-color: #ccc;
margin: 10em;
}

So there's usually no reason to use html over body.

[adalger]

Well, that's pretty simple. Is there any reason on the other side, to prefer body over html?

[ninetydegrees]

Honestly I don't think there is. It seems to me people use body over html because it has become common practice. :)

[metawidget]

This: you used to have to distinguish the two because the body element didn't always fill the browser pane, now I would generally go with body because styling the html element seems to violate the spirit of that you're doing (i.e. you're not really modifying everything in the html element and its children, just the stuff that's also in the body).

It'll still work to modify html, though.

[syntheid]

Adding onto what ninetydegrees already said, there's some caveats to styling the html tag. Not everything is guaranteed to work as expected in all browsers, basically, even though for things like backgrounds, it's also probably not going to screw anything up.

I think the argument for doing something like that would be if you already have a lot of nested div containers and want to simplify by using body as a wrapper instead of a wrapper div.

[adalger]

Ooh. Thanks! That points out the gaps in my knowledge that have grown over the past several years. :)