CSS

CSS information can be provided from:
– web browser
– user
– author

Information from the author:
– inline
– media type
– importance
– selector specificity
– rule order
– inheritance
– property definition.

– designed to enable the separation of presentation and content
– it also, enables multiple web pages to share formatting, reduces complexity and repetition in the structural content

Syntax
– consists of a list of rules, each rule or rule-set consists of one or more selectors, and a declaration block

CSS can be defined:
– directly on element (e.g. <h2 style=”color: red;”>)
– with “style” tag
– in a separate document, referencing at the beginning of HTML
– in style sheet referencing on element itself

Selector
– declares which part of the markup a style applies to by matching tags and attributes in the markup itself
Selectors may apply to the following:
– all elements of a specific type (h2)
– elements specified by attribute (id, class) – may apply to any number of instances of any elements, while an ID may only be applied to a single element
– elements depending on how they are placed relative to others in the document tree

Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters, hyphens and underscores.

element selector:

id selector:

(where id=”para1″)
id selector for only p elements:

class selector for all emelents:

(where class=”center”)
class selector for only p elements:

grouping selector:

an a element descendant of an a element:

comment:

pseudo class:

(used permit formatting based on information that is not contained in the document tree)
first line of an element p:

first letter of an element p:

any element:

attribute selector:

attribute selector equals:

attribute selector equals one from the list:

…. TODO

Order of the selectors is important:
– div .myClass {color: red;} applies to all elements of class myClass that are inside div elements
– .myClass div {color: red;} applies to all div elements that are in elements of class myClass

Declaration
{property:value; property:value;…}
Values:
– keywords (“center”)
– numerical values (200px (200 pixels), 50vw (50 percent of the viewport width), 80% (80 percent of the window width))
Color values:
– keywords (“red”)
– hexadecimal values (#FF0000, also #F00)
– RGB values on a 0 to 255 scale (rgb(255, 0, 0))

Cascading
= process of declarations being passed to a source of lower priority when not set in the highest priority source

Specificity
= weights of rules/selectors

simple selector (h1) – (0,0,0,1)
class selector (.class) – (0,0,1,0)
id selector (#id) – (0,1,0,0)
style defined on element (style=””) – (1,0,0,0)

Examples of joining:
p a {… – (0,0,0,2)
h1.someClass {… – (0,0,1,1)

Whitespace between properties and selectors is ignored.

Positioning
Three positioning schemes:
– normal flow – like letters in words, new row when no more space
– floats – item is taken out of teh normal flow and shifted to the left or right as far as possible in the space available
– absolute positioning – occupies its assigned position in its container independently of other items