Styling Text with CSS

css text

The most common adjustment to web pages is to the fonts on the page.

You can change the color, style, size, and face of your fonts, and you can do it all with CSS. These are the CSS properties that can change the font.

Text COLOR 

The color property is used to set the color of the text.

You might be thinking that colour is spelt wrongly, but in css the "color" property uses the American spelling (as with most code).

With CSS, a color is most often specified by:

  • A HEX value - like "#000000"
  • An RGB value - like "rgb(255,0,0)"
  • A colour name - like "black"

The default color for a page is defined in the body selector.
When you define a color for the body tag all text on the page will be styled with that color unless otherwise stated within the style sheet.

body {
color: #000000;
}

We can set the default styles for the Heading Selectors like so:

body {color: #000000;}
h1 { color: #0000FF; }
h2 { color: #414141; }
h3 { color: #26b9d8; }

The "color" property in any element refers to text within that element

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

Text can be centred, aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers) look at the spacing between the words in the bottom paragraph of the example.

Here are a few examples of how you can use the alignment property:

h1 {text-align:center;}
p {text-align:right;}
.header {text-align:justify;}

This Heading Is Centered

This paragraph is aligned right.

This header class is justified which even though it wraps to another line it is still evenly spaced on the page.

 

Text Decoration

The text-decoration property is used to set or remove decorations from text.

The text-decoration property is mostly used to remove underlines from links for design purposes:

Example:

a { text-decoration: none; }

The example above will take all decoration values from all links on the page.
This way you can style your links differently for separate areas on your webpage or site as a whole.

 It can also be used to decorate text, example:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

These properties are very rarely used these days, the only one frequently used is the  "none" value in the first example.

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter