![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
foxfirefey) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
style_system2011-04-23 11:29 pm
HTML and CSS overview; Examining with browser developer tools
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:
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.
no subject
I don't have to switch to Firefox just when I want to check what class something's in! aljdgl;jea;l <3<3<3<3<3
no subject
no subject
I'm probably missing something really simple, but, uh. /o\
no subject
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)
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!
no subject
Yay, at least that isn't broken! *facedesk*
no subject
no subject
...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. =/
no subject
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!
no subject
THANK YOU SO MUCH! \o/
no subject
no subject
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
no subject
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.
no subject
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