CSS

CSS is very useful to separate the semantic from the style.

We could say that CSS takes care of two things: the graphical style and the geometry.

Graphical style:

  • font, text style
  • colors, borders, patterns

Geometry

  • position
  • sizes
  • padding and margins

on jsbin.com

<!DOCTYPE html>
    <head>
        <title>Page title</title>
        <style>
            .foo {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Title</h1>
            <p>Paragraph</p>
            <p>Paragraph with text in <span class="foo">italic</span></p>
        </div>
    </body>
</html>

There are 3 ways to apply a style

<!DOCTYPE html>
    <head>
        <title>Page title</title>
        <!-- external file -->
        <link rel="stylesheet" href="style/style.css">
        <!-- in the header -->
        <style>
            .foo {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <!-- inline using the style attribute -->
        <div class="foo" style="color:red">Some text</div>
    </body>
</html>
The "cascading" is CSS means if you have multiple styles applied to the same element and conflicting, for example trying to set the color of the same font, the style that will be applied is the one closer to the tag. So the inline style will have a priority over non-inline, then it depends on the position in the stylesheet. Some attributes have the same function as some styles. For example, what color will the following rectangle be? 
<!DOCTYPE html>
    <head>
        <title>Page title</title>
        <style>
            rect {
                fill: blue;
            }
        </style>
    </head>
    <body>
        <svg><rect x="10" y="10" width="100" height="100" fill="green" style="fill:red"/></svg>
    </body>
</html>

Red

I suggest to use styles whenever you have the choice. It will make it easier to extract them to an external stylesheet for example. Keep in mind that a style like 
width:100px
needs a unit like "px", where an attribute like 
width="100"
will take a default one if not specified.

CSS uses selectors to know on which tag to apply the style. Simple selectors can be a tag name, an id or or a class. 

<!DOCTYPE html>
    <head>
        <title>Page title</title>
        <style>
            <!-- tag name -->
            div {
                color: blue;
            }
            <!-- id -->
            #foo {
                color: green;
            }
            <!-- class -->
            .bar {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>A</div>
        <div id="foo">B</div>
        <div class="bar">C</div>
    </body>
</html>
There's a convention that there should never be two elements with the same id. A class should be used instead to apply style to multiple elements. But nothing will break if you don't respect this convention. You can also have multiple classes to identify the same element like 
<div class="foo bar"</div>

results matching ""

    No results matching ""