Class 07

Class 07 –Topics
Reviewing Navigation assignment from 2 weeks ago
CSS Selector Types
Typography for the Web
CSS
In-class demo: Dreamweaver and CSS
Assignment: Continue on the assignment you’re currently working on and practice using the CSS Selector types discussed below. Continue work on your midterm project.  You must have the following completed by our next class on Thursday, April 22:

  • Research & competitive analysis for midterm project. Please post this to your process blog.
  • Design completed for your 2 pages. Please bring in your Photoshop files to our next class.

Reading for next week:
Working with Complex Functionality (pages 233-258) from Web ReDesign 2.0

Questions to discuss next week:
Name a few common examples of complex functionalities.
What is a Functional Spec?
Why is focusing on requirements so important to accessing complex functionality?

Reading completed for this week:
Starting the creative process, Defining Smart Design, Reviewing Site Goals, Developing Concepts, Design for your audience, Presenting Design and Gathering Feedback, Confirming Flow and Functionality, Testing Functionality, Designers as Problem Solvers, Creating Graphic Templates, Creating a Design Style Guide (pages 118- 140) from Web ReDesign 2.0

Questions to discuss:
What is Smart Design and how do you practice it?
How does the development of the “look and feel” of a site start?
What is the difference between a “look and feel” and a graphic template?

Special Announcement: Spring Break April 15 — No class
Midterm Project: Due Thursday, April 29

Specifications: Design a prototype website home page and first-level page for a client** of your choice. Create a sitemap for the complete website and be prepared to present the sitemap for your presentation. Focus on implementing the thought process we studied in class and creating an interesting navigational interface that allows the user to navigate the site in multiple ways . Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.

Deliverables:

  1. Sitemap for entire site
  2. Home page
  3. First-level page for one of the sections. (Commonly referred to as the “landing page.”)

** Note: For next week, please be prepared to discuss the client you have selected for your midterm project. You will need my final approval to proceed with your chosen client. Please pick a client that will allow you to explore ways to effectively design useful delivery of content for  both an online and mobile environment.

The client should be a real or fictitious company that is nation-wide and provides product(s) and/or service(s) to the general public. You should avoid picking small, local companies that do not have interest to a large public audience. You should also think about what kind of interactivity could eventually be added to the site. In what ways would the public need/want to communicate or interact with the company?

For example, a national grocer may want to provide ways for the public to order food, be notified of sale items, etc. See this New York Times article about making grocery shopping faster, more reliable, more convenient and more individualized through the online experience. This article illustrates ways in which the public could interact with grocers. The articles references the site mywebgrocer.com. Another good article about mobile interactivity is Retailers Are Learning to Love Smartphones.

Think about how you could apply these types of online interactions for the products and/or services provided by the company you choose as your client.

We will choose projects from the class midterm projects for us to work on and develop for our final projects.

You need to upload your midterm project to the class server in order to present your project to the class. Please do this BEFORE class on Thursday, April 29.

Resources

Possible sources for images for your midterm project:

Cascading Style Sheets

Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

  • Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height.
  • Style Sheets can define new styles which can be applied to any text selection.
  • The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).
Defining a CSS rule

Here is a style I’ve created. I’ve created a CSS rule (in this case, a class) and named it “coolstyle.

.coolstyle {
font-family: "Courier New", Courier, mono;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FF3300;
border: 1px dotted #000000;
background-color: #FFFF99;
}

One method for applying the style to text is by using a span tag:

<span>text to be be styled</span>

This is what it looks like in a browser:

Creating Styles in Dreamweaver

Select FORMAT > CSS STYLES > NEW. You will see the dialog box below:

Note: in the dialog box above that you are asked to select the type of selector. You can select either a class, an ID or a tag selector. Or you can create what Adobe calls a compound rule. We’ll discuss these selector types in more detail next week

  1. Type a name for the selector in the name field (or choose Comp0und if you are creating a link state.) Be sure to create useful names that are easy to remember and make sense. Don’t use names like style1. Remember no spaces in the names, only underscores.
  2. Be sure to select the radio button for “Define in (New Style Sheet File)” This is extremely important because this will create your external CSS file.
  3. Select OK
  4. The dialog box will ask you to name the CSS file and to save it to your folder. Be sure to add the extension .css to the end of the file name and save it in the folder with your HTML files.
  5. Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. We will talk
    about all of these properties in more detail.
  6. Use the APPLY button to see how your style will look in your document (assuming the style is already applied somewhere)
  7. Select OK from the Styles dialog box.
