CSS defines the appearance of our elements by defining the style attribute that we mentioned in the previous lesson. By doing adding CSS, we can specify our elements' size, position, color, and much more. Copy the following code and place it into your HTML file (replacing any existing code):
Save the file and refresh the web browser. The page should look like this:
Large Bold Text
It doesn't look great, but you get the idea.
In the example above, we assigned values to the properties of the style attribute of the element. That's quite a mouthful, so let's break it down visually.
|p||font-size, font-weight||40px, bold|
Notice that in the last line we specified two style properties. There are many more, and we can define all of them to get the exact look we want. Play around various style properties and values. Try some of these examples:
|Margin||The space around an element||style="margin: 20px;"|
|Padding||The space inside an element||style="padding-top: 20px;"|
|Width||The width of an element||style="width: 100px;"|
|Height||The height of an element||style="100%;"|
|Border||The border surrounding an element||style="border: 2px solid red;"|
|Font-Style||The style of the text in an element||style="font-style: italic;"|
We could customize a web page by changing the style of each element line by line, but this is highly inefficient. Instead, we can use CSS to define the style of all elements of a certain type, class or id. Copy the following code into your file (replacing any existing code):
Save and refresh your browser. The page should look something like this:
So now we've separated the elements from the style—the HTML from the CSS. Notice that we've styled both the h1 and p elements as well as the light-text class. Styling classes allows us to display the same element in a different way depending on what class (or classes) we assign to it.
Try changing some of the values, styling additional elements, and creating your own classes. Before moving on, you should understand how to use CSS to customize the look of HTML elements.