Objective: CSS
Learn:
Book: Chapter 8
Web Readings:
The book does not go into great detail, but CSS are important enough to require more than what is in the book. So read the web resources and these notes to get more details on CSS is about.
Cascading Style Sheets (CSS) is an enhanced type of html language used to control page layout and appearance of elements. CSS may be called styles but CSS are user defined styles not to be confused with built-in styles like italics, H1, etc. CSS does some of the same things <font> and other tags in html do so many traditional formatting elements/attributes are now obsolete like:
but CSS also has many new features not found in core html that either do things easier or do things that traditional html could not (but that are typical in word processing which is kind of what html is) such as:
Purposes of CSS are
Pros & cons of CSS are:
CSS follow the xml model which is to separate the format from the content, whereas html format elements are mixed right in with the user content. It is recommended that you use CSS in web sites since they are useful and most browsers support basic CSS. One problem is there are 3 levels of CSS and some are not well supported, and you must recognize what rules in CSS belong to what levels so when you read a book or a web site about some cool CSS feature beware that it is commonplace. The levels (of CSS) are:
For CSS you 1st define a style and then apply it to one or more elements either by
CSS is very flexible and powerful but also a bit complicated. There are 3 ways to apply a CSS style:
An external CSS file is common, especially on large or business sites, to control features you want to be the same on multiple pages like page color, headings, and default text font. Inline styles are common for individual element positioning, borders, and shading. Usually a web site will use an external CSS to control every page and embedded are only used for pages that differ from that norm. Indeed with use of classes in external CSS there really is no need for embedded and some may suggest only need external CSS.
External and Embedded separate the formatting from the content, which is actually a requirement in XML (but optional in html) so one will see that when dealing with XML it is required to use styles of sort to format the document.
Cascading means more than 1 style sheet can be defined on a page and the order of precedence is: inline, embedded, external (so inline is always used wherever its defined).
An external style sheet is a text file with the style command. The file has a
.css extension, for example mystyle.css, and any html page can use it by
inserting a <link>
tag in the <head> section like
<link rel="stylesheet" href="mystyle.css"
type="text/css" />
Note: link is an empty tag with several required attributes, where you specify
your file in the href similar to a hyperlink
A document wide style (or embedded style) uses the <style> tag in the <head>
section. like
<style type="text/css">
<!-- comment only to hide from old browser
/* style sheet commands
goes here, note /* */ is a comment */
-->
</style>
type is required by validators but is an optional attribute for
browsers which assume text/css. The type can also be in a meta tag
like <meta http-equiv="Content:-Style-Type" contents="text/css">
An inline style uses style="" attribute inside an
element in form
<element style="prop1: val1; prop2: val2">
where prop:val are property and value pairs with as
many as needed , for
example
<p style="margin-left: 2px;; font-family:Arial,
Helvetica, sans-serif">
used in this paragraph to change the margin and font to arial. You can see lots of styles in the
code for this page
Commands in the style sheet are the same whether in a .css file or embedded on a page, and
each command takes form
element {attribute1:
value
; atribute2:
value;...}
where ... means as many attributes (often called properties in CSS and
javascript) as you want. The element name is usually an
html element (like h1). Note the
syntax
for example, the style for this page is
<head>
<style>
<!--
body {color: black; background-color: red; font: 11pt}
h2 { font-family: Arial; color: #800000 }
h3 { font-family: Comic Sans MS; color: red }
p {text-indent: 0.25in; margin-left: 50px; margin-right: 100px;}
a:link {color: blue; text-decoration: underline;}
a:visited {color: red; text-decoration: none;}
a:active {color: red; text-decoration: none;}
a:hover {color: yellow; text-decoration: underline;}
-->
</style>
</head>
<body style="background-color: #8CFF8C">
In above, the body color in the style did not take effect because it was
overridden
by the body tag. The order of elements or attributes does not matter. There are many different attributes and possible values
to choose from. To learn more about them look at the
reference manual in book or visit a web site
Multiple elements (separated by , ) can be defined on 1 line. The same
element can be used multiple times for example:
h1, h2,
h3 { font-family: Comic Sans MS;}
h2 {color: red }
Some common attribute and values are explained below with values shown in color. Before discussing specific tags, some attributes are common to different elements:
Class
Styles can also be applied using a class. Define a class in a /
CSS code using a . syntax
.anyname { css code goes here }
instead of an element (it
must be below body in external style files); then in html code use
attribute like
class="anyname"
attribute
in a tag to apply the style. For example this page and this paragraph uses
.myval {color:#CC0066} in style
definition then is applied anywhere in html using code like
<span class="myval">your text</span>
Classes are useful in 2 ways
CSS ID
css ID can be used instead of a class. However in XHTML 1.1 an id must be
unique so can be used only once meaning to use in several places select a class
instead. The syntax is a bit different, so
define a class in a CSS code using # syntax
#anyname { css code goes here }
instead of an element (it
must be below body in external style files); then in html code use
attribute like
id="anyname"
attribute
in a tag to apply the style. For example on this page could have used
#myid {color:#AA0066} in style
definition
then applied it somewhere in html using code like
<span id="myid">your text</span>
CLASS versusID
Since class and id can do same thing, when should each be used. Use a CLASS
when there are are multiple instances since an ID
can only occur once on a page. One way to remember is that ID is like a person's
id so is unique whereas a class has many people. Class is more common and used
to make different elements (words, paragraphs etc) look alike. ID is
mainly used for layouts for example where there is only 1 menu, 1 banner, 1
content pane, etc. You will notice "class" used a lot in this page to give
common formatting to code snippets, while "id" is used further down in the
LAYOUT examples to create areas for menu, banner, links content, etc. For more info see
www.tizag.com/cssT/cssid.php
Use of styles in some common elements is described below. Note: a # means a measurement like 12pt or 0.5in or sometimes just a single #
A
: as seen above the anchor element has 4 pseudo classes (pseudo classifies elements based on its status, use or position for example
links can be clsssified based on user's mouse click & position) ) and attributes can be
a:link{color:#000000
; text-decoration:
underline | none}
a:visited
already been visited
a:active
once you lick on
a:hover
as cursor moves over it
Body: can use color, background-color, font, and also the attributes below
background-image:url('yourimage.gif');
background-repeat:
repeat | no-repeat | repeat-x | repeat-y;
repeat makes image tile
repeat-x | y only tiles horizontal (along top) or vertical (along left margin)
background-position:valueX valueY;
valueX can be: top,
center, bottom, #%, pixel number
valueY can be: right,
center, left, #%, pixel number
for example
BODY{background-image: url('name.gif'); background-repeat: no-repeat; background-position:
20% 0%}
puts the image in once at the top and 20% to the right
background: is shorthand (like font) for
all the different background- classes
Lists ol ul:
list-style-type:
square | roman | lower-alpha | url("anyimage.gif");
list-style-position:
inside; (tightens up bullets to text)
TD: table uses font and padding attributes as described above and below
Text: can be controlled using <p>, <div>, <span> or other tags with
the font and color styles. Other text styles are
word-spacing:
#;
letter-spacing:
#;
text-indent:
#;
line-height:
#; (can be # of lines like 1, 2, 1.5, etc)
white-space: pre;
(works like <pre> element so whitespace is recognized)
<div> and <span> tags are often used to group many elements into one style and to apply a class style. Recall <div> makes a return while <span> stays on same line. They are widely used with CSS. Virtually any content can be encapsulated in a SPAN or DIV tag and a style can be applied. So you can apply a style to a character, a word, a paragraph, multiple paragraphs, or an entire page using these elements with a style
Block elements like <p> occupy a rectangular box model (like a word processing textbox) which can be controlled by a variety of attributes as below
Margin
margin-top: #;
amount of space between page edge and box border
margin-bottom: #;
margin-right: #;
margin-left: #;
margin: # # # #;
for all four margins in order of top bottom right left
Padding
padding-top: #;
padding-bottom: #;
padding-right: #;
padding-left: #;
amount of space between box border and its text
padding: #;
where # gets applied to all four sides
Border
border-width: #;
all 4 borders or use border-top-width
border-bottom-width border-right-width border-left-width
border-color: #; all 4 borders or use
border-top-color border-bottom-color
border-right-color border-left-color
border-style: none
| solid | dashed | dotted; plus others, the default is none
border: is
shorthand and can also be border-top
border-bottom border-right border-left
Width, Height
width: #; all 4 borders or use
border-top-width border-bottom-width
border-right-width border-left-width
height: #; all 4 borders or use
border-top-color border-bottom-color
border-right-color border-left-color
Above was a concise summary of structure and common uses. There are many other CSS options and to use consult a reference manual or the textbook; the important thing for now is knowing the structure, purpose, and commonly used attributes and elements.
Html has no print control and is weak for printing, compared to say PDF or Word. CSS Pages can be set up to control printed pages. This is done using styles for:
Beware, as always for any styles, some of these may not work in all browsers, may only work in certain IE versions, so your mileage may vary. In particular most if not all of this is CSS-2.
Page Breaks: use styles
page-break-before or page-break-after
although you could put thes styles directly in a page, the "cleaner" way
to utilize is make a class in the head section like
<STYLE TYPE="text/css">
P.breakhere
{page-break-before: always}
</STYLE>
Then anywhere you want a break instantiate the class with any element
(like <img> or <p> ) for example
<P CLASS="breakhere">
@Media: Often what looks best onscreen is not optimal for printing so there are 3 choices:
@media screen {body {color:
green; background-color: red; font: 11pt}
} /* of course can use any other styles you want like font-family etc)
@media print {body {color: black; background-color:
white; font: 12pt} }
@Page use a page box model (@PAGE) to specify margins and printing
specs for page in form:
<STYLE TYPE="text/css" media="print">
@page
{margin: 1in;
size: 8.5in 11in landscape} /* any
of these are optional */
</STYLE>
Unfortunately, @page is not implemented in IE6 so
forget about using @page for now, so if you need margins then really should use
code liike
<style TYPE="text/css" media="print">
<!--
@page {margin: 3in; size: 8.5in 11in landscape}
html { margin: 3in; border: 1px solid red; }
body {margin: 3in; border: 1px solid green;}
-->
</style>
Above seems to work in IE, meaning onscreen looks okay and has no margins since
margins are only for media=print and margins do appear when printed due to the
body/html rule and not the @page rule. But for other browsers, other things may
or may not work, that is the problem with Css-2
In some ways use of media for screen and print is similar to Normal and Print view in MS-Word so what is shown on screen does not reflect all the margins and page setup that you see when printing. The problems ares Word takes care of it for you and Css-2 is not universal in browsers. Further, it is only something you need to worry about if you intend pages to be printed. Many people make printed documents into PDF's but they have their own problems (heavyweight, require plugin, overall annoying, awful onscreen viewing) so Css-2 offers a means to enable good onscreen viewing as well as basic print control like PDF or Word, if browsers and W3c can ever get everyone to adhere to the standards...LOL
Elements, like <img>, can be positioned exactly with styles using 3
attributes
position: absolute
| relative | fixed | inherit | static; the type of position
(see below)
left: #;
top: #;
is the upper left xy location, instead can be right, bottom; see example
in links at bottom of this page
In above: absolute is an exact position, fixed is absolute except it stays on screen even when scrolled, static is default and uses normal position based on its order in document (does not use x,y), relative is like static but offset by x,y, inherit means use attribute for parent container. Position does not work with all elements and is often used with <img> <div> <span> and <p>. Two other optional attributes to control how overlapping elements show:
A more advanced use of CSS is for page layout, basically instead of tables. This is more than the box model described earlier which was just for a small piece of text but instead layouts divide the entire page into areas. CSS layouts typically use CSS Id's with position attributes to define areas of a page like the left menu, top banner, main content etc.
A working example is shown in link below (examples), but the basic code is below. Layouts are not a new type of style but rather simply combine what you learned above to make a page layout in 2 basic steps
FIRST: in CSS code define CSS ids for page areas, in this example #Header, #Content, #Menu (and again these can be any names you want and you can define position and attributes anyway you want...further you could add more areas like #Bottom or #RightSide etc)
<style>
<!--
#Header {
margin:50px 0px 10px 0px; padding:17px 0px 0px 20px; height:33px;
border-style:solid; border-color:black; border-width:1px 0px;
line-height:11px;
background-color:#eee;
}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
}
#Menu {
position:absolute; top:100px; left:20px;
width:172px; padding:10px;
background-color:#eee;
}
-->
</style>
SECOND: in html code use DIV with each ID to layout the page like
<body>
<div id="Header">
BANNER AREA so your logo, image etc goes here
</div>
<div id="Content">
Content goes here like <h1>CONTENT AREA</h1><p>This is a simple two column
layout with a left menu box.</p>
</div>
<div id="Menu">Left menu so links go here
<a href="http://www.alistapart.com/" title="A List Apart: For People Who Make
Websites">A List Apart</a><br />
<a href="" title="">Fake Link One</a><br />
</div>
</body>
There are many examples in textbook and on web. This page uses some CSS so can look at its code to see examples, although it can be confusing to see code with all the text notes mixed in. Some other instructor examples are