Applying CSS

If you’ve modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.

If you’ve created a new style, then:
Select the text you want to apply the style to and:

  • Click on the desired style in the Style drop down in the Properties window
  • OR, you can do this by selecting TEXT>CSS STYLES> and select the style
  • OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected. You should always check your code to see if the CSS tag has been applied properly. You should also preview in both Safari, Firefox, and Explorer to verify that the styleis formatting consistently on both platforms and multiple browsers.

Creating a hover state

Many websites now use links that display no underline, but when the user rolls over the link, the underline shows. This is achieved using the “hover” feature of CSS.

  1. Select TEXT>CSS STYLES
  2. Select NEW
  3. Select USE CSS SELECTOR: Compounz
  4. Select name from pull down menu > a:hover
  5. Select OK and then select text decoration>underline or whatever changes you want in the hover state.

An interesting alternative to the underline is to set the hover state to have a dotted underline. To do this, don’t use text decoration>underline, instead:

  1. Go to the BORDER section
  2. Uncheck all the SAME FOR ALL
  3. Set the bottom border style to dotted, width 1 pixel, and color to your choice.
More to know about CSS

While HTML structures the document and tells browsers what a certain element’s function is (it is a link to another page? Is it a heading?), CSS gives the browser instructions on how to display a certain element—styling, spacing and positioning. If HTML is the struts and bricks that make up the structure of a house, CSS is the plaster and paint to decorate it.

This is done using a system of rules, the exact syntax of which you’ll learn more about below. These rules state what HTML elements should have styling added to them, and then within each rule list the properties (eg colour, size, font, etc.) of those HTML elements they want to manipulate, and what values they want to change them to. For example, a CSS rule might state “I want to find every h2 element and colour them all green”, or “I want to find every paragraph with a class name of author-name, colour their backgrounds in red, make the text inside them twice the size of normal paragraph text, and add 10 pixels of spacing around each one.

CSS is not a programming language like JavaScript and it is not a markup language like HTML—actually there is nothing that can be compared to it. Technologies that defined interfaces before web development always mixed presentation and structure. This is not a clever thing to do in an environment that changes as often as the web, which is why CSS was invented.

CSS Selector Types: Defining style rules

Without further ado, let’s have a look at a CSS code example, and then dissect it:

selector {
  property1:value;
  property2:value;
  property3:value;
}

The pertinent parts are as follows:

  • The selector identifies the HTML elements that the rule will be applied to, identified by the actual element name, eg body, or by other means such as class attribute values—we’ll get on to these later.
  • The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons,
  • The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect element colour, background colour, position, margins, padding, font type, and many other things.
  • The values are the values that you want to change each property of the selected elements to. The values are dependent on the property, for example properties that affect colour can take hexadecimal colours, like #336699, RGB values like rgb(12,134,22) or colour names like red, green or blue. Properties that affect position, margins, width, height etc can be measured in pixels, ems, percentages, centimeters or other such units.

Now let’s look at a specific example:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

The HTML element this rule selects is p—every p in the HTML document(s) that use this CSS will have this rule applied to it, unless they have more specific rules also applied to them, in which case the more specific rule(s) will overwrite this rule. The properties affected by this rule are the margins around the paragraphs, the font of the text inside the paragraphs, and the colour of that text. The margins are set at 5 pixels, the font is set as Arial, and the colour of the text is set as blue.

We will come back to all of these specifics later—the main goal of this tutorial is to cover the basics of CSS and not the nitty-gritty details.

A whole set of these rules goes together to form a style sheet. This is the most basic syntax of CSS there is. There is more, but not much—probably the coolest thing about CSS is its simplicity.

CSS comments

One thing to know early on is how to comment in CSS. You add comments by enclosing them in /* and */. Comments can span several lines, and the browser will ignore these lines:

/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

You can add comments either between rules or inside the property block—for example in the following CSS the 2nd and 3rd properties are enclosed inside comment delimiters, so they will be ignored by the browser. This is useful when you are checking out what effect certain parts of your CSS are having on your web page; just comment them out, save your CSS, and reload the HTML.

selector{
  property1:value;
  /*
  property2:value;
  property3:value;
  */
}

Unlike other languages, CSS only has block level comments—single line comments do not exist. You can of course constrain the comment to a single line if you wish, but you still need to include the opening and closing comment delimeters /* and */).

Grouping selectors

You can also group different selectors. Say you want to apply the same style to h1 and p—you could write the following CSS:

