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]

Hmmmm, how odd! Let me see:

I tried double-clicking on the left side, but all it did was let you change variables that're there - if I tabbed to try and make a new one all it did was highlight
And if I tried to double-click into anything on the left all it did was select the term. And using the gear on the left didn't do anything, I'd input my CSS and hit enter, and it'd just disappear

I'm not quite sure what's going on! Just to make sure we're looking at the same thing, are you trying to edit in the styles section as visible in this screenshot? (the right-hand side/styles sidebar zoomed in for emphasis)

I also tried putting background-color rule into the console directly, but I just get 'SyntaxError: Parse error'.
Ahh, that is because the console expects JavaScript (behavior) rather than CSS (styling and appearance). For the purposes of these lessons, you can ignore that part of the developer tools!

[tyger]

Yup, that's it!

Yay, at least that isn't broken! *facedesk*

[afuna]

Hmmm okay! Second step: does it that happen on all pages, or just specific ones?

[tyger]

...good point! *checks several sites*
...hey! Managed to get the CSS on the right to edit! And adding new things on the right with tabs worked! ...I have no idea why they weren't working last night. I'm actually much more tired now. Oo;
Still can't get adding new things with the gear to work, though. =/

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