Introduction to Styling with CSS3
CSS is a language that is used to describe and manipulate HTML elements to change the look and feel of a webpage. This tutorial will help you to grasp the basics and learn the advanced. All HTML elements can be manipulated in a never-ending amount of ways. CSS can decide aesthetic features including color, size and animations!
In order to manipulate HTML elements, CSS must have a suitable area to be written at. There are 2 main methods. The first (and most common) way is to create a .css file seperate to the HTML document, and link the file in the header of the HTML document with the following tag:
1
<link rel='stylesheet' type='text/css' href='my-stylesheet.css'>
Another way to add CSS to a HTML document is to use <style> tags. Using this opening tag will allow a space to write CSS markup until you use the </style> tag to close it.
1
2
3
4
5
<style>
.header {
color:red;
}
</style>
CSS3 Syntax
CSS syntax consists of 3 parameters, the selector, property and the value of that property. The selector is usually a callback to a class or id that has been declared in the HTML document, however default tags, mathematical formulas and many more can be used to manipulate the document. The property is the variable, that we're changing the selector into. Properties can range anywhere from color, to opacity. Finally, the value is the data we're assigning to the property. This value can be a string, number or specific unit.