h1 {color:red}

p {color:red}

This however is not ideal, as you repeat information that is the same. Therefore you can shorten the CSS by grouping the selectors together with a comma—the rules within the brackets are applied to both selectors:

h1, p {color:red}
Selectors

There are several different selectors, each matching a different part of the markup. The three most basic ones that you’ll encounter most often are as follows:

p { }: element selector (Redefines an HTML element)
matches all the elements of that name on the page (p elements, in the case above)
.example{ }: class selector (Apply to any HTML element)
matches all elements that have a class attribute with the value specified, so the above would match <p>, <li class=”example”> or <div>, or any other element with a class of example. Note that class selectors don’t test for any specific element name
#example{ }: id selector (Applies to only one HTML element)
matches all elements that have an id attribute with the value specified, so the above would match <p id=”example”>, <li id=”example”> or <div id=”example”>, or any other element with an id of example. Note that ID selectors don’t test for any element name, and you can only have one of each ID per HTML document—they are unique to each page.

Note: these different selectors are found in the Dreamweaver here:

Select FORMAT > CSS STYLES > NEW. You will see the dialog box below.


You can see the above selectors in action in the following examples. Notice that when you open the example in a browser the warning style gets applied to both the list item and the paragraph (if the bullet disappears it’s because you are setting a white text color on a white background).

You can join some selectors to define even more specific rules:

p.warning{}
matches all paragraphs with the class of warning
div#example{}
matches the element with the id attribute example, but only when it is a div
p.info, li.highlight{}
matches paragraphs with a class of info and list items with a class of highlight

In the following example I use these to differentiate between the different warning styles:

