Home » Internet » Web Designing » How to style your text or fonts using CSS

How to style your text or fonts using CSS



By using CSS styles you can control the complete look of your website with just a single file; it is called the stylesheet file in which you define all the styles for all the components of your website. A great thing about the stylesheet file is that by merely changing that file, whether your website has 5 pages or 5000 pages you can completely change the look and feel of your website without having to change individual web pages. Since most of the written content is displayed by using fonts it helps if you know how to style your fonts and text using CSS or cascading style sheets. A basic example of styling your font using CSS would be

#content p{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:10pt;
    text-align:justify;
    color:#CCCC66;
}

Most of the style definitions are easy to understand. For instance font family means what fonts to use while displaying the textual contends of a paragraph of the DIV called content. Before going further let us see what a DIV means in a cascading style sheets file. It’s basically a block on your webpage. Or you can call it a container. So everything defined within that container will look the way it has been styled in the CSS file. In the example above what we mean to say is that whenever <p> tag appears within the container "content" it should look the way it has been styled in the stylesheet file. In a similar manner you can style any text element on your webpage. Let us now see how to define a header tag.

#content h1{
    margin:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:20pt;
    color:#CC6633;
    border-bottom:1px solid dotted;
    padding-bottom:3px;
    display:block;
}

If you use the <h1> tag without the stylesheet definition it will use the default font of the user that might not look good with your current theme. The above definitions help you decide how your <h1> tag looks on your webpage. Most of the definitions are self explanatory but there are three things that might look a bit confusing. We have set margin to zero so that there is no blank space above and below the header tag. The bottom padding is used so that the bottom border does not touch the text. The display is set to block so that in case you define a background color or an image for your header tag it horizontally fills the space within the container. This is how you can style your font or text using CSS.

[tags]cascading style sheets, styling fonts, styling text[/tags]