CSS is based on rules. These rules are defined on .css files, called style sheet. Style sheets can be composed of one or more rules, applied to one HTML or XML document; the rule has two parts: selector and declaration:
h4 { color : red}
The h4 element is the selector, and { color : red } is the declaration.
The selector works as a link between the document and the style, specifying the elements that will be affected by that declaration. The statement is the part of the rule that states what the effect will be. In the previous example, selector h4 indicates that all elements h4 will be affected by the declaration stating that the color property will have the network value (red) for all elements h4 of the document or documents that are linked to that style sheet.
We have three ways to link our style sheet with the HTML file.
The first option is to use the <link> element, on the <head> section of the HTML file. We just need to specify the absolute or relative path/URL of our style sheet to import into our web page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aurelia is Awesome</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
</body>
</html>
Next, we can use the <style> element of the HTML file, generally in the <head> section too. It will be loaded when our file is called by the application:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif;
}
</style>
</head>
<body>
<!--Here the styles will be applied-->
</body>
</html>
Alternatively, we can style the HTML directly using the style flag:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Nothing here-->
</head>
<body>
<h1 style="color: blue">Aurelia is awesome!</h1>
</body>
</html>
Ready to add some cool style to our application? This is just the beginning!