This information about CSS Basics is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (53MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 4 videos from the YouTube site. I have posted the videos below.

Styling Text using CSS | Part 1

This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.

Styling Text using CSS | Part 2

This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.

Styling Text using CSS | Part 3

This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.

Styling Text using CSS | Part 4

This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.

Additional Resources

Adobe videos
“Using CSS”
“Styling Text using CSS”

Readings from lynda.com
Cascading Style Sheets
Getting Started
Understanding CSS

Recommended Readings from lynda.com
Selectors and the Cascade
Using CSS to Affect Page Layout

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

Web typography

Traditional print designers have a huge amount of options available to them when it comes to typography, including the sheer numbers of fonts available, and options for positioning text. Typography on the web is a lot more limited, because we must design using fonts and positioning, etc that we know will be available on the computers of the users that will look at their web sites—it is no use just designing for yourself on the web!

Limitations of web typography include:
  • A reduced selection of fonts
  • No hyphenation, making full justification look ugly when a column of text gets narrow
  • Poor control over kerning (ie, the spacing between the letters)
  • A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environments

Let’s look at these points in a bit more depth.

Reduced selection of fonts

The reduced selection of fonts is often the first thing you will run up against when styling your text. Although you can specify any font you like in your CSS, visitors to your sites will only see your text displayed in that font if they happen to have it installed on their own computer—if they don’t, their browser will either use an alternative font that you’ve specified in your CSS, or resort to the browser default (usually Times New Roman). So, you may like to see all your body text displayed with special fonts like Trump Medieval or Avant Garde, but unless your target audience is heavily biased towards designers your viewers likely aren’t going to get the benefit. For this reason, most web designers limit themselves to the most commonly-available fonts across all systems, which are usually limited to the following:

Andale Mono
Times New Roman
Georgia
Verdana
Arial/Arial Black
Courier/Courier New
Trebuchet MS
Comic Sans (this is an unprofessional, many would say ugly font—don’t use this, except perhaps sparingly on sites aimed at children)
Impact

These look like Figure 1:

Figure 1: The most commonly available fonts across all systems are limited to the above.

Specifying any of the above fonts means you’re reasonably likely to be picking a font that most of your visitors will also have. Microsoft also introduced six new fonts designed for screen use in Windows Vista and XP, and, oddly, chose to begin all their names with the letter C. If you want to use them, they are Cambria, Calibri, Candara, Consolas, Constantia and Corbel. I’d advise against using these, however, because they are not likely to be available on the Mac or Linux platforms.

So, compared to the thousands of typefaces available to print designers, web designers can reliably choose from just over a dozen. But is this a serious limitation? Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well—remember that typographers pre-dating electronic fonts would have faced similar limitations.

Hyphenation

When it comes to aligning your text within its container, there are four options: left-aligned, right-aligned, centre-aligned and fully-justified. Fully-justified text, where both the left and right edges of the block are aligned to the vertical sides of their container, can look more attractive than text with a “ragged” edge, and you’ll see it a lot in magazines and books. On the web, however, it’s problematic due to the lack of automatic hyphenation, which breaks words at appropriate points to better fit them in the line. To fully justify the block of text, all the browser can do is adjust the spacing between the words, which can lead to “rivers of white space” running vertically through the block—this usually happens when the line length within the block is too short and there aren’t enough spaces to adjust subtly, as shown in Figure 2.

Figure 2: Rivers of whitespace can spoil justified text blocks.

As you can see in this screenshot, the lack of hyphenation to break words at natural points has caused the spacing between certain words to grow to unacceptable sizes. To avoid this, you should use left-aligned text for the most part on the Web.

Kerning

Kerning is the process of adjusting the spacing between particular pairs of letters when the font in use is a proportional one (such as Times New Roman, where the space between each character varies from character to character) rather than a monospaced one (such as Courier, where the space between each character is the same each time). It’s used in print to tighten up the space between letters that align naturally, such as a W followed by an A, and can give a more professional look and feel to the text. Most professional fonts come with kerning instructions built in, to provide spacing information to the type renderer. See Figure 3 for an illustration of the difference kerning makes.

Figure 3: Kerning can certainly improve the look of text.

In the above screenshot, the first word has not been kerned. The second word, though, has had the spacing between the W and the A reduced, whilst the space between the A and the S has been increased a touch.

On the web, kerning with this level of precision is effectively unavailable. The only thing we have that comes close to it is the ability to use tracking, which in the print world means adjusting the space between characters throughout the copy, no matter what those characters are—so, you could decrease the space between your W and your A, but you’ll also be affecting the space between every other letter. On the web, tracking is better known as letter spacing, and is controlled with CSS—this is illustrated in Figure 4.

Figure 4: Proper kerning is not available on the Web; the closest we have available is more general letter spacing.

In the above screenshot, the spacing between each character has been increased by the same amount. Whilst this has helped separate the A and the S, the space between the W and A is now too much. Letter spacing with CSS is a difficult property to use effectively due to this all-or-nothing nature, and for this reason it is best used sparingly.

A lack of control

With all this talk of the print world, there’s something very important worth bearing in mind, and that is that the web is not print. So where the print designer doesn’t have to worry about the end viewer resizing the text, or not having the desired set of fonts, or not having aliasing enabled, we do, and there’s often a temptation to try and force a particular design upon the viewer—fixing a rigid text size for instance, or placing text in fixed-width and fixed-height containers, or even replacing whole chunks of text with images.

This lack of control needn’t be a problem however—you just have to get used to the idea that people will want to read your content on a variety of devices in a variety of environments in a variety of ways. You shouldn’t try to stop them, or make it difficult for them—if they want to read your content then it should be as easy to do so as possible. They may wish to read it on their mobile device during their commute home; they may prefer to print everything out and read it on paper instead of a screen; they may be visually impaired and need to increase the font size somewhat. This is why, when you style your text on the web, what you’re really doing is providing a guide to all the different browsing devices as to how you’d prefer that text be seen. Devices are free to ignore everything you say, of course, but that’s ok—what matters is that you’re not trying to force your design decisions on your entire audience.

How is typography done on the web?

Typography on the web is controlled entirely with CSS, and by using CSS you gain a lot of control: not just over the size, colour and typeface selection but also over the line height, the letter spacing, the level of capitalisation (all caps, initial caps, small-caps or no capitalisation at all) and even control over how the first letter or first line of your text is styled.

By styling the text’s containing block, you also have control over the level of justification of the text and the line length. Not only that, you also only have to create your style rules in one location—your stylesheet—to have those rules apply to all of your text, across your whole website (or you can be specific and target particular paragraphs, or areas on the page). Furthermore, if you ever find yourself needing to increase your website text size, or change the body font, you only have to change the value in your stylesheet.

Quick tips

Here are some quick tips to help you out with typography on the Web.

Select a range of fonts

It’s good practice to include back-up selections when specifying your preferred display font. So, rather than simply specifying “Georgia”, you could specify “Georgia, Cambria, “Times New Roman”, Times, serif”. So, first the browser will attempt to use a font named Georgia, but if this font isn’t installed it will try for Cambria, then Times New Roman, followed by Times, followed by whatever the operating system has assigned to the “serif” keyword.

Line length

To aid readability, the average length of a line of text within your containing block should be around 40–60 characters per line, though this should vary depending on your audience (children prefer shorter line lengths, adults prefer longer). An ideal line length is shown in Figure 5:

Figure 5: 60 characters per line—the ideal line length.

The text in the screenshot is about 60 characters per line. Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.

Line height

Line height refers to the vertical space between your lines, and you can make your type more readable by increasing it a little above the browser default (which also allows more space for subscript and superscript characters)—see the difference between the two paragraphs in Figure 6:

Figure 6: Line height can make a big difference to the look and feel of text.

The first paragraph in the above screenshot has a default line height, and can feel a little cramped. The second paragraph has had its line height increased, and the text has a bit more room to breathe, making it a bit more readable. Too much line height, though, and you make the text harder to read again, so be careful.

Drop caps

By targeting the first-letter pseudo-element with something like p:first-letter { }, you can style the first letter of a line differently from the rest—such styling is usually known as a drop cap, where the first letter takes up about 3–4 lines of text—see Figure 7.

Figure 7: A typical drop cap.

Small caps

Often, fonts come with a small-caps variation—a set of capitalised letters that are uppercased but approximately the size of the lowercase variant. This is useful for when you want to capitalise something but don’t want to draw too much attention to it, so it can be used for abbreviations, for example. Even if the system doesn’t have a small-cap variant of the specified font, that’s ok—the browser will generate its own version by using full capitalisation and then shrinking the characters to around 70% of their normal size. Figure 8 shows small caps in action.

Figure 8: Small caps in action.

Hanging punctuation

A good typographical effect can be used if your sentence starts with quote marks. Using the text-indent CSS property combined with a negative value—either a value in ems (-10em), points (-10pt), pixels (-10px) or percent (-10%)—allows you to shunt the quote mark out into the left, maintaining the left vertical line of your block of text, as shown in Figure 9:

Figure 9: Hanging punctuation.

Typographically-correct punctuation and other entities

You can make your text look more professional and elegant by using the wide variety of typographic HTML entities that are available such as “smart” or “curly” quotes and en– and em—dashes. A lot of blogging and word processing software will automatically do this for you as you type, turning your regular straight quotes into the typographically-correct curly variety, and turning strings of dashes into en and em dashes. See Figure 10 for examples of typographically-correct punctuation.

Figure 10: Typographically-correct punctuation

Once you start peppering your copy with smart punctuation, your text can look far more elegant and professional—more like something from a magazine or a book than from online. Bear in mind though that this sort of punctuation can look a little pixellated for people with older screens or with aliasing disabled, so use with caution.

Then there’s entities—bits of special HTML that you can insert into your copy to generate special characters not easily available from your keyboard. Figure 11 contains a number of entities:

Figure 11: HTML entities

These can be typed in by hand, but a lot of content management software can convert or insert these for you with ease.

Pull-quotes

A pull-quote is a short extract from your text that appears elsewhere on your page with a larger text size, and sometimes a different font, to draw attention to it. You’ll have seen them in almost every magazine you’ve ever read, and they’re an effective way of breaking up your text and highlighting key quotes or phrases—and they’re also easy to do on the web with some simple markup and styling. Just make the text larger, perhaps set it in a different font, position it so that the regular text wraps around it and you’re done. There are also some more advanced solutions that involve JavaScript picking out selected text and automatically populating a pull quote from it, which can save you having to write the same text twice in your markup.

Summary

So that’s typography, and typography on the web; hopefully you can see that text online needn’t be limited to Verdana, small, #333333—there is a wide range of typographic tricks and tips that can help make your text stand out from the rest of the crowd. For most websites, the reason people will be visiting is to read what you or your authors have written; it makes sense, then, to make that reading as pleasurable as possible.

This information about Typography on the web is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

CSS Properties

font-family value: one or more quotation mark-enclosed font names followed by an optional generic font name

font-style values: Italic, normal

font-variant values: normal, small-caps

font-weight values: bold, normal, lighter, bolder, integer (100-900)

font-size values: an absolute size, a relative size, a length, a percentage

letter-spacing value: either normal or a length

line-height value: either normal, a number, a length, a percentage

text-align value: one of left, right, center, justify

text-decoration values:blink, line-through, none, overline, underline

text-indent values: either a length or percentage

text-transform values:capitalize, lowercase, uppercase

vertical-align values: either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length

word-spacing values: either normal or a length

XHTML & CSS exercise: Styling text
HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/



Comments

Sorry, but comments are currently closed.

About Author

jamie

Instructor for Graphic Design 67