Programming Languages
What is CSS?
Cascading Style Sheets is a means to separate the presentation from the structural markup of a web site. By applying a CSS style you have the ability to keep the structure of your document lean and fast, while controlling the appearance of the content.
HTML was intended as the structural markup language. This language focuses on the roles that the different elements of a document have to play, not how they have to look. CSS has been invented and developed for the Internet. It is not an adapted tool from print or programming, but a means of enhancing HTML. Since CSS takes care of the presentation, the structure of the document can be static HTML, and the content either contained in the HTML itself, or generated by ASP, ColdFusion, XML and/or other technologies.
Some Benefits CSS:
- Style sheets allow you to separate the style and layout of your HTML files from their informational content. You can define the look of a site in one file, and change the whole site by changing just the one file. But be careful of unexpected effects ! You can make all of your HTML layout and formatting changes in one location, either in an external file referenced by any number of pages, or the style can be applied to a specific section of text within the body of a page. The HTML code becomes simpler and more manageable because you don't have to keep repeating tricks to control rendering in your HTML files (except that you will need for a while to maintain good presentation for older browsers).
- You have finer and more predictable control over presentation. CSS has been designed to deal with issues which HTML was not.
- You have finer and more predictable control over presentation. CSS has been designed to deal with issues which HTML was not.
- Older browsers will simply ignore your style sheets so they will not break existing pages.
- The CSS style sheet mechanism allows readers to influence the presentation of HTML documents. Style sheets allow both document authors and readers to specify rendering rules for HTML documents. Cascading means that if both parties supply style sheets then the browser will apply both, using further rules for resolving conflicts.
- Style sheets will allow companies to easily adopt a house look and feel, and this will help give readers a sense of where they are and what they are reading. Style sheets can be pointed to from Web documents via hyperlinks and this will dramatically simplify the maintenance of Web sites. If the company later changes the house style they only need to make changes in one place.
- Style sheets will also improve the printing of Web documents. Paper has different properties than a computer screen and the differences can be accounted for in a style sheet. Web authors should be confident that their documents will look as good on paper as they do on computer screens.
- People with disabilities have better access to your pages. Visually impaired Web users may need increased font sizes and will be among the first to benefit from style sheets. CSS provides a framework for speech style sheets. A style sheet can produce rich aural presentations by describing pauses intonation, and other components of speech along with non-speech sound cues.
Tips
Link Color
If you want to make a link a different color than the other links on you page, use this:
<A href="file.html" style="color: green" > </A>
Remove line under links
Want to remove the line under certain links? Use this:
<A href="file.html" style="text-decoration: none" > </A>If you want to remove the lines under every link use this:
</script><style type="text/css"><!--a {
text-decoration: none;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;}a:hover {
text-decoration: underline}--></style>
Centered Tables
[Thanks to Ian Hickson for giving me the solution for this one.] You've put this into your style sheet:
.centered {text-align: center;}And this HTML:
<div class="centered"><h3>Test of Centering</h3><p>Table of cities and states</p><table border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td> <td>California</td></tr></table></div>Here's what you get:
Test of CenteringTable of cities and states Pekin
Illinois
San Jose
California“Aha,” you think. “My shiny new browser is broken.” No, it isn't. It's working exactly as CSS level two says it should. Section 16.2 of the specification says that text-align describes how inline content of a block is aligned. If you look at the Document Type Definition (DTD) for HTML, you will discover that tables are not inline elements. Here's how you fix the problem. Add this to your stylesheet:
.centered-table {
margin-left: auto;
margin-right: auto;}Setting the margin-width to auto makes the browser calculate the margins according to the formula in section 10.3.3 of the specification. In this case, it makes the left and right margins equal, thus centering the table. Your HTML now changes to this:
<div class="centered"><h3>Test of Centering</h3><p>Table of cities and states</p><table class="centered-table" border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td><td>California</td></tr></table></div>And you get the desired result:
Test of CenteringTable of cities and states Pekin
Illinois
San Jose
California
Classes
A selector can have different classes, allowing the sameelement to have different styles. For example:
.color1{
color: #000000}now in your HTML coding you would put<H3 CLASS="color1">The font color will be the colorspecified in the color1 class. <H3>
Group Your Margin Attributes
This code works in IE 3.02 and 4.0.
When using Style Sheets, you can set margins for the entire document in the BODY section. The margin-left, margin-right, and margin-top attributes set the side margins and top margin. You can specify the margins in points, inches, centimeters, or pixels in positive and negative numbers. For example:
BODY {
margin-left: -10px;
margin-right: -10px;
margin-top: 20px}
However, instead of setting the margin attributes separately, you can combine them into one attribute called margin. Instead of the code above, you can simply use:
P {
margin: 20px -10px-10px}
The implied order for margin is top, right, and left. If you specify a single value, it will be applied to all three margins.
Headlines
Want to make a special headline for your page with out using big, slow images?Try this:
<HTML><HEAD></HEAD> <BODY bgcolor=green><DIV style="
position: absolute;
top: 15px;
width: 370px;
height: 80px;
font-size: 60pt;
font-family:Verdana;
color:red"
>ARCHIVE</DIV><DIV style="
position: absolute;
top: 35px;
left: 110px;
width: 300px;
color:blue;
height: 20px;
font-style:italic;
font-family:Arial;
font-size: 45pt ">Zach's</DIV></BODY> </HTML>
Search Engines
Some search engines take outbound links into account when they rank your page. For example, linking to a well-known page about root beer and including the words "root beer" in the link text could boost your ranking for those words. Occasionally, it would be nice to get this advantage without encouraging visitors to leave the site. The solution is to use a bit of CSS to hide the link from human visitors. Because search engines don't see what is happening on the screen, they can't differentiate the hidden link from the normal links on your page. Simply include the following in an external CSS file:
A.sample {
text-decoration: none;
color: black;
cursor: text;}This removes the underline from the link and changes its color to black. Should the browser support CSS2, it will also prevent the cursor from turning into a hand when it is located above the link. Then use the following in your HTML:
<A class="sample" HREF="targetaddress">link text</A>
Graphic List Bullets
- You've wanted to do this for years.
- You want a list, but you don't want it numbered.
- You don't want regular bullets, either.
- You want a custom graphic bullet.
In short, you want a list just like the one described above. Before CSS 2, you had to build a table. Now it's so easy you'll laugh. Just put this in your stylesheet:
ul {
list-style-image: url("example.gif");} And replace example.gif with the pathname to the image that you want to use.
External Style Sheet
With an external style sheet you can change the look of your site by changing one file.
The file should not contain any html tags.An external style sheet can be written in any text editor.Your style sheet should be saved with a .css extension.Between the <HEAD> tag you will put the link code. Example:
<HEAD><link href="link.css" rel="StyleSheet" type="text/css"> </HEAD>
|
|||