Structure
body {color: black; }
The general syntax for all style sheets is as shown above.
You will have a selector like the body of the document or a paragraph or a
link followed by curly brackets. Inside the curly brackets, you define your
choices such as background, text color, image source. Notice there is a
colon separator. It is recommended you put a space before the value as
shown. The item inside the curly bracket is called property. The property is
paired by name and value. Color is the property of body tag and black is the
value. To summarize for every style sheet declaration you will use a slector
followed by curly brackets. Inside the curly brackets you will put the
property name and the value you want it to be. Each property pair ends with
semi colon. write all codes in small letters to comply with W3C. Let us
proceed and see what a selector is.
Selector
Any html tag can be used as a selector. The following
are very common html tags
body - the whole document
p - paragraph
img - image or any picture
a - hyperlinks
hr - page break
br - line break
ul - unordered lists (bulleted)
ol - ordered lists (numbered)
li - list elements for either ul or ol
blockquote - quotes ( indented space)
div - a box within the body with line break
span - a box without line break
title - the title of the document
table - a table for data display
tr - table heading
td - table cell
With the knowledge of these html tags you can write a decent website. Add
CSS you can make them look professional. But there is a catch when it comes
to posting on the boards or decorating your home. You need an insight to AW
default style sheet. If you see the source code of your domus or any
BB, you will notice frequent use of class and id. classes are another
selectors but they are custom made. For instance this code will change the
appearance of the whole board. Try it on test site
.community: {background: maroon;}
.community is not part of html tag and it has a leading dot (.) The dot is the key
to creating custom groups. A dot followed by any phrase will be a
valid class. I used a class called .code to write the code. But the browser
does not know where to apply it to until you define your custom tag on an
html tag. Please view the source of this board and find the word community.
You will find it on the top of the page as <body class="community" . We
have said body is an html tag which has control over the whole document.
Giving the body a class will make it inherit the properties you set, meaning
background is maroon.
This doesn't make sense. Because
Jot already stated the background to be black. It is true that the pre
written background was black. But by style sheet rules the last author wins.
That is you who wish the background to be maroon. Since this site is completely
written in style sheet and most of them are grouped using
classes and ID's , let us dig a little further. The following are
important classes in this site which you need to memorize. Classes are not case sensitive
.community - everything you see on any page in this site
.pageStyleSheet - The section of your post
.pageStyleSheetBG - Everything but the banner
.pageTitle - The title of your post
.banner - The banner on the top including all the links.
.content - A subsection of your post
.contentSub - displays created by on the BB boards
.dynamictxt - date stamps
.dynam - counters of posts
.note - number of posts, different from .dynam
For a complete list download the link default
css
So far so good, but how do we write a style sheet and get all the power we need?
Style sheets can be written and linked in one of these three ways.
-
External - you type on a note pad the list of selector
and properties and save it on your web space as a file. The file must
have an extension .css. Example global.css . Then you can link it with
the following tag
First write the file called global.css
.pageStyleSheet {
background: white;
color: black; }
Then link it as follows
<link rel="stylesheet" type="text/css" href="global.css">
-
An inline style could be embedded on the page or your
post as follows
<style type="text/css"><!--
.pageStyleSheet {
background: white;
color: black; }
//-->
</style>
-
The last and not the best choice is to hard code it
on an html tag as follows
<table style="border: 5px; background: maroon; color:
white;">
In the next tutorial we will expand our knowledge of links with pseudo classes.
Please exercise on the basic concept and if you can change small items
like your post tile, that would be great. The font tag is deprecated. It
is recommended that you use use style sheet only for all decorative and
layout purposes. You domus will look good and you will tab into unlimited
power, restricted only by your imagination.
Basic Concepts
Arachnids are such Show Offs!
(- threads, 348 posts)
Cascading Style Sheet
(24 posts)
