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]

I'm intrigued by the second way you turned the list horizontal as I've never had a good grasp of 'clear' and what it actually does. Could you explain?

[feathertail]

I've been having trouble with spoons lately, which wasn't helped by being caught in the tornadoes that hit the southeastern US. >.>b Power just came back on.

[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?

[ninetydegrees]

For a reference of which CSS works in various versions of Firefox: https://developer.mozilla.org/en/CSS_Reference. Also, if you omit the initial hyphen in the -moz prefix when you Google the property (for instance moz-border-radius instead of -moz-border-radius) the relevant article from developer.mozilla.org is usually the first result you get.

Edit: I forgot to mention that the doc center has tutorials, usage examples and also mentions which other browsers properties are compatible with because it's awesome like that. :)

[stephenie_n_lamaina]

I am unfortunately running a bit behind. Currently RL is kicking my a$$. I will pipe up when I have a question, don't worry I'm not shy.

Stephenie

PS - Is there a way to do an automatic signature on comments. I have two accounts and I keep signing the wrong name...

[syntheid]

I actually started a new job in the past couple weeks where I've been doing html/css code (among other things), but hadn't really gotten a chance to check out how this class was moving along-- I'll probably be in and out and behind a lot, heh. But I'm still interested.

[tyger]

Hey, me again. Figured it's probably better to put this here than the newer post. More on topic.
Basically, last post I was fiddling with my metadata, which was fine - but then I noticed on my reading/network pages if someone has a moodtheme wider than mine the text gets hidden underneath it.

So I was wondering if there's a way to get the image over to the left and the text next to it, no matter what width the image is? I tried using float, but that... didn't really work. At all. Even if I pushed the text to the right, which isn't optimal but can kinda sorta work? The image pokes up over the top of the .metadata div and the text drops down. I have no idea why that is, but it definitely does! *laughs*

[northern]

CSS3 looks seriously cool.

[chebe]

Woah, it's obvious a lot of work went into this section, just want to say thanks, this format is great and I'm learning lots! Onwards :)

[felixpearce]

Hmmm.

OK, so I'm coming to this whole class late; I'm setting up a writing blog and have come over to DW because Wordpress want to charge me the equivalent of US$30 to change the colours of the fonts in the layout I like. At $30 for one damn line of code I think I'd rather give my money to Dreamwidth. I'm used to DW (I have a personal journal here too) and I know a bit of CSS from years ago, but it's pretty rusty.

So.. that leaves me salivating over a sexy Wordpress layout and sketchy about how to reimplement it (or create something close to it) over here. I'm guessing recreating it from scratch will be less of a headache than trying to tweak up an existing LJ style (the link goes to my current less than stellar attempts), but I'd like to avoid having to learn S2 if humanly possible.

Are there any classes in this tutorial that I should really look out for, or any resources that will help me get an overview of how DW builds an entry and what the anatomy of the DW CSS is? Firebug is showing me the guts of it and I've worked through these examples and gained a little more insight, but I'm still finding myself confused about how the various div elements nest and how to accurately refer to the precise things I want to change...

[charlottetoolan]

Checked out CSS3 tutorial, so done with this section!