Tuesday, September 10, 2013

Tuesday, September 10: CSS Glossary

The weekly goals are going well! I had a doctor's appointment yesterday and had to leave early, so today during planning I doubled up and finished my parent calls (yay!) as well as getting some practice in over at Codecadamy. The downside is that I wasn't able to update the class webpages in advance like I had hoped. Oh well!

As I continue my lessons in CSS, one of the difficulties I'm facing is that there are all these terms and I don't really know what they're used for. Like today I learned about how to assign a trait to the first example of an element. But I'm like... why would you want to do it that way instead of just finding the particular item you want and assigning the trait to it? Why is it necessary to have this syntax? Generally I'm pretty easygoing, but given the number of new terms that they're dumping on me, it's really frustrating to try to remember them all when the context is so limited.

So I think for the next few Tuesdays, I'm going to work on a glossary of the CSS terms I'm supposed to know.

Properties are the traits assigned to items. So if you were describing a pair of your socks as blue, the PROPERTY is 'COLOR.'

Here is a list of CSS properties, according to HTML Dog and my explanation of what they are. Also a bit of whingeing along the way.

  • font: The name of the font you want the page to use
  • font-family: The basic type of font you want the page to use
  • font-size: The pixel size you want your font to be. I'm not sure what the numbers measure, but my guess is from the bottom of a descender, like the downstroke of a lowercase p, to the top of an ascender like in a t.
  • font-weight: I think this is how 'thick' or 'heavy' you want the font to look.
  • font-style: This adds slant to a text. I don't know the difference between 'oblique' and 'italic.' Guess Imma haft learn.
  • font-variant: This lets you add smallcaps as an option. It also has 'inherit' and 'normal' as options. Which makes me wonder why you would set it as a property if you weren't going to do anything with it. Why can't 'bold' and 'heavy' and 'lighter' and 'smallcaps' be properties of a font's style? UGH!
  • line-height: I think this is what I learned as 'leading' - it's how much room there is for each line of text.
  • letter-spacing: presumably the amount of space between each letter in a word.
  • word-spacing: presumably the amount of space between words!
  • text-align: how the text is placed horizontally on the page - flush left, flush right, centered, or justified (even on both left and right)
  • text-decoration: lines - over, under, or through. Again, IMO this should be included in font-style, dammit!
  • text-indent: I'm not sure if this means it's indented from the margin for all lines, or if it indents the first line of a section like a paragraph or a division.
  • text-transform: Changes text to all-upper or all-lowercase. Can also capitalize the first letter of every word, but that seems useless to me.
  • vertical-align: moves the lines of text up or down in relation to the page they're on or the box they're in. Useful for degrees or things like chemical notation, or squares and cubes and stuff.
  • white-space: I have no idea. This either 'maintains' or 'collapses' white space. What white space? The white space between paragraphs? maybe?
  • color: the color of the element
  • background-color: the color around/behind the element
  • background: idk
  • background-image: the picture around/behind the element
  • background-repeat: idk
  • background-position: idk
  • background-attachment: idk
  • padding (top, right, bottom, left): how much space is allowed between adjacent elements
There's plenty more, but I'm out of time for today.


Post a Comment