DelphiFAQ Home Search:

Getting started with CSS

 

comments244 comments. Current rating: 5 stars (43 votes). Leave comments and/ or rate it.

Question:

I want to make my HTML pages cleaner and move the text decoration tags into a single style sheet but I don't know the exact CSS syntax.

Answer:

One could just load the style sheet from a site that you like and start from there, modifying their style sheet. This works in most cases, problem is, you might not get the best results from it. I have seen many style sheets that failed a CSS validation test.

Note:
A free online CSS validator can be found here: http://jigsaw.w3.org/css-validator/

Here are the properties that you can set:

color:
allows you to change the color of the text. Use web-safe or named colors.

text-decoration:
gives you a few options on the formatting of your links. Set this to none to get rid of the underlines on links. If you want to bring them back, or put them in as a hover attribute, use text-decoration: underline.

font-weight:
allows you to change the boldness of the text. Set to bold or normal. There are other more specific values but they aren't supported by the browsers yet.

font-style:
is the command to change your text to italics. Set it to italic or normal to override.

font-family:
like you've seen before, this changes the typeface.

font-size:
pixel size. 10px or 12px is a good number if you *have* to specify in pixel (better don't to allow users to adjust the size from their browser's menu).

background-color:
allows you to give your link-text a background color. Especially helpful for highlighting on hovers.


So if you start a CSS sheet from scratch or if you only want to correct the bugs that the validator found.. here is a skeleton to start with:

<!--
BODY{
background:     #FEFEF0;
color:          #000000;
font-family:    Verdana, Arial, Helvetica;
font-size:      11px;
}

.HL{
background:     #ffff99;
color:          #000000;
}

.DISCLAIMER{
color:          #404040;
font-style:     italic;
}

.ST{
color:          #0000ff;
font-weight:    500;
font-family:    Courier New;
}


a:link  { text-decoration:none;color:blue;
          font-family:verdana,arial,helvetica;font-weight:500; }
a:visited { text-decoration:none;color:purple;i
          font-family:verdana,arial,helvetica;font-weight:500; }
a:hover { text-decoration:underline;background-color:Lime;color:black;
          font-family:verdana,arial,helvetica;font-weight:500; }

//-->

Comments:

 

 

NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.
 

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: