Cascading Style Sheets Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. CSS2, May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
HTML ELEMENTS An HTML element is the entire declaration of a tag, or tag and content. (black is markup) <tag attribute=value> or <tag attribute=value>content</tag> Element and Tag are referred to with the same word
What does CSS do? Control the style (fonts, colors, leading, margins, typefaces, etc.) of a Web document without compromising its structure. Visual design issues, such as page display, can be addressed separately from the HTML structure. This can allow for control over more HTML objects, and with fewer instructions!
Drawbacks? Only 4.0 Browsers and up. Browser Differences Netscape does not support CSS as well as Internet Explorer does. Fewer functions Limited Inheritance
selector { property: value; } CSS Syntax Instructor must explain this slide.
Comments /* anything found between a fore-slash and an asterisk is a comment. Such as this explanation. How ironic. */
Properties Font size Colors Margins Borders and much, much more! background font Margins Borders and much, much more!
Values Colors Sizes Fonts Hexadecimal, RGB, HTML names Points Pixels Percentage Picas Em's Inches Centimeters Fonts Can be declared dynamically as in HTML
Selector Declaration
Selectors: what is getting style. Tags Classes Tag Specific Classes IDs
CSS Implementation Linked Stylesheets Embedded Stylesheets Inline Styles
HTML Tags as Selector Any HTML tag Any use of the tag will be displayed according to its declaration. Can still use regular HTML formatting tags such as the Heading tags for non-CSS browsers. Heading tags are used by some search engines for relevance of keywords.
Classes Can be applied to any HTML tag. Any tag assigned this class will display according to the class decloration. .classname { property: value; } Assigned to a tag with the attribute “class” <tag class=“classname”>content</tag>
Tag Specific Classes p.classname { property: value; } Ensures that the class can be applied ONLY to one certain tag. Such as the Paragraph tag in this example.
ID Selection You can create a selector for an individual HTML element. The HTML element must have an ID attribute. In the CSS it is denoted with the “#” #copyright { font-size: 10pt; } <span id=“copyright”>© 2011</span>
Linked Style Sheets HTML pages can “point” or link to an external CSS file. Multiple HTML pages can point to the same Style Sheet, thus an entire site’s display can be controlled from one file! <link rel=“stylesheet” type=“text/css” href=“stylesheet.css”> rel - the type of relationship this link represents type - MIME type of linked document href - relative path to the style sheet
Embedded Style Sheets Used by, and throughout, one HTML page Found in the HEAD of an HTML page. <head> <style type=“text/css”> <!-- selector { property: value; } .classname { --> </style> </head> Comment tags ensure non-CSS browsers do not display declarations as text.
Inline Syles Styles can be declared within a tag for use in that tag only. This is done with the attribute “style” <tag style=“property: value; property: value;”>Content</tag>
The Cascade Embedded Styles cascade over Linked Style sheets Note: the LINK tag should go BEFORE the STYLE tags! Inline Styles cascade over Embedded Styles
Grouped Selectors By separating selectors with a comma you can declare more than one at once. h1, h2, h3 { property: value; }
Contextual Selectors By separating selectors with a space you can affect nested tags. ul ul { property: value; } Will declare all second level nested lists.
Images To point to an image (for backgrounds, list bullets, etc.) the following syntax is used:\ body { background-image: url( “file-path” ) } url is typed and file-path is either a relative or absolute file path (no space between url and the parenthesis) body { background-image: url( “images/bg.gif” )
Spans and Divs To add a specific style, to a specific area- the use of these two tags is general. span - an Inline tag that allows content to exist inline with it (e.g. b, font, i,) div - a block element - can contain other tags such as SPAN
CSS2 Pseudo Classes There are aspects of CSS2 which Microsoft’s Internet Explorer (as well as some other “rebel browsers”) support. a:link a:visited a:active a:hover
A Tag Pseudo Classes Each is its own declaration and are adjusted according to current browser status including mouse position. a:hover activated when the mouse is positioned over a link a:active activated when the mouse clicks on the link
Multiple Link Types Define the A tag and/or as many classes of the A tag that you want/need. a { color: #0000ff; font-size: 12pt; } a:hover { color: #ff0000; font-size: 16pt; a.bottomnav { font-size: 9pt; a.bottomnav:hover { color: #ffff00; Inherited categories must be changed or overridden In this slide a.bottomnav:hover inherits the new size, so if the font is not to change the a:bottomnav has to have the desired font-size to be defined.