HTML Stylesheet
CSS
CSS stands for Cascading Style Sheets used to set the presentation and design of the HTML document.
It help the User to manage the CSS at one place for all the website
CSS is the language that is used to style the HTML Document,It tells about the HTML Documents display.
There are 3 ways to apply CSS in HTML document
1. Inline – Uses Style attribute in HTML Element
2. Internal – Uses Style Attribute in Head
3. External – Uses link in Head Section
Inline Example
Inline CSS uses the Style Attribute inside the HTML Elements.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p style="color:red;"<A blue paragraph.</p>
</body>
</html>
Internal Example
Internal CSS uses the Style attribute inside the Head Tag and apply CSS in HTML Elements
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: blue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a new heading</h1>
<p>This is a new paragraph.</p>
</body>
</html>
External Example
In External CSS, Style is referenced from another CSS file
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a new heading</h1>
<p>This is a new paragraph.</p>
</body>
</html>
Colors
Colors are the most important part of a website. It tells what your website looks like.
We can change the color of the text in many ways
1. We can change the Background color
2. We can change the Text Color
3. We can change the border color
Colors Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
Example of Background Color
<h1 style="background-color:black;">Hello World</h1><p style="background-color:white;">Hello Everyone</p>
Example of Text Color
<h1 style="color:green;">Hello World</h1><p style="color:orange;">Hello Everyone</p>
<p style="color:black;">My name is John</p>
Example of Border Color
<h1 style="border:2px solid red;">Hello World</h1><h1 style="border:2px solid blue;">Hello World</h1>
<h1 style="border:2px solid pink;">Hello World</h1>
</body>
</html>
Points to Remember
In Html we can change colors in 3 ways
1. Rgb(255,255,100)2. #fffff
3. Hsl(9,100%,90%)
An Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 style="background-color:rgb(251, 100, 31);">Hello World</h1>
<h1 style="background-color:#ffff;">Hello World</h1>
<h1 style="background-color:hsl(9, 10%, 74%);">Hello World</h1>
</body>
</html>