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

[melyanna]

I suspect it's not something I would naturally think to do with CSS, especially in a DW/LJ layout, where I might not want all images centered. Centering an image with HTML just doesn't seem tedious enough to warrant doing it through CSS, at least to me.

[foxfirefey]

It's useful to know how to do various things in CSS because sometimes you can't edit the HTML, though. The trick I use for centering that image is very similar to things I do for some elements in some situations that aren't images.

[kitters]

Well, thanks to the provided Bases code, I've been able to center everything the way I wanted to on my page. But, does it look centered to you, too? Aside from that, the only thing I still haven't been able to do is get rid of that space above the header! I've tried a margin of 0 in all the places I could think of, but nothing seems to have any effect. >_<;

[tyger]

*dancedancedance*
It's still kind of hard, at least for me - if I highlight the moodtheme-picture in the development tools it tells me it's div.metadata.bottom-metadata ul li img, whereas what actually worked to move it was just .metadata ul li img, but still! :D I managed to get it, which is about 1000x more than I usually can do things!

*nodnod* Was still handy to know what I should be coding once I found the right classes! :D

[seleneheart]

The web developer tools can be used to figure out what part of your layout that space belongs to. It should show that it's part of #canvas. Then if you look at the CSS, you see that #canvas has a top padding set. Like so:

#canvas {padding-top: 4%; padding-bottom: 4%; }

Try the web developer tools, and see if you can identify the part that needs to be changed.

[kitters]

*Facepalm* I forgot all about the web developer tools. Sorry about that! I had a suspicion that the #canvas had something to do with that space, but I was afraid to mess with it, for some reason. D: Thanks a lot, once again. XD

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

[lurksnomore]

Well, after reading...stuff until I didn't think I could read and process anymore, I finally got almost all of the exercises done. The only thing I couldn't get it to do was center the larger image. I probably did something very wrong with the selectors or some such, but I got everything else! Now, on to last week! (does anyone have a time-turner handy that I could borrow for a bit? I'll return it--I promise!)

[mergatrude]

Hi! I haven't done this yet. Life kablooeied in my face, but I do want to get back to it. Hope you don't mind people trailing behind?

[northern]

Thank you! The stuff in this lesson is things I learned at Library school - great to look through and see that I know it! :D

[tree]

yay! i have finally finished this lesson! only 3 weeks late!

[foxfirefey]

Sweeeet! I'm working on the current lesson, only one day and an hour late, ha.

[tree]

i can't believe how excited i am to finish it. i feel like i have superpowers or something! even though i had to look every single thing up. but i definitely have a better grasp of what it all means, even if i can't remember the actual code bits yet. you are so awesome. :)

[foxfirefey]

Aw, thank you!

Looking things up is okay! I do it all the time. Building things up a little at a time is how to do it--you can't learn it all in one big chunk and expect it to stick.

[charlottetoolan]

Exercises done!