Main Body

Tutorial 3 • Styles, Fonts, and Tables

CSS Styles

It’s commonly said that HTML gives structure to your page, while cascading style sheets (CSS) determines its appearance. CSS has two meanings: (1) a file of type .css, and (2) the hierarchy of styles, i.e., that a local/inline style overrides a global/embedded style, which in turn overrides an external .css file.

Three ways of writing styles:

Local or inline style. A style=”” statement inside a tag, e.g., <p style=”font-family: Roboto;”>. Local/inline styles override global/embedded and CSS files.

Global or embedded style. A <style> tag with statements in the document head. Global/embedded styles override CSS files.

CSS file. A separate file of type .css that can be applied to multiple pages, e.g. file “styles.css” attached to a page, <link href=”styles.css” type=”text/css” rel=”stylesheet”>

Making a CSS File

  1. Copy the global/embedded styles from one of your pages into a separate file, without the <style> tags, and save with file extension .css, e.g., “styles.css.”
  2. Link your .css file to both pages using the <link> tag: 
    <link href="styles.css" type="text/css" rel="stylesheet">
  3. Verify that the styles take effect and that the .css file appears as a separate Dreamweaver tab in your document.

Using Selectors

Selectors are like the strings on a marionette—they connect the tags with the styles you want to apply. You can select all tags by writing the tag in a style statement and the styles in braces, e.g., p {font-family: Georgia;} selects all paragraphs and sets them in the font Georgia. But what if you want to style different paragraphs differently? In that case you can label the paragraph with an ID (use once on a page) or with a class (used multiple times). Select the ID in CSS using a hash tag # and a class by preceding it with a dot.

Pseudoclasses are a type of class that’s built in to the HTML5 and does not need to be labeled by the designer. Example: p:nth-child(1) selects the first paragraph.

Another way to select tags for styling is to use the structure of the HTML. Example: you used an unordered list of bullet points to make a navigation menu, and you placed the list within a navigation or <nav> tag. You can select only that list by writing “nav ul.” Other lists on the page will not be affected.

A great exercise on selectors is the “CSS Diner” at http://flukeout.github.io. To select one or more items out of several:

Methods of Selecting Tags for Styling
Selection method Example in HTML Example in CSS
Use an ID (for one item) <p id=”para1″> #para1 {}
Use a class (for multiple items) <p class=”para1″> .para1 {}
Use a pseudoselector (for first, second, or a repeating pattern of connected items, known as “children”) —
(built into HTML5)		 p:nth-child(1)
1, 2, 3, …,
odd, even
1n+3 (every 3 starting with 1st)
Use the HTML structure, e.g., <div> with an <img> tag in it <div><img> div img {}

What to Style

Two demo files from Patrick Carey’s textbook, New Perspectives on HTML (Thompson) show examples of how you can style text and color. (A third shows the web-safe palette.)

This page demonstrates how different styles affect the appearance of Web page text. Enter your sample text in the box in the upper-right corner of this page. When you press the Tab key, the text will be copied to the Preview box. Set the styles for the preview text by entering or selecting the style value from the input boxes on the left and then pressing the Tab key. To apply the default style values, enter or select "default". The style selections will be applied automatically to the preview text and the style code will be displayed in the box on the lower-right of the page. To reset all of the styles to their default values, click the Reset Styles button at the bottom of the page.

demo_text_styles. Notice all the characteristics of type that you can style. Some common ones include:

  • font-family—the typeface
  • font-weight—bold
  • font-style—italic

You define colors in HTML and XHTML using either a color name or a color value. HTML and XHTML support a list of 16 basic color names. Most browsers also support an extended set of color names. The following table lists these extended color names, along with RGB and hexadecimal values for each color. The sixteen color names supported by HTML and XHTML are highlighted in the table. Web-safe colors are displayed in a bold font.

demo_color_names. A palette of the 140 named colors and four ways to specify them:

  • named colors—red, green, blue, lightblue, azure, chartreuse, … 102 names
  • rgb—red, green, and blue values, scale 0–255, e.g., color: rgb(255,0,0);
  • rgba—“a” adds the “alpha channel,” or transparency, from 0-1.00, where 0 is completely invisible and 1.00 is opaque.
  • hex—3 or 6 numbers and letters on a scale of 0-16, where 10=A, 11=B, etc. Difficult to comprehend if you are trying to figure out what color it is.

