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: p{text-align: center; color: red;}
id selector: #para1{... (where id=”para1″)
id selector for only p elements: p#para1{...
class selector for all emelents: .center{... (where class=”center”)
class selector for only p elements: p.center{...
grouping selector: h1, h2, p {...
an a element descendant of an a element: p a{...
comment: p {color: red; /* This is a single-line comment */...
pseudo class: h1:hover {... (used permit formatting based on information that is not contained in the document tree)
first line of an element p: p::first-line{...
first letter of an element p: p::first-letter{...
any element: *{...
attribute selector: a[attr1] {...
attribute selector equals: a[attr1="val1"] {...
attribute selector equals one from the list: a[attr1~="val2"] {...
…. 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