CSS Tutorials

How to underline headings with CSS

There are two possible solutions:

1. You can use the text-decoration property. This method allows you to underline the text in same color as the text itself. In this case you can use the following code.

File Test.css

h2 {

font: …

Learn more

How to add a background color to a heading with CSS

You can add a background color to any element, including a heading.  You can use the next CSS rule for all level two headings in a document:

File test.css

h2 {

background-color: #F4C90A;

color: #0C0C0D;

font: 12px Arial, Helvetica, Geneva,Verdana, sans-serif;

padding: 2px;

}

Note: You can use the padding to adjust the space between …

Learn more

How to display two different style of link on the same page with CSS

To demonstrate how to create multiple styles for links, you can take the code used in the article How to create a link that changes color on mouseover with CSS:

a:link, a:visited {

text-decoration: underline;

color: #6A5ACD;

background-color: transparent;

}

a:hover, a:active {

text-decoration: underline overline;

color: #191970;

background-color: #C9C3ED;

}

These style should be taken as …

Learn more

How to create a link that changes color on mouseover with CSS

You can create this effect, by styling the :hover and :active pseudo-classes differently than the other pseudo-classes of the anchor tag. Your links will display in blue color #6A5ACD if the next style is applied:

 

a:link, a:visited, a:hover, a:active {

text-decoration: underline;

color: #6A5ACD;

background-color: transparent;

}

 

You can make out :hover and :active pseudo-classes different …

Learn more

How to remove underlines from my links with CSS

The default indication that text on a Web page is a link to another document is that it’s underlined and is a different color from the rest of the text.  If you want to remove that underline you can use the text-decoration property to remove it. By default, the browser sets the text-decoration of an <a> …

Learn more

How specify the font of my text with CSS

You can specify the typeface that your text will adopt by using font-family property:

p {

font-family: serif;

}

CSS allows the specifications of some more generic font families, which are:

– cursive

– fantasy

– monospace

– sans-serif

– serif

– verdana

When you define a font that users don’t have …

Learn more

How to specify font size with CSS

You can use the font-size property to size text in CSS, for example:

font-size: 12px;

The next table describes the units that you can use to size fonts:

Unit identifier

Corresponding Units

pt
Point

pc
Picas

px
Pixels

em
Ems

ex
Exes

%
Percentages

Point and Picas

In this case we have for example:

p {

font-size: 12pt;

}

You should avoid using points and picas to style text for display on …

Learn more

How to replace font tags with CSS

Without CSS you need to set the style for each paragraph on your page:

<p><font color=”#800090″ face=”Verdana,Geneva,Arial,Helvetica”>The latest update of Oracle Solaris 11 delivers unprecedented scale for cloud infrastructures and Oracle environments.</font></p>

You can use CSS to define in the style sheet that the color property of the <p> tag is #800090, and …

Learn more