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

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

[foxfirefey]

Hmmm. So far, you are doing most things very right. Firebug (or other browser development tools) is going to be your main tool here--you're going to want to look over the WordPress layout a lot with it, see what CSS is generating the effects and what elements it's using, and then duplicate the effects on DW S2 classes.

You might might MIGHT want to add an element or two to the layer to get the exact effects you want; DO NOT PANIC. That does not require heavy knowledge of S2 and should not intimidate you, since you can have lots of help if you ask. It requires some copy pasting and adding in some HTML between """HTML HERE"""; and that is it.

I really recommend this page:

http://wiki.dwscoalition.org/notes/S2_CSS

And in your instance this one especially:

http://wiki.dwscoalition.org/notes/Style_Structure_Overview

Now, the first order of business for you is to select which base layout has the best overall structure (as illustrated above) for the WordPress layout you want to emulate. Then, we can start working on the rest of it!

[felixpearce]

Ah - those links look like exactly what I was after. Thankyou very much for that!

Base layout so far is Tranquillity but I'm starting to think that was a mistake, since it doesn't create visually separate blocks for entries and unless I'm mistaken the Wordpress one does. But I think I have a lot of studying those links and drawing tree diagrams in my future before I'm completely certain of that!

Also it's not that S2 scares me, it's just that I know it takes me time to learn programming languages to my own satisfaction and I'd like to get this up and running before I die of old age! Copy and paste supported by wiser heads sounds ideal :)

Thankyou so much for the response - I love this side of DW culture, it's why I decided to put my OMG Author Blog here at all, and I'm looking forward to this :)

[foxfirefey]

I think Tabula Rasa with some tweaks would probably work pretty well. Most of the main blocks are there in any of the layouts, fortunately.

Yeah, you won't have to learn programming in S2--just some copy pasting and layer setups.

Aww, yay OMG Author Blog! That is very awesome!

[felixpearce]

Ooookay. So I've found time to get my teeth into those wiki pages, and they're great information but they're not filling the gap I have in my CSS knowledge. I'll try to explain...

I learnt fairly happily back in the day about the general way CSS (and programming languages in general) function. I can get the basic syntax of CSS right and I understand the concepts of the various types of selector and classes and what have you, but what I don't know is how to string together selectors to accurately refer to specific elements within a complex multi-level structure like a DW page. I mean, things like, if a canvas div contains a content div and the content div contains a primary div, and I want to change something in the primary div only - how exactly do I refer to that uniquely in the CSS? I guess I'm looking for the kind of tutorial that would come with exercises like "Change the size of the font in module headers" or "Make the background of each entry blue". Do you see what I mean?