Basics of CSS
Web pages would be extremely boring if they only had black and white text as we created above. In most web pages that you've seen, there are colors, images, and several other interactive elements that make it look appealing. CSS helps us achieve this purpose.
Since we've understood how a basic webpage can be created, let's see how it can be styled. Style sheets are created and linked with the HTML document using the <link> tag within the head element.
1<!DOCTYPE html>
2<html>
3<head>
4<title> My First Webpage </title>
5<link rel="stylesheet" href="style.css">
6</head>
7<body>
8<h1> Hello World! </h1>
9</body>
10</html>Style sheets can also be defined within the HTML document using the <style> tag within the head element. However, the recommended approach is to use external style sheets.
CSS Rules
CSS styles can be applied to elements in an HTML document. More specifically, it defines the rules that need to be applied to an element or group of elements in HTML.
In CSS, rules begin with a selector. The selector is the HTML element that we want to style. This is followed by curly braces, inside which is the declaration. The declaration specifies the properties that need to be styled along with a corresponding value. The property must be followed by a colon and the declaration by a semi-colon.
Note that if we specify the selector as an HTML element, then all the HTML elements in the document will be styled in the same way. This saves a lot of time as we do not have to style elements individually!