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

[seleneheart]

Okay, so that's why it shows up between elements so much? Like in the example above it's in the footer. You have to clear one before you move on to the next? Or something like that?

[adalger]

You don't have to, but if you don't, things will go beside the floaters. The 'clear:both' in the footer makes the footer go all the way below anything that's floating. Without that, it would stack at the highest spot it could go below everything else that isn't floating, but basically ignoring all the floating elements except for not overlapping them.

[ninetydegrees]

To add to what adalger said think of clear as a reset button. Like: "Ok I wanted to float this section but now I want to go back to the way things are normally positioned so it's clear time!"