CS3226

Web Programming and Applications

Lecture 04 - CSS3

Dr Steven Halim
stevenhalim@gmail.com

Try this CSS quiz @ W3Schools for self check

Outline

CSS3

CSS3 stands for Cascading Style Sheets (CSS), level 3*

Let's start with a cool example: CSSZenGarden

CSS3 References

  1. The official but very technical
    CSS3 specification at the W3C website
  2. Some easier-to-digest references:
    1. CSS3 Tutorial at MDN (recommended)
    2. CSS references at http://www.w3schools.com
    3. Google around for much more...

Style Sheets (1)

What are stylesheets for?

Style Sheets (2)

Is CSS Important?

CSS Basics

Basically, a CSS rule looks like either of these: 

selector { property: value; } /* comment in CSS is like in C++ */
/* we can set >1 property of the selected element(s) at once */
selector { property1: value2; property2: value2; }

(An external) stylesheet (file) typically contains many rules like the ones shown above
Still remember the pros/cons of ext/internal CSS/JS files?

CSS Selector

Before we can apply a styling rule, we need to determine which elements to apply the style to

The common CSS selector syntax are as follows: 

e { property:value; } /* apply to elements with name e */
.c { property:value; } /* apply to elements which have class=c */
e.c { property:value; } /* apply to elements named e and class=c */
#i { property:value; } /* apply to (one) element which have id=i */
e#i { property:value; } /* technically same as above */

/* below, the selector s1, s2, and s3 can be any of the above: */
s1 s2 { property:value; } /* apply to s2 descendant of s1 */
s1, s2, s3 { property:value; } /* apply to s1, s2, s3; notice ',' */
s1:pseudo-class { property:value; } /* example :hover, :nth-child */

Use class selector to apply the same style to many elements* and use id selector to apply a style to a specific/single* element

CSS Selector Live Examples

(section id: 'css-selector-ex')

I am a simple paragraph 1, no class/id

I am paragraph 2, class: 'special'

I am paragraph 3, class: 'special' and id: 'one'

I am paragraph 4, class: 'notspecial'

I am not a paragraph, but a span, class: 'special'

I am an anchor, no class/id

The Code

These jQuery details will be revisited in JavaScript lecture 

$('p').css('color', 'red');
// all paragraphs will turn red, including in other slides...

$('p.special').css('color', 'blue');
// now paragraph 2+3 will turn to blue

$('p#one').css('color', 'green');
// only paragraph 3 will turn to green

$('.special').css('color', 'gold');
// paragraph 2+3 and the span will turn gold

$('#css-selector-ex p').css('color', 'black');
// only paragraphs in *the previous* slide change

Press F5 (Refresh) to restore settings to default before continuing to the next slide :).

CSS Property

It defines an aspect of how an element is displayed

A list of all properties can be found in W3C website

But there are too many, so we will just concentrate on a few commonly used properties*: color (just now), font, display, opacity, border, position, z-index, ...

CSS Property Values

CSS approach:

  1. Select the HTML element(s)
  2. Specify its (their) property
  3. Set that property with a certain value
    using property: value; pairs
    The available values depend on the property
    Some typical values are shown in the examples

Example: font

Possible values for font-style: italic
font-weight: bold, bolder, lighter
font-size: 

[ xx-small | x-small | small | medium | large | x-large | xx-large ]
[ larger | smaller ]
percentage
px: pixels (relative to the viewing device)
cm: centimeters
font-family: Verdana, "Comic Sans MS", sans-serif

Manipulate the font (id: 'ft'), e.g. 

// order: font-style font-weight font-size (must) font-family (must)
$('#ft').css('font', 'italic bold 200% sans-serif');

Example: display, opacity

Values that we may use for dynamic webpages:
display: none;, opacity: 0.5;

Manipulate this image (id: 'im'), e.g. 

$('#im').css('display', 'none'); // disappear
$('#im').css('display', ''); // reappear
$('#im').css('opacity', '0.5'); // transparent

'Cascading' in CSS

CSS is called a Cascading Style Sheet
because we can apply the styles to:

  • A single HTML element, i.e. 
    'Cascading' in CSS
  • The whole document
    (specified in the <style> tag inside <head> tag)
  • The collection of documents
    (specify the URL of an external stylesheet)

Which one will be applied?

We may accidentally (or intentionally) declare more than one rule for a certain HTML element

If that happens, which one that will actually be applied?

#1

If no rule is specified,
then an element simply inherits the style of its container

Btw, <body> is the container of all HTML elements,
so its CSS setting affects all elements

#2

Latter rules override earlier rules

Rules that appear later in an external style sheet, <head>,
or style attribute override ones that appear earlier
(in the same category)

You can view this as multiple variable assignments:
var x = 5; x = 7; // x will contain 7 now

#3

Closer rules override farther rules

That is, rules in the <head>
override rules in an external style sheet

#4

More specific rules override more general rules

Direct style attribute is more specific than identifier (id)
and is more specific than class
and is more specific than element

Notes

This CSS specificity can become (very) confusing...

My suggestion: Keep your design as simple as possible for your presentation needs
Or use... front-end framework...

You can use W3C CSS validator tool to check if your CSS files are valid

More CSS

Box model, position, z-index,
transform, transition, animation

CSS Box Model

Basically, each HTML element has a box surrounding it with tunable attributes: border, padding, margin...

Manipulate this paragraph's box (id: 'bx'), e.g. 

$('#bx').css('border', '7px solid red'); // show the border
$('#bx').css('border-radius', '20px'); // soften the edge
$('#bx').css('padding', '10px'); // increase padding
$('#bx').css('margin', '50px'); // increase margin

CSS Position

We can use CSS to position elements other than the browser's standard layout (usually for menu)...

The frame of reference for an element is the closest containing element with a defined position other than static

position: static; /* where the element would normally be */
position: relative; /* top/bottom/left/right relative to default pos
                       also used to set a frame of reference */
position: absolute; /* top/bottom/left/right relative to current
                       frame of reference */
position: fixed; /* top/bottom/left/right relative to browser window */

Move this DIV (id="ps") around

$('#ps').css('position', 'relative'); // move it around
$('#ps').css('left', '-100px'); // -100px (to the left) from default pos

CSS z-index

We use z-index to specify the stack order of HTML elements (higher z-index elements are above lower z-index elements)

This works only on manually positioned elements (position: absolute, relative, fixed) as web browser always want to put HTML elements that are siblings (one is not the parent of the other) without overlap

My id: 'DIV1'

My id:
'DIV2'

My id:
'DIV3'

CSS Transformation

We can move, scale, turn, spin, and stretch HTML elements with CSS3, without using JavaScript

We can actually do this in either 2D (see the page source) or 3D (explore this on your own)

One Two Three
A B C
D E F

Reference

CSS Transition

We can add an effect when changing style...
again without JavaScript or other fancy stuff

If your animation is 'standard', just use CSS3 transition rather than writing your own JavaScript routine

This box spins 360 degrees in 3s on mouse hover

This one takes some time to master, but can save time from writing JavaScript code to do similar thing

CSS Animation

There is one more level after this: CSS animation

Explore it on your own

Web Design is not that simple

Word of caution:
Knowing the (basics of) HTML5+CSS3+(JS later)
!=
good User Interface (UI)+User eXperience (UX)

You need to dig deeper beyond the scope of this lecture
(limited to make the theoretical test scope reasonable)
You also need to get your hands dirty
with HTML5+CSS3 in the upcoming lab sessions

We will discuss one more lecture about front-end framework to talk about this topic after we study JavaScript

The End

Try this CSS quiz @ W3Schools for self check