CSS Colors, Fonts and Sizes:
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
- CSS
color =
property defines the text color to be used. - CSS
font-family =
property defines the font to be used. - CSS
font-size =
property defines the text size to be used.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
CSS Border:-
The CSS border
property defines a border around an HTML element.
Example:-
p { border: 2px solid powderblue;}
CSS Padding:-
The CSS padding
property defines a padding (space) between the text and the border.
Example:-
Use of CSS border and padding properties:
p { border: 2px solid Red;
padding: 30px;
}
CSS Margin:-
The CSS margin
property defines a margin (space) outside the border.
Example:-
Use of CSS border and margin properties:
p { border: 2px solid Red ;
margin: 50px;
}
Link to External CSS:-
External style sheets can be referenced with a full URL or with a path relative to the current web page.
Example:-
This example uses a full URL to link to a style sheet
<link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”>
Example:-
This example links to a style sheet located in the html folder on the current web site:
<link rel=”stylesheet” href=”/html/styles.css”>
Example:-
This example links to a style sheet located in the same folder as the current page:
<link rel=”stylesheet” href=”styles.css”>