CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!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
Use of CSS border property:
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 powderblue; 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 powderblue; margin: 50px;
}
|
Tag Description |
|
|
|
|
|
Defines style information for an HTML document |
|
|
|
|
|
<link> Defines a link between a document and an external resource |
|
HTML Style Tags
Summary:
- Use the HTML style attribute for inline styling
- Use the HTML <style> element to define internal CSS
- Use the HTML <link> element to refer to an external CSS file
- Use the HTML <head> element to store <style> and <link> elements
- Use the CSS color property for text colors
- Use the CSS font-family property for text fonts
- Use the CSS font-size property for text sizes
- Use the CSS border property for borders
- Use the CSS padding property for space inside the border
- Use the CSS margin property for space outside the border