January 28, 2016

External Style Sheets in CSS3

By Krishnaa CSS 0 Comments

It is a very good practice to keep CSS styles in a separate file which is also known as sheet. By doing so, you will have 2 files to work on, one will be HTML and another will be CSS. You only need to add reference to the CSS style sheet using link element. This link element should be placed inside head tag. You can also use same style sheet in another projects. This will result in code reusability and will save a lot of time.

Create a folder and give it a name as CSS3. Inside that folder, create 2 files and name them as mystyles.css and index.html. Copy and paste the code given below in those files and check the output.

mystyles.css

div {
    background-color: red; 
    font-weight: bold;
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorials</title>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<div >Hello World!</div>
</body>
</html>

You May Also Like: