CMPT 165

Introduction to the Internet
and the World Wide Web

By Hassan S. Shavarani

Unit3: Stylesheets

Topics

1. Styles
2. CSS Basics
3. CSS Properties
4. CSS Selectors
5. Colors in CSS
6. Styling Pages with CSS
7. Browser Compatibility
8. Separating Content and Appearance
9. CSS Fonts [optional content]
10. Interactive Color Mixer [optional content]

Styles

CSS (Cascading Style Sheets) language will give us a way to express information about the appearance of different parts of our content

CSS information (style sheets) will also be edited with a text editor, and saved in ".css" files

Why Separate Style Information?

• CSS will allow us to give all of our site's appearance information in one place
• even if we have hundreds of HTML files, they can all refer to one CSS file
• if we want to make a change in the appearance of a site, it requires only a single change
• we can also have separate people working on different parts of the site

CSS Basics - First Problem

Let's say we want to use CSS to change the headings on the page

we want the <h2> elements to be
centred (instead of the default left-justified)
and in an italic font

CSS Basics - First Solution

make a new file call it firststyle.css

In this example:

• h2 {...} block is a CSS rule
• "h2" in the CSS is a type selector
• two lines in the curly braces are CSS declarations each of which defines a property and a value

<link> tag

Let's link the generated CSS file to the HTML codes

Lets apply the CSS [*]

CSS Basic Rule Syntax

selectorlist {
	property: value;
	[more property:value; pairs]
}
... where selectorlist is:
	selector[:pseudo-class]
		[::pseudo-element]
		[, more selectorlists]
					

text-align

• text-align describes how inline content like text is aligned in its parent block element
• text-align does not control the alignment of block elements, only their inline content
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

font-style

• font-style CSS property specifies whether a font should be styled with a normal or italic face from its font-family
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

font-weight

• font-weight CSS property specifies the weight (or boldness) of the font
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

color

• color sets the foreground color value of an element's text content and text decorations
• color also sets the currentcolor value, which may be used as border-color
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/color

background-color

• sets the background colour (behind the text) for the element
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

border properties

• used to control the border around an element (width of the line, type of line, and colour of line, respectively)
• used to set the border attributes of an element including border-width, border-style, and border-color
• look at the border property demos at
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-color

border properties

border properties can be used separately or as a shorthand property border to combine these into one line (giving the three values in any order)

line-height

• sets the amount of space used for lines, such as in text
• on block-level elements, it specifies the minimum height of line boxes within the element
• on non-replaced inline elements, it specifies the height that is used to calculate line box height
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

font-family

• specifies a prioritized list of one or more font family names and/or generic family names for the selected elements
• the list of fonts are tried in-order until the browser finds one available on the user's system
• there are six generic font families and your list must end with one of them since it's guaranteed to work
• look at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

CSS Box Model

<h2>Element Contents</h2> Example

CSS Units

em

The current font size: if the current text is 12 point then this will be 12 points. Another unit, an ex is half the text size.

px

One screen pixel (dot) on the display. (Note: for some very high resolution devices, real “pixels” are very small, so this length is adjusted to be close to the size of a pixel on a traditional display.)

mm

A millimetre. There are also units for centimetre, inch, etc. (Note: this is the browsers best guess, but might be innacurate depending on the scaling of the display/projector/phone/etc. For example if you display your screen on a projector, the “millimetre” suddenly becomes much larger.)

HTML Example Code

CSS Example Code

Example Code Result