CSS
CSS(Cascading Style Sheets) is used to style the web pages the way you want. CSS provides various style properties like background color, border-color etc., to style webpages.
You can apply CSS to HTML document in three ways:
1. Inline CSS
style
attribute is used to define CSS properties at each HTML element. You can define multiple properties at once seperated by ;
.
<h1 style = "color:blue; font-size:40px; font-style: italic;"> One Compiler </h1>
2. Internal CSS
You can define CSS properties using <style>
tag in <head>
section. You can use internal CSS to apply styles for a single web page.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: pink;}
h1 {color: red;}
h2 {color: green; font-size : 40px; font-style: italic;}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
Try yourself here
3. External CSS
Using external css, you can define all CSS properties in a separate .css file and refer it in HTML file using <link>
tag. This is usually preferred when you have multiple html pages with same css styling.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>External CSS example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
CSS file(styles.css)
body {background-color: pink;}
h1 {color: red;}
h2 {color: green; font-size : 40px;font-style: italic;}
.title {
color: #5C6AC4;
}