CSS stands for "Cascading Style Sheets". It is a language that is used to control the visual appearance (style) of web pages.
<div>
or <span>
tag, or other HTML element, for example <span style="color:red">
Text</span>
<style></style>
element embedded in the <head>
element of the document, where styles for elements and or classes are specified.css
extension (e.g. myStyles.css
) that is linked to with a <link>
element embedded in the <head>
element of the document, for example: <link rel="stylesheet" type="text/css" href="cssPage.css" />
For inline CSS, span
and div
tags are very helpful. Here is a nice summary of span
vs. div
:
http://webdesign.about.com/cs/htmltags/a/aa011000a.htm
Note that you can use span
or div
, or you can apply CSS directly to any element by putting a style
attribute directly on that element.
In fact, the main purpose of span
and div
is to be able to apply either a style
attribute for use with CSS, or an id
attribute for use with Dynamic HTML (via JavaScript, for example.)
Code | What it looks like | Comments |
---|---|---|
This changes the <span style="color:blue">color</span> of some text |
This changes the color of some text. | The span element is used inside a paragraph. |
<p style="color:red">This first paragraph is red.</p> <p style="color:blue; background-color:#CCCCFF;"> The second paragraph has blue on a light blue background</p> <p>The third paragraph uses default foreground and background colors</p> |
This first paragraph is red. The second paragraph has blue on a light blue background The third paragraph uses default foreground and background colors |
We use the style attribute of each paragraph to apply some CSS properties to that paragraph. |
<div style="background-color:yellow"> |
The first paragraph. The second paragraph The third paragraph |
The <div> element is used to apply CSS properties to several block-level elements on a page (block level elements are paragraph-like things, including table, ol, ul, h2, etc... things that have line breaks between them.) |
CSS is specified with "properties". When you use Dreamweaver to type in the value of the style attribute, a list of legal properties pops up. If you type your XHTML by hand, you need to have a reference for CSS to look up the properties you need.
You should know a few basic CSS properties by heart. Here is the list of the ones you should know for the CISC103 final exam (this list is FINAL for Fall 2005).
Property | Example | meaning |
---|---|---|
color | color: red; | foreground color (e.g. red, yellow, blue, or #FFCCFF, #FFFFFF, #FF00CC, etc.) |
background-color | background-color:yellow; | background color (e.g. red, or #FFCCFF, etc.) |
text-align | text-align:center; | alignment of text (e.g. left, right, center) |
font-family | font-family:sans-serif; | the font family to use (e.g. serif, sans-serif, mono) |
font-size | font-size:1.5em; | the size (best expressed in "em", traditionally the width of an uppercase "M") Specifying in terms of "ems" means the size changes with the default text size being used. |
font-weight | font-weight:bold; | possible values include: bold, normal |
font-style | font-style:italic; | possible values include: italic, normal |
Examples of what you'd see in a style sheet (either internal or external)
Things starting with a period (.) refer to "class" names... the class name is applied as an attribute of an HTML or XHTML element.
Things that don't start with a (.) refer to elements (e.g. p, li, strong, em) in the table below.
These can be combined, e.g. all em elements that are highlighted.
Example | meaning |
---|---|
td {font-family: Arial, sans-serif; font-size: 0.8em;} | make all td elements text size 0.8em in Arial if possible, otherwise any sans-serif font will do. |
li strong {color: blue;} | any strong element that is inside a list item, make it blue For example, this strong text is not in a list
|
.highlighted {background-color: yellow;} | any element marked with class="highlighted" should have a background of yellow |
em.highlighted {background-color: orange;} | any em element marked with class="highlighted", should be in orange instead of yellow |
For example lecture notes from 9/15, 9/20, 9/22, 9/27.