DIGI 220 - Basic Formatting with CSS

VIU Media Studies Department - Robin Davies

Lecture Overview

  • CSS Quick Review
    • Rules
    • The Cascade
    • Selectors
  • Basic Formatting Properties
    • Font Properties
    • Text Properties
    • Background Properties
  • @font-face

REVIEW: Rule Structure/Syntax

p {color:red; font-size:12px;}

Selector
what elements are affected?
Declaration
what effects are applied?
  • note the use of punctuation!
  • be consistent with formatting!

REVIEW: Cascade Summary

  • In the absence of any other rule, many properties are inherited by child elements from parent elements
  • If two rules compete, the more specific rule - regardless of its location - wins
  • If two rules are of equal specificity, the one closer in location to the actual element - wins

REVIEW: Organizing CSS

Inline
goes right inside an element's opening tag
Document Level
goes inside the style element in the head element of an HTML document - and there should be only one style element
External
separate CSS docs are connected using one or more link elements - note that there should be no HTML code in an external CSS file

REVIEW: Class & ID Selectors

class
.changes {color:red;}
<p class="changes"> ... </p>
ID
#summary {color:blue;}
<p id="summary"> ... </p>

Remember that HTML documents can have multiple elements with the same class, but only one element with a specific ID.

REVIEW: Contextual Selectors

Contextual selectors allows us to refer to elements that occur within a specific context:

 #current .title {color:blue; font-size:12px;} 
  • Only elements having a class of title within current id will be affected
  • A selector based on an element's ancestor, like this one, is called a descendant selector

REVIEW: Pseudo-Class Selectors

  • access the different states of an element...
    • a:link
    • a:visited
    • a:focus
    • a:hover
    • a:active
  • typically used on a elements, though other elements can have these states too
  • if you plan to use a number of these, put them in order: Leave Very Friendly Humans Alone

REVIEW: Multiple Element Selectors

  • apply a rule to multiple, unrelated elements
  • .important, #nav a, h2 {color:red;}

Font Properties

  • Here are five font-related properties which modify the appearance of text:
    • font-family
    • font-size
    • font-style
    • font-weight
    • line-height

Choosing a Font Family

  • To set the font family:
  • font-family: name;
  • Note: If a font name has a space in it, use quotes!
  • font-family: "Arial Black";
  • Note: The font-family property is inherited, so why not specify it in a rule for the body element?

Specifying Alternative Fonts

  • While you can specify whatever font you wish, your visitors will only see a font if they have it installed on their systems
  • Use fonts that you can expect most users to have
  • You can also specific multiple fonts; the browser will try to find them in the order you indicate
    • font-family: "Arial Black", Arial, sans-serif;
  • Note: It is a good idea to end your font list with either serif, sans-serif, or monospace - these are generic fonts

Creating Italics

  • To create or remove italics, use font-style
  • Note: Traditionally, an italic font family was created by the font designer; a custom font is of better quality than the simply-slanted oblique, which is created on-the-fly by the computer
  • Note: If you set a font-style to italic and no italic version is available, the browser should use oblique
  • The font-style property is inherited

Applying Bold

  • To create or remove bold text, use font-weight
    • font-weight: bold | bolder | lighter | normal | 100 | 200 | ... | 900 ;
  • 400 represents normal, and 700 represents bold. Results may vary:
  • weight 100
    weight 300
    weight 500
    weight 700
    weight 900
  • The font-weight property is inherited

Setting the Font Size

  • font-size is set with a length, percentage, or keyword value:
    • font-size: 16px;
    • font-size: 1.2em; (relative to parent element!)
    • font-size: 150%; (relative to parent element!)
    • font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger;
  • Note: No spaces between number and unit
  • Note: If you set a font size with pixels, some users may be unable to resize their fonts - avoid px
  • Note: You should only use points, cm, mm, picas in stylesheets for print
  • Note: font-size is inherited

Using Relative Font Sizes I

  • Using a realtive font size is simple:
    • font-size: 150%;
    • font-size: 1.5em;
  • The new size is determined by multiplying the factor by the parent element's size
  • The parent element's size may be set by you, may be inherited, or may be set as a browser default
  • An em is equal to the size of the parent/default font - so 1em = 100%
  • Sizes set relativly (em or percent) are more elastic and flexible - you can change the base size and all other fonts will respond

