CSS Basic Structure Templates
With these some basic CSS structure templates you can learn how to style your document.
Inline CSS
What use of inline CSS?
An inline style can be used to apply a unique style to a single element.
How to use inline CSS?
To use inline styles, add a style attribute to the start tag of the relevant element. You can use any of the CSS properties in the style attribute.
Inline CSS Template
<html>
<body>
<h1 style="color:red;text-align:center;">This is a heading</h1>
<p style="color:green;">This is a paragraph.</p>
</body>
</html>
Internal CSS
What use of internal CSS?
If you want to customize the style of any one of the HTML pages, it is best to use an internal style sheet.
How to use internal CSS?
Inserts the <style> element into the header section for internal CSS.
Internal CSS Template
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: red;
margin-left: 20px;
}
p {
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
External style sheets can be written in any text editor, and should be saved with the .css extension.
CSS style sheet template
For best results, copy and paste this code into a CSS file, and Try using.
File name: style.css
body { background-color: lightblue; } h1 { color: red; margin-left: 20px; } p { text-align: center; font-size: 15px; }
Linking style sheet
External style sheets should be linked inside the link element in the head section of the HTML page.
File name: style.css
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>