Coding the web with style
In a previous post, we covered the basics of HTML, the markup language of the internet. We explored ways to divide content into different kinds of contextual containers using tags, and we saw some rudimentary formatting as a result.
But how do really style the web? How do we control the appearance and behavior of HTML elements? For this, we need to move to a second web technology called “Cascading Style Sheets,” or CSS. Style sheets can become very complicated if we aren’t careful, but as long as we understand some of the basics about how styles work, we should be able to keep everything looking the way that we need.
Cascading? Style? Sheet?
The idea is pretty neat once we break down how it works. You define formatting characteristics such as font-face, color, and text alignment that form a “style.” You also include a set of simple “instructions” that define which areas of a web page will have the style applied.
We call these styles “cascading” because of the hierarchical structure of HTML. It is common to have HTML elements nested within other elements, and whenever we do this, the styles from the “outer” element cascade down to any nested elements, so that we don’t have to write a style for every single element on a page.
You can define the styles in 3 different places:
- An external style “sheet,” which is a text file containing a list of styles and no HTML content. One or many pages of HTML would link to this sheet, making it possible to control the appearance of content on multiple pages from a single central location.
- In the <head> section of a web page. This is useful for stand-alone pages that need to be customized.
- “Inline,” or right within an HMTL tag (For example, <p style=“font-weight:bold”>).
Quick Review:
In the example below, there is a style in the <head> section that will be applied to the <body> html element further down the page.
Because the body is assigned color and font weight attributes, the paragraph ( <p> ) inside the body takes on these attributes as well, and the text will be draw bold and red. So far, so good?
Style Collisions!
Inherited styles are great…but what happens if we want finer control? Perhaps we want every paragraph to be in Arial font, but only several specific paragraphs to be red? We need to make styles that overlap!
The secret to controlling styles lies in two additional levels of specificity called Class and ID, and you can make up definitions for these as you make your web page. Any HMTL element can be designated as being a certain “class” of element, or can have a unique ID, or even both. You make up class names or ID names yourself, and they work just like the style definitions we have already discussed.
As shown in the image above, we can add a period (.) in front of the name of a style to indicate that it is a “class” style definition, and a pound sign (#) to indicate an ID style definition. Any style definition that does not have a leading period or pound sign is assumed to be applied to an HTML tag.
Elements with a class or ID assigned to them will first inherit tag styles (like body {} or p {}) and then inherit the class and ID definitions, overriding properties where there is overlap. This allows an element to inherit many of the styles that other elements share, but also to have its own specific customizations.
When do I use a class? Or an ID? And how?
Any time that you want all HTML elements of the same type to have the same style, you might use a tag style, like p{}, em{}, h1{}, and so on. In cases where you want to be able to choose which specific elements on a page get a certain style, you will almost always use class styles.
Proper HTML coding specifies that an ID should only be used one time on any given page, so in cases where there is an extremely specific set of style attributes (like exact positioning coordinates), you might use ID styles.
Applying a class or ID style to your HTML content is very easy. You simply add an attribute to each HTML element that should inherit the desired style definition.
For example:
<p> Sample text </p> becomes <p class=“menu”> Sample Text </p>
Or
<p> Sample text </p> becomes <p id=“title”> Sample Text </p>
That’s it! By adding a class, id, or both to an HTML element on your page, the styling from your <head> section is applied.
And how does one learn all of the CSS style attributes?
Well, through a bit of trial and error, some resources on the web, and possibly through web editing software. Many of the tools for editing web pages offer “code hinting,” where you begin to type a style, and the software automatically suggests attributes and settings for your reference.
In general, the properties are very logically named, and wonderfully well-documented.
For a complete listing of CSS style properties:
http://www.w3schools.com/Css/css_reference.asp
From the same people, a longer guide to getting going with CSS:
http://www.w3schools.com/Css/css_intro.asp
And for some inspiring examples of how simple HTML text can be completely visually transformed, check out the CSS Zen Garden:
In a future post, we’ll look at some example of styling, and talk about positioning HTML elements—stay tuned!