Hello serena123,
Q. What are cascading style sheets?
-------------------------------------------------------------------------------
Cascading Style Sheets, or CSS in geek speak, is simply a tool to
apply or add styles to web pages or documents. By 'stlyes', I am
referring to:
- Font effects
- image effects
- table effects
- and numerous other effects or 'styles', far too many to be listed
here.
I suggest perusing this site as you read over this answer to get a
better grasp at the scope of CSS functions :
HTML Goodies Listings of Common CSS Definitions
http://htmlgoodies.earthweb.com/tutors/ie_style.html
A perfect example would be to show how a simple style sheet may be
implemented into a basic HTML page. You can either :
- add CSS internally (in the document itself)
- make a hyperlink reference to an external page that contains the CSS
- use CSS inline with HTML elements (example - <td> or <font> )
Before I begin to show an example of each and explain the benefits of
using CSS, take a peek at this webpage to see CSS in action. You will
be able to view a 'plain vanilla' webpage, and then click on some
links to apply different styles to the original page :
W3Schools CSS in Action
http://www.w3schools.com/css/demo_default.htm
-------------------------------------------------------------------------------
Q. How the concept can be used to produce more manageable web pages?
Since you can hyperlink to style sheets, you can use one on a website
with millions of pages with content. Let's assume you wanted to change
the way 1 million pages displayed the font. Typically you would have
to go through and change each page if you designated the font using
only HTML. However, using a CSS include, you would potentially only
have to change the one file to update the million pages in less than 2
seconds. Pretty neat right?
You can also have two (or more) seperate looks for a website should
you desire. This can all be done using only two external style sheets.
Furthermore you can control how your site would be displayed in each
browser on the market today.
Here is site that goes in depth of how CSS can make more manageable
web pages :
Why use CSS?
http://tech.irt.org/articles/js135/
-------------------------------------------------------------------------------
Example#1
I've gotten your two main questions answered, because I wanted to show
a few samples. Imagine a typical web page with no CSS. We'll make a
very small one here:
----------------------------------------------------
<html>
<head>
<title>Eat at Joes</title>
<body>
<!-- Our personal notes :-) Main Body table -->
<table>
<tr><td>
Hello - I love Google Answers!
</td></tr>
</table>
<!-- End Our personal notes :-) End Main table -->
</body>
</head>
</html>
----------------------------------------------------
Looking at the above HTML in a browser would show a table printing the
message above, using the browsers default fonts.
Let's try adding some inline style to the way the message is displayed
:
----------------------------------------------------
<html>
<head>
<title>Eat at Joes</title>
<body>
<table>
<tr><td>
<font style="font-weight: bold; font-family: arial; font-color:
green;">Hello - I love Google Answers!<font>
Hello - I love Google Answers!
</td></tr>
</table>
</body>
</head>
</html>
----------------------------------------------------
Looking at the above would now produce the same text message, however
the font would be bold, the font face would be Arial, and it would be
green. That's a perfect example of inline CSS.
Example#2
Let's try using CSS in the head of the same document. This time we
will tell
the browser to apply all these styles to all elements contained within
a <TD>
area of the HTML.
----------------------------------------------------
<html>
<head>
<style type="text/css"> <!-- We tell the browser we are using CSS -->
TD <!-- Here is where we designate TD for styling -->
{
text-align: center; <!-- Here are all the stlyes we want to apply -->
color: black;
font-family: arial
}
</style> <!-- Tell the browser we are done with the style -->
</head>
<title>Eat at Joes</title>
<body>
<table>
<tr><td> <!-- everything in this td will have the style applied to
it-->
Hello - I love Google Answers!
</td></tr>
</table>
</body>
</head>
</html>
----------------------------------------------------
Due to the length of this answer already, and it's complexity in
format, I will offer this as my answer. I would like to at least offer
you a link to a resource site that will show you how to use the most
popular way of using CSS - linking to an external style sheet :
HTML HELP Linking to style sheets
http://www.htmlhelp.com/reference/css/style-html.html
The site above gives you much more insight than I could have ever
offered in this space, and has a fairly easy learning curve.
To assist with this answer I searched Google for:
link to external CSS
://www.google.com/search?q=link+to+external+CSS
learn CSS
://www.google.com/search?q=learn+CSS
I hope this sufficiently answers your questions. Should you require
clarification, or more assistance, please ask before rating this
answer. I would love to assist as much as I can.
Thanks for the question!
SgtCory |