What to color

  • color: red; —will color text
  • background: red; —colors objects, like “fill” in Illustrator or Photoshop

Space

  • margin: all around; margin: top bottom; margin: top right bottom left—determines space around an object; margin: 0 auto will center an object if its width is specified and it’s a block-level element.
  • padding: expands an object (including background color)
Demonstration showing the difference between margin, padding, border, and table cell spacing.

Size

  • width
  • height

image

Working with Fonts

Two ways to include an unusual or decorative font on a web page are to place the font on the server and access it using the @font-face rule, and use a Google or other free font.

Including a Font on Your Server

If you want to use an unusual font and you are unsure if users will have this font on their computers, you can put the font file on your server and link to it using the “@font-face” rule. In this example, the font candara.ttf was placed on the server in the same folder as the styles.css file and linked similar to a background image.

CSS code example: @font-face { font-family: Candara; src: url(candara.tff);

Using a Google Font

Google has numerous free fonts available on its web site, Google Fonts [New Window]. The font information can be linked to your web page using the <link> rule. To use a Google font:

  1. Browse the available fonts and add one you want to your collection.
  2. Access your font collection to get the link to the font and the syntax to cite the font.
  3. In this example, the font “Nova Flat” was accessed:

Embed code:

<link href=”https://fonts.googleapis.com/css?family=Nova+Flat” rel=”stylesheet”>
  1. To use the font:
font-family: ‘Nova Flat’, cursive;

 

Example of the font face Nova Flat visualization on Google Fonts Example of embed option for font faces on Google Fonts

Tables

Tables are a nice way to organize information that’s easy for readers to comprehend. Basic table tags are table <table>, table rows <tr>, and table data <td> which refers to the cells and therefore the columns. (There is no tag for table columns, they are determined by the cells.)

Various styles can be applied to the table, tr, and td tags including the border, color (of font), and background, including an image background. “Pseudoselectors” including nth-child(odd) can be used to shade alternating rows to differentiate them more imaginatively than with the traditional borders.

Anatomy of a Table

<table>

<td>

<td>
<tr> Row 1, Column 1 Row 1, Column 2
<tr> Row 2, Column 1 Row 2, Column 2

Sample table (above) and the tags for the table <table>, rows <tr>, and columns (cells, <td>). Columns are determined by the cells. Code below.

 

<table>

<tr>

<td>Row 1, Column 1</td><td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td><td>Row 2, Column 2</td>

</tr>

</table>

 

Table Tags
Tag Description
<table></table> table
<tr></tr> table row
merge—number of columns to span
<td></td> table data—columns
• there is no “column” tag because the columns are determined by the cells
<th></th> table header
• first row(s), type will be bold centered

 

CSS Styles Useful to Table Tags
Style Description
border px color, e.g., border: 1px solid gray;
padding text inset, e.g., padding: 12px;
spacing space between cells
background: color;
background-image: url(image.jpg);		 color of table, rows, and/or cells; could include background image;
• color: rgb(0,0,0);
• color: #fff;
• background: (url “image.jpg”);
pseudo-selectors
:nth-child(1)
:nth-child(odd)
:nth-child(even)
:first-child
:last-child
:nth-child(3n)		 first item in a group of multiple
all odd-numbered items
all even-numbered items
first item
last item
every 3rd item

Importing Table Text

  1. Import the table text (table.txt) into Dreamweaver: File > Import > Tabular Data.
  2. Style the table by:
    • inserting an embedded or global <style> tag in the <head>
    • selecting the table elements (<table>, etc., see Table 1 below)
    • applying the specifications you want (Table 2 below)

 

Russian Fairytale Boxes
Box Characters English Counterpart
The Grey Wolf Ivan Tsarevitch, Helen the Beautiful, the Grey Wolf none
The Horse with the Golden Mane Ivan Tsarevitch and the Horse with the Golden Mane The Magic Pony
The Firebird Ivan Tsarevitch and the Firebird The Phoenix
Father Frost Father Frost, the Snow Queen, and a troika of horses Santa Clause

License

Let’s Design for Web! Copyright © by Richard Adams. All Rights Reserved.

Share This Book