HTML, XML, and sifting through code may have seemed like quite a bit of work, but that's only because you haven't taken a shot as CSS (Cascading Style Sheets). It's not that CSS is hard by any means; Inconsistencies between browser renderings is where the difficulty lies, but so long as you use a "reset" style sheet you'll do ok.
Here we go! This will be a long one!
What is CSS? What are some cool ways we can use it?(I'll even include a trick or two we used on our site, and link you to some good posts about CSS.)
CSS stand for Cascading Style Sheets. CSS was created to solve a major problem with HTML (specifically realized with HTML 3.2). HTML is meant to define the content of a page, not impart formatting/styling, so CSS were crer created to impart formatting and style.
Here's a sample CSS entry:
body{
font-family: Myriad Pro, Arial,
helvetica, Verdana;
font-size: 16px;
line-height: 25px;
}
This entry style any content between the <body></body> tags. With the above entry the page has a defined font family; The first font to be used is Myriad Pro; If the user does not have Myriad Pro then next font to be used is Arial, and so on and so forth. All the font on the page will be reset to 16 px and given a line height of 25px.
A note about line-height. The attribute being modified is leading. Leading is a typographical term for the vertical space between lines. Leading helps to add breathing room between lines adn therefore breathing room. We'll leave typography for another post.
Mark Boulton has Five simple steps to better typogrpahy. Another great resource for web typography is a quick guide at i love typography, A Guide to Web Typography. For more on leading head to Typophile.
The greatest attribute of CSS is its cascading nature. Meaning, styles are inherited from more broad to most specific. (i.e. The default setting of your browser is most broad followed by the body tag and the most specific would be the ID or Class specification of an inline tag: <p id="cite" class="cite"></p>)
If styles are not specified for a specific tag it will inherit the properties of its parent tag.
<body>
<div id="1">
<h1></h1>
</div>
<div id="2">
<p></p>
</div>
</body>
The <h1></h1> tag will inherit properties from the <div id="1"></div> tag and the <p></p> tags will inherit from the <div id="2"></div> tags.
This leads us to IDs and Classes. An HTML tag may have a specific purpose and needs a style that all other tags of the same kind do not. (i.e. one paragraph needs to be red while another needs to stay black.) Here's how we could do it:
.red{
color: #FF0000;
}
<body>
<p>This is the black paragraph</p>
<p class="red">This paragraph will be red</p>
</body>
Let's talk CSS syntax. Styling a tag rquire only writing the tag:
p{
}
body{
}
h1{
}
IDs are used to label sections of a page and can only be used once in an entire HTML document. When styling IDs here is long and shortened versions, respectively:
div#header{
}
#header{
}
Classes are meant to be used multiple times. For instance, if you have multiple instance of text that will be 16px, red, and with 25px left padding, you should create a class with those specifications and add the class to you html file in every location where the font will have those attributes.(Long and short versions of class CSS styling.)
div.redtext{
}
.redtext{
}
All style attributes are placed between { } and IDs and Classes and tags can be strung to gether to get even more specific as to which element will receive styling:
div#header img.wide{
}
This will impart style to images where class="wide" only within the div where the id="header" and since IDs can only be used once then we can pin point where this style renders.
CSS has many other attributes and the sky is just about the limit with what it can do. You know those cool menu drop down effects, that can be done with CSS. If you hover over a link or object and extra info pops up, yea that's CSS too. Are you wanting a 3 column web page? That is most definitely CSS!
Next Post: Best Michigan Government Sites(An overlooked niche!)
What are your top 3 favorite websites, based on design?
