//CSS: Text formatting

<New code>

HTML <style> - CSS style information used within the <head> of HTML5 documents

CSS font-family: - which typeface to use
CSS font-style: - which style: normal, or italic
CSS font-weight: - how heavy: normal, or bold
CSS font-size: - typeface size

CSS color: - indicates the text color
CSS background-color: - indicates the background color

CSS border: - indicates the color, thickness and style of a border

CSS width: - how wide an html element is

Introducing Cascading Style Sheets

Ah! Cascading Style Sheets — CSS — the better looking, better dressed cousin of HTML.

When HTML was invented, the internet was young, and speeds were too slow to for a visual web-browsing experience. Because computers were slow (it could take 10 minutes to download a picture), the first version of HTML had limited formatting. Later versions added more and more formatting features, but eventually programmers and designers became frustrated by cool-looking webpages that had incredibly clunky and difficult to read code.

So they decided to separate the structure (HTML code) of a document from it's style and design (CSS code).

Modern web pages are split into three fairly distinct chunks: HTML, Javascript, and CSS - and good programmers try not to mix them up.

The problem is that HTML will allow you to use some formatting codes within the HTML in order to allow backwards compatibility. Because of this it takes discipline to fully separate page structure, HTML, from it's formatting, CSS. However, you will save yourself enormous maintenance headaches by keeping all your style code apart from your page structure.

Applying CSS to your HTML code

CSS formatting can be pretty powerful. In your documents it can control the size, shape, positioning, angle, justification, font use, color, and much more.

Applying CSS to types of tags

This is pretty easy to do. Let's say that I wanted to change every piece of text in my document that is inside the <p> tags. I can do this by inserting the following code inside the <style> block inside the <head> of my document:

<!doctype html>
<html lang="en">
    <head>
        <meta name="author" content="Dave Drapak">
        <meta charset="UTF-8">
        <meta name="description" content="Paragraph CSS selector example">
        <title>drapak.ca - Visual Arts 10: Drawing</title>
        
        <!--
            Created:    15. September 2015 
            Updated:    
        -->

        <script>
        </script>
        
        <!-- this applies all these styles to every paragraph in the document -->
        <style>
            p {
                font-family:        Arial;
                font-style:         italic;
                font-weight:        bold;
                font-size:          20px;
                color:              Blue;
                background-color:   Grey;
                border:             1px solid Black;
            }
        </style>
    </head>

    <body>
        <p>I'm a paragraph just waiting for style!</p>
    </body>
</html>

Makes this:

This will turn all of the paragraph text into blue, 20 pixel high, bold italic Arial. Ugly, yes, but it will do it.

The part at the front of the CSS code - the p { - is the most important part. It is called the selector.

Learn more

Live example: CSS text formatting