Stylesheets govern the appearance of a webpage. They contain information on what colours should be used, what size your content should be, how it should position itself on the webpage and much more.
You can link your webpage to a stylesheet by referencing that stylesheet in the head element of the HTML file. A single HTML file can incorporate information from multiple stylesheets, and a single stylesheet can serve multiple HTML files. You can reference the stylesheet like this:
<link rel="stylesheet" type="text/css" href="main.css">
In this code, 'href' defines the location of the stylesheet. Right now, the file "main.css" (our stylesheet) does not yet exist. Let's fix that.
Create a new file in your code editor and save it in the same folder as your 'index.html' file. Set the file name to 'main' and save it as a Cascade Style Sheets (.css) file. The complete file name should be 'main.css'.
A single CSS file can serve as a stylesheet for an infinite number of HTML files. This is very useful because it enables you to change the style and layout of multiple webpages simultaneously. It is also worth noting that one HTML file can use multiple stylesheets. For instance, you may find stylesheets online that you wish to use in addition to your own. You can link to additional stylesheets by creating new entries in the HTML head element below any previous stylesheet declarations. Most parts of the declaration will remain the same. You simply change href="main.css" to reflect the location of the new stylesheet:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
For now, we will just use the 'main.css' stylesheet we created and the head element of your HTML file should look like this:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
</body>
</html>
Once the 'main.css' stylesheet is linked to your HTML page, you can begin to add some styling information. In this example, we will be styling the body element of our HTML page. As you progress through these tutorials we will explore CSS in greater depth and style other parts of the website.
Begin by opening the 'main.css' file in your code editor. CSS code generally follows the same format: you declare the name of a given element/class/id then list its properties inside curly brackets {}. For example, we could style the body element of our webpage by typing the following:
body {
margin: 0;
text-align: center;
background-color: Snow;
}
Notice how we declare the name of the element we are styling (body) then modify its properties one-by-one. This is what you may want to consider when styling the above properties:
x10hosting offers free and fast web hosting as well as other extras for your website such as custom email address and SQL databases. Creating a free or premium account using this link will help support this site.