My MS-Windows95 Netscape Navigator 4.0 display
Design layout only extensions depend on Web browsers without to use style sheet
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ASCII">
<title>Style sheet Sample 1</title>
</head>
<body>
<h1>Style sheet Sample</h1>
<p>
This is a sample document.
<strong>Strong</strong> text!
</p>
</body>
</html>
Look this sample1e.html on your browser
My MS-Windows95 Netscape Navigator 4.0 display
If you think change font color red of heading.
You will change HTML document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ASCII">
<title>Style sheet Sample 2</title>
</head>
<body>
<h1><font color=red>Style sheet Sample</font></h1>
<p>
This is a sample document.
<strong>Strong</strong> text!
</p>
</body>
</html>
Look this sample2e.html on your browser
My MS-Windows95 Netscape Navigator 4.0 display
Yes you clear first target. But, you will required more changes if more large HTML document. There are many headings in large HTML document. And you must to change all headings. And if you think that more good color for heading, you must to change all headings again.
I want to specify red color font for all headings. I want more simple method.
Somebody say "I change all headings. It's a smple work." And have no questions about this simple mechanical repeat works.
I have no word for these people.
I say only
Please, repeat thats simple mechanical works.
Good bye...
If you have same questions to these simple repeat works and using extentions depend on Web browser, I recomment to use Cascading Style Sheet.
Same effect with style sheet. You will change HTML document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ASCII"> <title>Style sheet Sample 3</title> <link REL=STYLESHEET type="text/css" href="sample3.css"> </head> <body> <h1>Style sheet Sample</h1> <p> This is a sample document. <strong>Strong</strong> text! </p> </body> </html>
Look this sample3e.html on your browser
My MS-Windows95 Netscape Navigator 4.0 display
Change DOCTYPE declaration on first line,
and add <link REL=STYLESHEET ...,
The body is NOT changed!
Yes more change is required to specify font color red for heading.
These are described on sample3.css in
<link REL=STYLESHEET type="text/css" href="sample3.css">
line.
h1 {
color: red;
font-size: 2em;
}
strong {
font-size: 1.5em;
background-color: red;
}
Simple and easy to understand.
Settings for header level-1 are described in
h1 { ... } section.
In there color: red; mean font color red,
font-size: 2em; mean font size 2times larger.
Only this,
all h1 (heading level-1) is displayed this spec.
In this sample,
additional strong settings.
In the section strong { ... },
font size 1.5times lager,
and background-color: red; mean backgound color red.
What's simple!
Yes,
What is a weak point of cascading style sheet?
The Cascading Style Sheet works good only on nice logical marked up documents.
If you use h1 element for the words want to give emphasis
insted of strong element.
The Cascading Style Sheet will not work well on this document.
But, I think it is not a weak point of style sheet. Because, HTML designed for logical mark-up.
Major Web browsers support NOT completed. It is a big problem. It mean you cannot to see final layout.
Netscape Navigator 4.0 and Internet Exploder 4.0 support CSS. But NOT complete and NOT good. Amaya the experemental browser by W3C support CSS NOT complete, and cannot to display Japanese text.
So, we wait for release CSS full supported browser. Still, Browse in your mind, Sorry!
Under construction
The book Style sheet Web design by Sumi, Kentarou Ks resource! published by Gijyutu hyouron sya.
W3C Cascading Style Sheets, level 1
Kazuteru OKAHASHI Web site Japanese translation of CSS spec.
HTML4.0 spec. Japanese translation project Japanese translation HTML 4.0 spec.