You can use the CSS line-height property when the default space between lines of text box looks a little narrow. The next CSS code shows this.
File test.css
p {
font: 16px Arial, Geneva, Helvetica, sans-serif;
line-height: 2.0;
}
Note: You can specify the line-height using standard CSS units of measurement, such as ems or pixels, but doing …
How to highlight text on the page without using font tags with CSS
You can create a class for the highlighting style and apply it by wrapping the highlighted text with <span> tags that apply the class:
1. You can create a CSS .hilite class.
File test.css
body {
font: 1em
Arial, Helvetica,Geneva, Verdana, sans-serif;
}
.hilite {
background-color: #FFFFCC;
color: #B24422;
}
2. You can apply the class:
File test.html …
How to remove all space between a heading and the paragraph that follows it with CSS
Browsers render a gap between heading and paragraph tag, by applying default top and bottom margins to these tags. If you want to remove all space between a heading and the paragraph that follows it, you have to remove the bottom margin from the heading and the top margin from the paragraph. The easiest way is …
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: …
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 …
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 …
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 …
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> …
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 …
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 …