foxfirefey: Dreamwidth: social content with dimension. (dreamwidth)
[personal profile] foxfirefey posting in [community profile] style_system

Class Notes

I haven't heard from a lot of you! I'm hoping that all of you who are new to HTML and CSS are doing okay. Please make sure to ask questions you might be having. Remember, I split this lesson up over two weeks, to make sure to give people new to CSS some breathing room to learn!

You can always look at the syllabus to see where we are. Our previous class was the first part of the current lesson, HTML and CSS overview; Examining with browser developer tools.

Lesson Readings

For quick reference, these are the lesson readings from last week:

And here are the annotated stylesheets by [personal profile] seleneheart:

Exercise Answers

Alright, folks, here are some answers to last week's exercises. They don't represent the One True Way to do any task, but they are a way. If you didn't use the particular technique I used but still got something you liked, don't worry about it.

Exercise Answer Key

Browser Development Tool Exercises

List all of the main div ids under the body tag
  • #header
  • #examples
  • #menu
  • #footer
What is the color of the column headings in the table? The bottom border?
  • Column headings -- #401570
  • Border bottom -- #6F17C2
What tag is "Animals and their characteristics" in?

<caption>

What is the padding for each table cell?
  • top -- 5px
  • bottom -- 5px
  • right -- 10px
  • left -- 10px

CSS Tweaking Exercises -- Overall

