Links without style

Browsers have a default style for links. Usually not visited links are blue and underlined, visited links are purple  and underlined, active links are red and underlined and when you position the mouse over a link the pointer becomes a hand. The next piece of code removes the decorations on links:

   <style>
      a:link { text-decoration: none; color: black; }
      a:active { text-decoration: none; color: black; }
      a:visited { text-decoration: none; color: black; }
      a:hover { text-decoration: none; color: black; cursor: auto;}
   </style>

The style declaration for "a:link" sets the style for unvisited links, "a:active" sets the style for active links (the style for active links can be obtained when you press the mouse on a link and hold it), "a:visited" sets the style for visited links and "a:hover" sets the style for links when the mouse cursor is over them. It isn't usually a good idea to have links without style because users can't differentiate them from normal text, but sometimes is necessary to remove or override some of the default attributes of links.

Of course you can have all declarations in one line, just like this:
   <style>
      a {text-decoration:none; color: black; cursor: auto;}
   </style>
but having them more detailed allows better customization.

CSS class selector

CSS class selectors apply the defined style to all the HTML tags that have the attribute class="<some class>". This is how you define a style class:

   <style>
      .redText {
         color: red;
      }
   </style>
And all the tags that have the attribute class="redText" are styled as declared. For example the next tags, div and span, will have red colored text:

   <div class="redText">some text</div>
   <span class="redText">some other text</span>

Change selection color with CSS

To change selection color with CSS you can use this code:

   <style>
      .redSelection::selection {
         color: red;
      }
      .redSelection::-moz-selection {
         color: red;
      }
   </style>

Now all the tags with the class "redSelection" will have red colored text when selected. Unfortunately in Firefox the support is not yet fully implemented and the selector "selection" must be prefixed with the vendor prefix separately.

Text shadow

To add a shadow behind a text you can use the CSS property "text-shadow". It has this signature:

   text-shadow: horizontal-position vertical-position blur color;

The positions can have negative values. Here are some examples of test shadow declarations:

   <style>
      .shadow1 {
         text-shadow: 2px 2px 5px black;
      }
      .shadow2 {
         text-shadow: -1px 1px 1px red;
      }
      .shadow3 {
         text-shadow: -2px -2px rgba(0, 0, 0, 0.5);
      }
      .shadow4 {
         text-shadow: 1px 1px red;
      }
      </style>

It is just this simple!

Working with em units in CSS

The specification for "em" says that "em" is "equal to the computed value of the "font-size" property of the element on which it is used, and the property "font size" is inherited, so when you declare something like this:

   <style>
      h1 {
         font-size: 1.5em;
      }
   </style>
It means that the text in "h1" tags will be 50% larger than the normal text on the page, but it's size will depend on the browser default for "font size", which can differ from browser to browser and you don't know exactly what "1.5em" means. That is why i like to do something like this:

   <style>
      body {
         font-size: 10px;
      }
   </style>

After that declaration exactly what "1.5em" means. it means "15px" and when you change "font size" for the "body" tag all the sizes declared is "em" change automatically.

Add image as list bullet

To change the item marker of lists to a custom image you can do something like this:

   <style>
      ul {
         list-style-image: url('myImage.png');
      }
   </style>

You can replace 'myImage' with your specific image, which can contain the path to the image.

Special characters in HTML

Sometimes you want to add in your web pages characters like "<", ">" or "&". These are special characters because "<" and ">" are used to write HTML tags and the browsers "thinks" you are are trying to write tags and it tries to interpret them. The character "&" is used to writhe these special characters and when the browser encounters "&" it tries to find the specific special character. Since you can't write special characters just like that in HTML there are codes for each character. Here are some examples:

• "<" - &lt; (less than)
• ">" - &gt; (less than)
• "&" - &amp;
• " " - &nbsp;
• "©" - &copy;
• "€" - &euro;

These are just a few. Here is a larger list of HTML codes for special characters.

Comments in CSS

Sometimes you need to add comments in CSS code, perhaps to explain what the code does or for debug. Comments in CSS look like this:

   /* commented code  */

Comments can be placed on one row or they can span for several rows.
For example the next piece of style makes the text red colored. Note that the declaration for yellow colored is commented and disregarded.

   <style>
      .redText {
         color: red;
         /* color: yellow */
      }
   </style>

Multiple background images

CSS3 introduced the possibility to have multiple background images, just like that:

   <script>
      body {
         background: url(image1.png), url(image2.jpg);
      }
   </script>

This code puts the images "image1.png" and "image2.jpg" in the background. Note: the images are separated by ",". It is useful, but it doesn't look great. To help there are some attributes for the background property:

   <script>
      body {
         background-image: url(image1.png), url(image2.jpg);
         background-repeat:no-repeat;
         background-size: 60px 40px, 100% 100%;
         background-position: left top, right bottom;
      }
   </script>

Note: The first image declared appears on the front and the second on the back. It is possible to add more than two images and when you don't want to use some of the attributes for background properties you can just skip them. For example in the previous code snippet the property "background-repeat" has only one attribute.

Of course you can do all style declarations for multiple images in only one statement, just like that:

   <script>
      body {
         background: url(image1.png) no-repeat top left, url(image2.jpg) no-repeat bottom right;
      }
   </script>

Here you can find out more about  multiple background images.