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

[lapillus]

LOL! That would require me generating content to get folks to actually look at my journal ;-)

I'm actually more curious about general spread since I suspect that any style designing I do is as likely to be for general use as it is to be for my own - I'm really pretty happy with what I have and the only thing I'm likely to tweak for myself is not going to be a big issue (giving the content a fixed width) when it comes to browser implementation.

[foxfirefey]

Noooo, your teacher was just negligent in trying to get together the massive amounts of data for this topic. Trouble is I don't even remember how I learned CSS, so it's hard to think of how I'd teach it. As opposed to learning DW styles, which I know quite well and have already written quite a span of documentation for!

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

[fulminata]

In theory, you could just make a header image and then code the rest. Like:

<*div id="header">
<*div id="content">CONTENT HERE
<*div id="footer">

(Take out the *) Then CSS can do the rest. That's the beauty of it. :D

[ex_pippin880]

:O

arcane witchcraft, surely!

[fulminata]

Tis but simple magic, m'dear. ;p

[baggyeyes]

Yeah, even Microsoft is trying to kill IE6.

[dchan]

Ooh, you can actually (temporarily) edit on the fly using the browser development tools! I've used them quite a bit before to view code/see where it is on the page, but I was never able to figure out how to change things around to test different options before. (Much more useful than having to upload a whole new css file every time I want to tinker around with the style!)


Also poked around with last weeks lesson too....I did not realize you could change the background image/header through the wizard! I've always completely skipped the wizard in the past and just skipped to posting custom css files when I wanted to make changes, lol.

[foxfirefey]

Yupyup! It's really handy if you just want to tweak a rule and see how it turns out before you save.

For people who know CSS, the wizard's background image options are pretty superfluous. But, for people who don't, it's very nice. And if somebody is making an S2 style, it's good to know about those built in options you can give people, so they can tweak your style without knowing about CSS.

[foxfirefey]

Don't worry about it! I'd much rather have somebody ask a question that has already been answered than be too intimidated to ask about something. Also, that makes the answers so nice and easy to do!

[foxfirefey]

For reference the stats get posted to dw_design!

[foxfirefey]

I am so sorry your computer died!

Not being able to add a background image to modular was a bug--did you get points for it for reporting it? If not, I should give you points for it!

[dchan]

I've been using it to tinker around with the options on my Plurk page. Plurk has about 50 million different classes and IDs so the feature that highlights the different CSS boxes/blocks (or whatever they are called) is especially invaluable there. Now to figure out why the rounded corners on the layout aren't working....I downloaded a rather pretty layout from somewhere but the custom css that came along with it is a bit of a mess, let me tell you. I'm relatively certain that at least half of it is redundant. There's a reason it's called Cascading Style Sheets--no need to keep redefining variables as the same value for all of the daughter classes of something! >_o

[vilakins]

I just tried it and it worked, so it must have been another layout, sorry. I can't remember which and it was probably reported by someone else. Maybe it was a bug at the time and was fixed.

[adalger]

"* Decorate the title"

This is a little vague. Do you mean "make it look pretty" or something specific like make it [underlined|italic|strikethrough]?

[foxfirefey]

Pretty much anything the person wants to do with it, as long as they do it to the title.

[melyanna]

I must not have read the details here on the exercises all that closely. I was starting to worry that I'd missed something really obvious with centering the large image. Still not sure I did it the best way, but it's centered, at least.

[tyger]

:D!!!!!

Okay okay so using the developer tool and this tute - which had entirely the wrong classes for my layout so I had to FIND THE ONES THAT ACTUALLY WORK MYSELF - and my fumbling knowledge of CSS I managed to put my moodtheme on the left!
It took a lot of guessing, but I did it! :D:D:D:D
*so happy~*

..still haven't done the example exercise, but, uh. I did a thing! That I didn't know I could do before! (I was using the exercise as more a 'learn the developer tools' thing and yeah uh that didn't work. ¬¬;) :D SO HAPPY! Have been meaning to do this for MONTHS but I thought it'd take me hours of swearing but it took me maybe twenty minutes! *dances* :D

[foxfirefey]

Nope, it was a tricky one, so I added a note above about it--I had to think for a couple minutes about it, ha.

[foxfirefey]

Hey, that's great! That's the power of developer tools, in my opinion. Makes it SO much easier to figure out what's going on.

That tute you linked to has somebody using an imported layer of Flexible Squares, and while we've tried to standardize CSS classes across DW layouts, that doesn't mean we standardized on the names in Flexible Squares, so you're right to notice that it's different.

[foxfirefey]

Yeah, that toolbar is handy dandy.

[foxfirefey]

You are welcome!