Change the background color
body { background-color: #E3FFF5; }
Change the base text color
body { color: #424E48; }
Turn the header into a box with a border and a different background color
/* Gives the header a dashed border
and different background color. */
#header {
  border: 2px dashed #424E48;
  background-color: #A7D1B9;
}
Change the base font
/* Changes the font to be a sans serif font */
body { font-family: sans-serif; }
Change the size of the header font
/* Makes the top header two times bigger
than the base font */
#header h1 { font-size: 2em; }

CSS Tweaking Exercises -- "Entry" (#example1)

Center the bigger image
/* Changes the display of the image into block;
then the margin right and left works */
.entry img {
   margin-right: auto;
   margin-left: auto;
   display: block;
}

/* Resets the icon to be inline. */
.entry .icon {
  display: inline;
}
Float the "icon" to the right
/* Floats the icon to the right */
.entry .icon {
    float: right;
}
Change the link base, hover, and visited colors
/* Base color of links in the entry */
.entry a { color: #1f6944; }
/* Different color for a visited link */
.entry a:visited { color: #67947d; }
/* Hover needs to come after the other two */
.entry a:hover { color: #2c9460; }
Give an entry a border, a margin, and padding
.entry {
  border: 1px solid #424E48;
  padding: 1em;
  margin: 1em;
}
Decorate the title
.entry h2 {
  font-style: italic;
  border-bottom: 1px solid #67947d;
  letter-spacing: .1em;
}

CSS Tweaking Exercises -- Lists (#example2)

Change the list style type of the unordered list
#example2 ul { list-style-type:square; } 
Change the list style type of the ordered list
#example2 ol { list-style-type:lower-alpha; }
Make the title part (
) of the definition bold
#example2 dt { font-weight: bold; }

CSS Tweaking Exercises -- Lists -- Menu (aka, #menu ul)

Turn this into a horizontal list
/* This way works */
#menu ul li { display: inline; }

/* A different way, but you need to clear afterwards */
#menu ul li {
  display: block; 
  float: left;
  margin-right: 10px;
}

#footer { clear: both; }
Make the items into "buttons" that change color when you hover
/* Take away the bullets reset padding and margins */
#menu ul { 
  list-style-type: none;
  margin: 20px 0px;
  padding: 0px;
}

/* Turn the links into a block
   Increases the size and clickable space 
   Adds padding and margins
   Sets the width, takes away the link underline
   Adds border to the left
*/
#menu ul li a {
  display: block; 
  background-color: #424E48;
  padding: 3px;
  margin: 5px 0px;
  color: white;
  width: 15em;
  text-decoration: none;
  border-left: 10px solid #A7D1B9;
}

/* Change colors on hover */
#menu ul li a:hover {
  background-color: #A7D1B9;
  color: #1f6944;
  border-left: 10px solid #424E48;
}

Exercises

I'm still working on these, so watch this space, and make requests if you like!

  • CSS3 Tutorial -- For people who already know CSS2, these might be interesting to explore. Keep in mind that browser support has changed some since it was written--recent versions of Firefox, for instance, no longer require the -moz prefix.

Date: 2011-04-30 09:39 am (UTC)
seleneheart: (Default)
From: [personal profile] seleneheart
I'm intrigued by the second way you turned the list horizontal as I've never had a good grasp of 'clear' and what it actually does. Could you explain?

Date: 2011-04-30 01:34 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
'clear:' means "nothing 'floated' can appear in of this element." So, for example, anything you make 'float:left' counts for 'clear:left'; the cleared item must be displayed below any left-floated items earlier in the html. Right-floated items are ignored. This works the same for 'clear:right'. 'clear:both' counts any floated item, in either direction.

If this isn't clear (*giggle*), feel free to ask more questions. We have enough people hanging out that one of us will eventually hit on a good explanation. :)

Date: 2011-04-30 02:17 pm (UTC)
seleneheart: (Default)
From: [personal profile] seleneheart
Okay, so that's why it shows up between elements so much? Like in the example above it's in the footer. You have to clear one before you move on to the next? Or something like that?

Date: 2011-04-30 02:21 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
You don't have to, but if you don't, things will go beside the floaters. The 'clear:both' in the footer makes the footer go all the way below anything that's floating. Without that, it would stack at the highest spot it could go below everything else that isn't floating, but basically ignoring all the floating elements except for not overlapping them.

Date: 2011-04-30 08:41 pm (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
From: [personal profile] ninetydegrees
To add to what adalger said think of clear as a reset button. Like: "Ok I wanted to float this section but now I want to go back to the way things are normally positioned so it's clear time!"

Date: 2011-04-30 02:53 pm (UTC)
From: [personal profile] feathertail
I've been having trouble with spoons lately, which wasn't helped by being caught in the tornadoes that hit the southeastern US. >.>b Power just came back on.

Date: 2011-04-30 03:57 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
Have you tried:

tornado {
    display: none;
}

Date: 2011-04-30 04:08 pm (UTC)
From: [personal profile] feathertail
That just made it invisible! D:

Date: 2011-04-30 06:08 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
Drat. That means we'll need to go in and edit your weather layer.

Date: 2011-05-01 07:47 pm (UTC)
metawidget: A platypus looking pensive. (Default)
From: [personal profile] metawidget
I think:

tornado {
    width: 0;
    height: 0;
    border: 0;
    margin: 0;
    padding: lots;
}

might be a better option.
Edited Date: 2011-05-01 07:47 pm (UTC)

Date: 2011-05-01 07:49 pm (UTC)
exor674: Computer Science is my girlfriend (Default)
From: [personal profile] exor674
or at least adding color: #f0f; so we can *easily* see it coming.

Date: 2011-05-02 02:09 am (UTC)
kitters: (Default)
From: [personal profile] kitters
This entire thread made me smile. XD

Date: 2011-05-02 02:34 am (UTC)
melyanna: (Caboose (scary square))
From: [personal profile] melyanna
If I may be forgiven some nerdiness:

#supercell funnel {
     margin-bottom:1000000000000000000000000;
}


would eliminate the possibility of tornadoes at all, because if it's not on the ground, it's just a funnel cloud. Although I like the idea of making it a color so it's easily seen, especially if that would work in HP supercells. ;)

/former storm chaser

Date: 2011-04-30 03:58 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
Incidentally, the styles you applied to body, I applied to html. This also works. Does anyone know a reason to prefer one over the other?

Date: 2011-04-30 09:02 pm (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
From: [personal profile] ninetydegrees
In the HTML page structure, html is one level up above body so anything working in body will work in html. I think it was useful before because if you had margins and a background-color applied to body you ended up with white space on the side; browsers are smarter now and apply margins to body as padding, which is not how it works with other elements. However if you apply a background-color to html then style body you'll see that it's treated as other elements. And here's some sample code if you want to see what I mean:

Compare:

body {
background-color: #444;
border: 1px solid black;
margin: 10em;
}

div {
background-color: #ccc;
margin: 10em;
}


With:

html {
background-color: #666;
}

body {
background-color: #444;
border: 1px solid black;
margin: 10em;
}

div {
background-color: #ccc;
margin: 10em;
}

So there's usually no reason to use html over body.

Date: 2011-04-30 11:09 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
Well, that's pretty simple. Is there any reason on the other side, to prefer body over html?

Date: 2011-04-30 11:22 pm (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
From: [personal profile] ninetydegrees
Honestly I don't think there is. It seems to me people use body over html because it has become common practice. :)

Date: 2011-05-01 07:52 pm (UTC)
metawidget: A platypus looking pensive. (Default)
From: [personal profile] metawidget
This: you used to have to distinguish the two because the body element didn't always fill the browser pane, now I would generally go with body because styling the html element seems to violate the spirit of that you're doing (i.e. you're not really modifying everything in the html element and its children, just the stuff that's also in the body).

It'll still work to modify html, though.

Date: 2011-05-05 05:19 pm (UTC)
syntheid: [Elementary] Watson drinking tea looking contemplative (Default)
From: [personal profile] syntheid
Adding onto what [personal profile] ninetydegrees already said, there's some caveats to styling the html tag. Not everything is guaranteed to work as expected in all browsers, basically, even though for things like backgrounds, it's also probably not going to screw anything up.

I think the argument for doing something like that would be if you already have a lot of nested div containers and want to simplify by using body as a wrapper instead of a wrapper div.

Date: 2011-05-05 09:26 pm (UTC)
adalger: Earthrise as seen from the moon, captured on camera by the crew of Apollo 16 (Default)
From: [personal profile] adalger
Ooh. Thanks! That points out the gaps in my knowledge that have grown over the past several years. :)

Date: 2011-04-30 09:10 pm (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
From: [personal profile] ninetydegrees
For a reference of which CSS works in various versions of Firefox: https://developer.mozilla.org/en/CSS_Reference. Also, if you omit the initial hyphen in the -moz prefix when you Google the property (for instance moz-border-radius instead of -moz-border-radius) the relevant article from developer.mozilla.org is usually the first result you get.

Edit: I forgot to mention that the doc center has tutorials, usage examples and also mentions which other browsers properties are compatible with because it's awesome like that. :)
Edited (the doc center is ♥ and no html in reason makes me sad) Date: 2011-04-30 09:28 pm (UTC)

Date: 2011-04-30 10:57 pm (UTC)
stephenie_n_lamaina: (Default)
From: [personal profile] stephenie_n_lamaina
I am unfortunately running a bit behind. Currently RL is kicking my a$$. I will pipe up when I have a question, don't worry I'm not shy.

Stephenie

PS - Is there a way to do an automatic signature on comments. I have two accounts and I keep signing the wrong name...

Date: 2011-04-30 11:24 pm (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)
From: [personal profile] ninetydegrees
Is there a way to do an automatic signature on comments

No, there isn't. It's been suggested but rejected at the time.

Date: 2011-04-30 11:52 pm (UTC)
stephenie_n_lamaina: (Default)
From: [personal profile] stephenie_n_lamaina
Thanks [personal profile] ninetydegrees. I went to the link and I can see why it was rejected. I have to agree that long wordy or graphic intensive signatures are annoying. I was literally thinking something short like, "Stephenie". I think from the user name on this account people would automatically shorten it to Stephenie but I was thinking of the account I use for fandom stuff. My user name and the name I am know by in fandom are different (that was already taken) so I sign all my posts.

S...... oops, see I almost signed my name again ;)

Date: 2011-05-05 05:22 pm (UTC)
syntheid: [Elementary] Watson drinking tea looking contemplative (Default)
From: [personal profile] syntheid
I actually started a new job in the past couple weeks where I've been doing html/css code (among other things), but hadn't really gotten a chance to check out how this class was moving along-- I'll probably be in and out and behind a lot, heh. But I'm still interested.

Date: 2011-05-07 08:44 am (UTC)
tyger: Entei, Suicine, and Raioku sprites (pokémon - legendary beasts)
From: [personal profile] tyger
Hey, me again. Figured it's probably better to put this here than the newer post. More on topic.
Basically, last post I was fiddling with my metadata, which was fine - but then I noticed on my reading/network pages if someone has a moodtheme wider than mine the text gets hidden underneath it.

So I was wondering if there's a way to get the image over to the left and the text next to it, no matter what width the image is? I tried using float, but that... didn't really work. At all. Even if I pushed the text to the right, which isn't optimal but can kinda sorta work? The image pokes up over the top of the .metadata div and the text drops down. I have no idea why that is, but it definitely does! *laughs*

Date: 2011-05-07 09:38 pm (UTC)
tyger: Sora, Riku, and Kairi's Avatar Kingdom chibi, arranged as an almost-hug. (SoRiKai - chibis)
From: [personal profile] tyger
Well, good to know I'm not just being daft! :D I'll wait for the S2 tutes, then.

Date: 2011-05-07 08:50 am (UTC)
northern: JC Chasez's hand with some drawn-in-Photoshop colorful fire beneath it. (Default)
From: [personal profile] northern
CSS3 looks seriously cool.

Date: 2011-05-07 06:26 pm (UTC)
exor674: Computer Science is my girlfriend (Default)
From: [personal profile] exor674
If you want to see some sexy css3 funtimes, http://www.andreanall.com/ in a modern, non-IE browser. ( pretty much the only images on that page are the fancy font on the logo and the fancy header part ) { And yeah, my website sucks! }

Date: 2011-05-29 01:35 pm (UTC)
chebe: (Default)
From: [personal profile] chebe
Woah, it's obvious a lot of work went into this section, just want to say thanks, this format is great and I'm learning lots! Onwards :)

Date: 2011-07-03 09:57 pm (UTC)
From: [personal profile] felixpearce
Hmmm.

OK, so I'm coming to this whole class late; I'm setting up a writing blog and have come over to DW because Wordpress want to charge me the equivalent of US$30 to change the colours of the fonts in the layout I like. At $30 for one damn line of code I think I'd rather give my money to Dreamwidth. I'm used to DW (I have a personal journal here too) and I know a bit of CSS from years ago, but it's pretty rusty.

So.. that leaves me salivating over a sexy Wordpress layout and sketchy about how to reimplement it (or create something close to it) over here. I'm guessing recreating it from scratch will be less of a headache than trying to tweak up an existing LJ style (the link goes to my current less than stellar attempts), but I'd like to avoid having to learn S2 if humanly possible.

Are there any classes in this tutorial that I should really look out for, or any resources that will help me get an overview of how DW builds an entry and what the anatomy of the DW CSS is? Firebug is showing me the guts of it and I've worked through these examples and gained a little more insight, but I'm still finding myself confused about how the various div elements nest and how to accurately refer to the precise things I want to change...

Date: 2011-07-05 09:33 pm (UTC)
From: [personal profile] felixpearce
Ah - those links look like exactly what I was after. Thankyou very much for that!

Base layout so far is Tranquillity but I'm starting to think that was a mistake, since it doesn't create visually separate blocks for entries and unless I'm mistaken the Wordpress one does. But I think I have a lot of studying those links and drawing tree diagrams in my future before I'm completely certain of that!

Also it's not that S2 scares me, it's just that I know it takes me time to learn programming languages to my own satisfaction and I'd like to get this up and running before I die of old age! Copy and paste supported by wiser heads sounds ideal :)

Thankyou so much for the response - I love this side of DW culture, it's why I decided to put my OMG Author Blog here at all, and I'm looking forward to this :)

Date: 2011-07-12 03:43 pm (UTC)
From: [personal profile] felixpearce
Ooookay. So I've found time to get my teeth into those wiki pages, and they're great information but they're not filling the gap I have in my CSS knowledge. I'll try to explain...

I learnt fairly happily back in the day about the general way CSS (and programming languages in general) function. I can get the basic syntax of CSS right and I understand the concepts of the various types of selector and classes and what have you, but what I don't know is how to string together selectors to accurately refer to specific elements within a complex multi-level structure like a DW page. I mean, things like, if a canvas div contains a content div and the content div contains a primary div, and I want to change something in the primary div only - how exactly do I refer to that uniquely in the CSS? I guess I'm looking for the kind of tutorial that would come with exercises like "Change the size of the font in module headers" or "Make the background of each entry blue". Do you see what I mean?

Date: 2012-01-07 01:05 am (UTC)
From: [personal profile] charlottetoolan
Checked out CSS3 tutorial, so done with this section!

Date: 2012-01-07 01:06 am (UTC)
From: [personal profile] charlottetoolan
Also, I got something that I liked for last week's exercises, and I checked out your answers as well.

Profile

Dreamwidth style system discussion

January 2017

S M T W T F S
1234567
8 910 111213 14
15161718 192021
222324 25262728
293031    

Style Credit

Expand Cut Tags

No cut tags
Page generated Mar. 27th, 2017 08:26 pm
Powered by Dreamwidth Studios