Menu:
computers
graphics
webdesign
code generators
web resources
what's new
xara graphics
Related links:
Web site templates
SEO
All info about Tennis
All things graphic
CSS: what is it?
It is a script which can control the style and layout of multiple web pages. It separates your content from your style.
Types of Cascading Style Sheets
There are three types of CSS
Inline Styles
An inline style rule is coded into an HTML tag within the flow of your source
code. The purpose for inline styles is to give you a quick way to set a rule
on a one-time basis or to override an embedded or external style rule.
Embedded Styles
Embedded styles are set in the <HEAD> section of your source code and
will override rules set in an external style sheet. The difference between
an inline style rule and an embedded style rule is that with an embedded rule
you don't have to create a rule with each use of an HTML element. An element
given an embedded style rule will render that element according to that embedded
rule each time it’s used on the page if no inline style is used to override
it.
External Styles
External styles are the least important in the cascading order, but the most
powerful of all. An external style sheet uses a link placed in the <HEAD>
section of your web page to a separate file containing your style rules. The
advantage of external style sheets is that you can make a change in that one
external file and have that change reflected on every page of your site that
draws its style rules from it.
<link rel="stylesheet" href="your namedstyle.css" type="text/css">
The term Cascading Style Sheets is a little misleading; only one type could be really considered a "sheet", i.e. a separate page - that is the "linked" or "external" style sheet type - and this is where the real power of using CSS lies.
The "cascading" refers to the hierarchy of control:
*Inline styles takes precedence
*Then Embedded styles rules follow
*The Linked external style sheet instructions will be used if In line or
Embedded instructions are not present.
To attach a stylesheet to a web site (this means the entire style will appear
the same across your web site) you add <link rel="stylesheet"
href="your namedstyle.css" type="text/css"> to your
HEAD Tags.
The best tutorials are at W3schools and Position is everything. The latter explains some well-known bugs in some browsers for CSS and how to use it when you can't have tables. You are invited to use any style sheet on this site.
You can use Topstyle to design your own css external style sheet. Download a free lite version of Topstyle here.
You can also save any of the embedded css scripts as a .css file and make it an external stylesheet. You would not include the <script> tags.
Here also is a pretty good style sheet generator
I use an external style sheet on this site. I find it difficult to learn because you cannot see where the content will be as you design a stylesheet. It also doesn't support multiple tables very well yet either. The best way to get an idea is to look at other web site style sheets. Look at their source and see what stylesheet name they are linking to i.e. mine is called ozweb2.css. You just attach that to the Home URL i.e..
http://www.ozwebhub.com/ozweb2.css
Another way of learning is to insert some inline CSS styles in your web pages. Following are some examples of embedded and inline CSS scripts.
You can buy CSS templates fairly cheaply here too.
© Jenny Campbell