Your cart is currently empty!
Development Tips: A Little CSS
Many ofmy training clients find it frustrating when they find out they have to learnyet another language. However when it comes to bang-for-your-buck, no languageapproaches the power of CSS — Cascading Style Sheet language. If you know alittle HTML, this tutorial will show you the power and utility of CSS.
What is CSS?
CascadingStyle Sheet language is a powerful and easy-to-learn markup language that allowsyou to control the design, look, and style of a Web page. It is important tonote that design is not the purviewof HTML — HTML’s design purpose was only to structure the elements on a page,not define how they appear. The “default style sheet” that lives in the browseris what defines the appearance of elements within a Web document without anyCSS code. When you use CSS you override the default stylesheet and styleelements as you like.
What you need
You cancomplete this tutorial with any text editor. Komodo Edit, a free text editor, is anexcellent choice. I also recommend that you obtain a copy of the Firefoxbrowser with the latest Firebug plug-in. You can find the code examples from this article in a paste-and-cut-able text version here.
Gettingstarted
First weneed some content to style. Open your text editor and let’s enter the followingHTML basic document structure and content:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml_lang="en" lang="en"><head> <title>Styling a poem</title></head><body> <p>With rue my heart is laden<br/> For golden friends I had, <br/> For many a rose-lipt maiden<br/> And many a lightfoot lad.</p> <p>By brooks too broad for leaping<br/> The lightfoot boys are laid; <br/> The rose-lipt girls are sleeping<br/> In fields where roses fade.</p> <p>A.E. Housman (1859-1936)</p> </body></html>
Saveyour poem as an .html file and let’s display it in the browser. Every browserhas a feature that lets you open an .html file directly off of the hard drive. Youwill see the poem appear styled by the default style sheet. (See Figure 1.) Thedefault style sheet varies little from browser to browser.
Figure 1. The poem HTML-styled by the defaultstyle sheet in Firefox.
Where to add CSS code
Thereare three ways to add CSS code to a document:
- You may add CSS code in-line using the styleattribute within an element. This is not the recommended practice, as itintegrates the style with the CSS code and you should keep the two separate. Notethat in-line CSS may be necessary for certain applications such as HTML e-mails.
- You may place CSS in the “head” sectionof the document using “style” tags. I’ll demonstrate this method in thetutorial.
- Finally, you may place CSS in a separate file byplacing the “link” tag in the “head” section of the document. Manywould argue that this is the most beneficial method, as you can attach manypages to the same CSS document, giving the site a consistent appearance. I’lldemonstrate this method as well.
Initially,we’ll place our code in the “head” section of the document, using the “style”tag. Right below your title tag, insert the “style” element and appropriateattributes:
<head> <title>Styling a poem</title> <style type="text/css"> </style></head>
The new code appears in bold. (See Figure 2.)
Figure 2. Text editor with “style”element added to the document “head”
Selectors
You useselectors to select which HTML elements you will be styling. While selectorscan get somewhat complex, there are three basic ways you can select tags forstyling. The first and easiest way is to select by tag name. If you select bytag name, you simply use the tag name in the CSS followed by the rule. Insidethe style element add the following code:
<style type="text/css"> p { font-family: arial; }</style>In thiscase the selector is ‘p’ and it is selecting paragraph “p” elements within thecode. If you view this within the browser window now, you will notice all ofthe text (which is all contained in p elements) is now rendered using the Arialfont
We can add a second rule to the p selector inthe CSS to turn the text red like this:
<style type="text/css"> p { font-family: arial; color: red; }</style>Now ifyou load the page in the browser you will notice that the text is rendered inboth Arial and red. (Figure 3)
Figure 3. The default style sheet was supersededby the style sheet rules written for the paragraph element.
Let’sadd some additional code to the body section of the document so we candemonstrate the use of ID’s and classes as selectors. Add the bolded code tothe “body” section of the document:
<body> <div id="poem"> <p><span class="bold">With rue my heart is laden</span><br/> For golden friends I had,<br/> For many a rose-lipt maiden<br/> And many a lightfoot lad.</p> <p>By brooks too broad for leaping<br/> The lightfoot boys are laid;<br/> The rose-lipt girls are sleeping<br/> In fields where roses fade.</p> <p>A.E. Housman (1859-1936)</p> </div></body>
Withthis additional HTML, we have defined a logical division around the poem withan id of “poem” and created a span around the first line with a class of“bold”.
In theCSS section we can create selectors to address both id’s and classes within ourcode. Id’s are prepended with a ‘#’ symbol and classes are prepended with the‘.’ symbol. Once we add the appropriatecode to the style element, it will look like this:
<style type="text/css"> p { font-family: arial; color: red; } #poem { border: 1px solid black; } .bold { font-weight: bold; }</style>If youview the result in the browser, you will note a one-pixel-wide solid black linearound the entire poem and the first line, which was marked with the “span” tagand bold class, is now bold.
Figure 4. The poem is now styled using threedifferent types of selectors.
Rules
As youhave probably noticed, the style rules follow the selector and determine howthe elements will actually look. There are dozens and dozens of style rulesthat you can use that can control just about every possible variable in anelement’s appearance. So far in this tutorial we’ve demonstrated selecting afont, a color, creating bold letters and putting a border around an element. Thisis just the beginning.
The goodnews is if you’ve used one rule — you’ll use the rest in a similar fashion. W3schools.com provides an excellent listing ofsome of the most commonly used CSS rules at: https://www.w3schools.com/cssref/default.asp.
Remember:each rule has a name and a value separated by a colon. So if you are, forexample, trying to set the font size of an element, you would use the font-sizerule inside the selector and then provide it with a value. For example:
p { font-family: arial; color: red; font-size: .8em; }
Withthe addition of this rule, you reduce the font size to 80% of the size in thedefault style sheet. (1em is 100% of the size of the default style sheet). Thebest way to learn the many types of rules and styles that are possible with CSSis to experiment.
Asyou learn more about CSS, keep in mind that this technology will only becomemore critical for learning applications. Not only are Web-based applicationsusing CSS, but also learning applications that use Flash Builder and Flex, andmany mobile learning applications will continue to use this technology.
On the video
On thevideo, Mark demonstrates completing this tutorial, adding additionalinformation and commentary.
