(7) Remove the border of the #main box
(8) Make the padding of the div.text boxes much smaller
Purpose of CSS and status of the CSS 2 implementation
Today, CSS has three related main purposes
- Define rendering of HTML and (text-centric) XML elements
- Define page layouts
- Support for interactive and animated pages, e.g. dynamic HTML or dynamic SVG. More precisely, JavaScript programs can alter CSS properties of HTML elements in order to move them, change their shape or have them appear/disappear, etc. Animation is about changing properties of objects over time.
Advantage of using CSS for styling web pages
(9) Text color of HTML strong elements be some dark blue
CSS is the modern way to define HTML styles (including positioning of elements in the page). Older HTML dialects include special tags for styling, i.e. the <font> tag, but their use is now strongly discouraged.
- The Separation of content and style makes web sites easier to maintain
- CSS allows for multiple rendering of the same contents, i.e. adaptation to media and people (screen size, font size, print, etc.)
- In addition, CSS can be used to render contents of any text-centric XML vocabulary, e.g. one that you could invent on the fly.
Syntax of CSS declarations
A style sheet is a set of rules (also called rule sets) that describe how to render XML or HTML elements. Each rule has two parts:
- The selector (before the curly braces) defines to which elements a rule applies
- The declaration block (inside the curly braces) defines rendering, i.e. values of CSS properties
The syntax can be summarized as follows:
(10) HTML pre elements, e.g the one below, must have fine dotted borders and a pale background color
selector { property:value; property:value; .... }
- Each declaration block includes at least a property name and a value, separated by a colon (:)
- Each property:value pair must be separated by a semi-colon (;)
(11) Image size must be reduced to 70% (both height and width)
Below is a a set of CSS example rules:
h1 { color: red }
p { font-face: Verdana, sans-serif ; font-size: 12pt}
h1, h2, h3 { color : blue }
h1.Chaptertoc, h2.PeriodeTOC, h2.ExerciceTOC, h2.SectionTOC {
display: block;text-indent: 30pt;
text-align: left; font-size: 14pt;
font-weight: Bold; font-family: Times;
}
As you can see h1 is defined more than once and the ground rule is that the last definition will apply, e.g. in our example, h1 will be blue.
CSS comments syntax
In computer speak, comments are lines of code that (usually) are ignored by the computer. Coders use comments to document the code in order to communicate and/or to remember what it does. In CSS, comments are inserted between /* .... */
and may extend over several lines. But don't use comments within the braces of the property declaration.
Here is CSS example that includes two comments:
/* I love HUGE titles */
h1 {size: 50px ; }
para {display:block;} /* para elements are blocks */
DKS nov 2011 - Valid XHTML