Using Relative Font Sizes II

A device/browser usually has a default font-size setting based on the size of the screen; setting your font-size to 1em therefore utilizes this default; this is one fundamental technique for good responsive design.

Look for the default font settings in your browser!

Setting Line Height

  • line-height: 170%; - percent of font size
  • line-height: 1.1em; - relative to font-size
  • line-height: 1.4; - 1.4 times current font size
  • line-height: 14px; - sets an absolute distance between lines

The Font Property

  • Allows you to combine the other font related properties into a single rule:
    • font: italic bold small-caps 24pt/1.5 Arial, "Arial Black", sans-serif;
  • The order for the attributes is:
    • font-style, font-weight, font-variant, font-size/line-height, font-family
  • Font-size & font-family are required, all others are optional
  • Note: Font names with spaces should be surrounded by quotes
    • "Times New Roman", "Arial Black"

Setting Colour

  • We've seen some of this already...
    • color: red; - keyword (use with caution)
    • color: #FF0099; - rgb value by hex
    • color: #FF009988; - rgb value by hex plus alpha/opacity (00-FF)
    • color: rgb(100, 200, 100); - rgb value by number
    • color: rgb(50%, 75%, 25%); - rgb value by percent
    • color: rgba(255, 0, 0, 0.5); - plus alpha/opacity (0-1)
  • Note: You can shorten repeating hex pairs (strongly recommended):
    color: #F09; == color: #FF0099;
    color: #F090; == color: #FF009900; new!
  • Note: color is inherited

Spacing

  • You can control both word spacing (tracking) and letter spacing (kerning)
    • word-spacing: 1em;
    • letter-spacing: 5px;
  • Use a value of normal or 0 to set spacings to their defaults
  • Note: If you use an em value, only the computed value is inherited regardless of child font size - you may need to explicity set the child's spacing values
  • Note: Both word-spacing and letter-spacing are inherited

Indents

  • To set an indent:
    • text-indent: 1.5em;
    • text-indent: 18px;
  • Positive values create typical indents
  • Negative values create hanging indents
  • em values are calculated relative to font size; percentages are calculated relative to the parent element's width
  • Use a value of 0 to remove an inherited indent
  • Note: The text-indent property is inherited

White Space

  • The white-space property controls how extra white spaces, including line breaks, are handled
  • white-space: pre | nowrap | normal;
    • pre - browser displays all spaces and returns
    • nowrap - browser treats all spaces as non-breaking, which can be a problem with very long lines
    • normal - treats white space as usual
  • The pre value has no effect on an element's font (unlike the pre element which, by default, adopts a monspaced font)
  • You may use the br element to create line breaks in an element styled with nowrap

Aligning Text

  • Used to align certain HTML elements:
    • text-align: left | right | center | justify;
  • Note: text-align can only be applied to block level elements - if you want to align inline content, enclose it in a block level element such as p or div - so, a quick way to centre an image...
  • Note: The text-align property is inherited

Decorating Text

  • There are various ways to decorate text in CSS:
    • text-decoration: underline | overline | line-though | blink | none;
  • Note: none will eliminate decoration from elements that normally display this way (such as a, strike, ins)
  • Note: blink is not fully supported, and is sometimes disabled.

Changing the Background

  • Applies to the background of the specified element only; children don't inherit
    • background: rgb(25,75,200);
    • background: url(dog.jpg) repeat-x fixed top center;
  • In CSS 2.1, background is short for: background-color, background-image, background-repeat, background-attachment, and background-position
  • CSS 3 adds background-size (super useful), background-origin, and background-clip
  • You can set anything from one to all of the values
  • The background-color property is set initially to transparent for all elements

Getting Picky about Fonts

There are a number of methods for ensuring a user sees exactly the font you want them to see:

  • Use a font typically found on all systems/devices
  • Send the user the font they need
  • Take a picture of your text content using a specific font, and replace HTML text with the CSS background-image property or the HTML img element
    • This is genrally only practical for small amounts of content!
    • Take care to address usability issues
  • Via CSS, have the user download a web font

Font File Types

.eot
Embedded Open Type
.ttf
True Type Font
.otf
Open Type Font
.svg
Scalable Vector Graphics
.woff
Web Open Font Format
  • compressed for the medium
  • includes meta data (potentially for licensing purposes)
  • becoming an industry standard

Finding Fonts

@font-face