BTI220 notes – Thu Jul 18

We continue our introduction to CSS today.

.

Work area setup

Browser’s view-zoom – Ctrl++, Ctrl+-, and Ctrl+0 (substitute Cmd on Mac OS X)

Download the sample for today
Save it in a folder
Study the folder’s structure, notably the assets and ui sub-folders

Text editor holds your HTML content
Add a link element to the head element; this will link to an external style sheet (see next…)
<link rel=stylesheet href=ui/css/styles.css>

Another editor instance holds your CSS content
Create a new text file, named ‘styles.css’
Save it in the ui/css folder

You will be editing both the HTML and CSS files

A browser window displays your web page; Ctrl+R (or Cmd+R) to refresh

.

A short typography discussion

Typography (Wikipedia article) – the art and technique of arranging text on a medium (aka ‘type’)

Typeface – a set of fonts that share a common design

Font – a specific size, weight, style, condensation, width, slant, italicization, ornamentation, and designer of a typeface

Serif, sans-serif

.

A guided tour of some CSS highlights

We will use an example HTML document to show the highlights…

Download it from here

.

Highlights

HTML character entities, (explained on Wikipedia) and their role/purpose…
&nbsp; &lt; &gt;

Default styles in a browser

Reset (normalize) – Eric Meyer’s contribution

Not all properties can be inherited (e.g. background-color)

Values to use… absolute (e.g. px), and relative (e.g. em, %)

Font size suggestion/approach – set as ‘absolute’ in parent container, then ‘child sizes are relative to the parent

Setting colours – by name; by RGB value, by RGB percentage

RGB examples – color: rgb(127,63,255), or rgb(20%,30%,40%), or #0088ee, or #08e

Background image – background-image: url(“path/and/name.jpg”) (relative to the rule’s location)

Others – background-repeat: repeat-x, or repeat-y, or both (default)

Absolute size units pt, in, mm, cm are good for print media, but shouldn’t use in a browser

Type – font-family, include serif or sans-serif at the end of the list

Pseudo classes – :active and :hover can be used on many elements

Write rules for :link and :visited pseudo classes before the others

Box model explained on MDN

Padding uses the content’s background colour – margins are transparent (i.e. they use the parent’s)

Padding is the space between the content and margin

Margin is the space between the outer edge of content+padding and the inner edge of the parent

Horizontal margins are additive

Vertical margins ignore all except the largest-value rule

Margin (and others, like padding, border) shorthand – clockwise, start at the top – top, right, bottom, left

Alternate form, using only two values – the first value is for the top and bottom, the second value is for the right and left

Block elements

Inline elements

Content categories and Sections and Outlines of an HTML5 Document

Layout, width sizes – includes content + padding + border + margin, so don’t consider only ‘content’ widths when designing

Float this element relative to following elements; float: left means “position this element to the left of the following element(s)”; if the following element(s) exceed the height of the floated element, then the content “flows” around the right side (and then bottom) of the element

Clear means “move this element down until it clears the margin(s) of the preceding element”; in other words, it determines whether other content can float around it; default is none, can be both, left, or right; left means that floated elements cannot appear (i.e. must be clear) in its left edge

From MDN, selectors:

From the W3C, Selectors in the CSS standard

Decent article about important selectors

.

A short colour discussion

Colour theory – read/scan the Wikipedia article

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: