HTML and CSS overview; Examining with browser developer tools

[foxfirefey]

Class Notes

For people who participated in last week's exercises, thank you so much. Anybody who discovered options not working the way they should be got 10 DW points.

You can always look at the syllabus to see where we are. Our previous class was on S2 Background and the Customization Wizard.

Reading for the Week

This week's class is a day late, because I've been working on filling out the following reading aimed at people who need to learn the basics of CSS and HTML:

• HTML Primer
• CSS Primer
• Browser Developing Tools

They are still not complete yet, in my opinion, and I'll be completing them as people start asking questions and needing guidance. I hope that we can work together on this, since I've never taught HTML/CSS from scratch before--if you have something you feel should be added, feel free to edit the wiki pages. Because so many of you are new to this, this portion of the class will span two weeks (as stated last week). This week, let's concentrate on getting a grasp on the basics of HTML and simpler CSS declarations, for those who don't know it yet. Next week, we'll go more in depth on topics that people ask about or need this week, and possibly throw in some bonus teachings on interesting new CSS3 rules.

Exercises

Okay, for those of you who need a little crash course in HTML and CSS, CSS Lesson 1. It's a little bundle of files. When you unzip the folder, you'll find:

• examples.html -- The HTML file to work with.
• css/examples.css -- Edit this file in order to change the styling in the HTML file.
• exercises.txt -- Has a list of exercises for people new to CSS to try. Note: centering the bigger image might be a little tricky if you're new to CSS, so don't be ashamed. I'll give solutions (and new exercises) next week.

If you are already pretty proficient with HTML and CSS, please get some practice with Browser Developing Tools if you don't know how to use them! Play around with exploring your journal and its current HTML/CSS. Test making out on-the-fly changes.

seleneheart has also prepared something very nice: an annotated version of the CSS for two different layout themes.

• Bases - Steele
• Blanket - Autumn Clouds

Comments

[afuna]

Ooh glad that worked!

And I had a sudden thought about adding new elements! Can you try doing the following steps exactly:

1) Open up the web inspector
2) Click on the gear on the upper right in the Styles section of the sidebar
3) You will get a textbox in a bar with a blue background, with the name of the element / selector (so p, div, #canvas, something like that)
4) Press "tab" to confirm that this is the right element you want to add CSS for
5) Type in the new rule: "background-color: red;" or something like that

I was clicking around and I noticed it was way too easy to skip steps 3-4, and go straight to #5 from #2, which just makes the rule disappear without being applied, since it's not a selector, so I wonder if that's what's happening here!

[tyger]

AHA! THAT IS IT EXACTLY! :D
THANK YOU SO MUCH! \o/

[afuna]

Hooray! \o/