Shall we learn CSS...??
What is CSS..?
CSS is the language we use to style an HTML document.
CSS describes how HTML elements are to be displayed.
Also, CSS is used to control the style of a web document.
A CSS Style rule is made up of 3 parts.
- Selector: The HTML element at which a style will be applied.
- Property: A type of attribute of HTML tag.
- Value: The value assigned to properties.
Adding a Stylesheet to an HTML Document
There are 3 ways we can add a stylesheet to an HTML document.
- External Stylesheet
An external style sheet can be written in any text editor and must be saved with a .css extension and the external . CSS file should not contain any HTML tags.
HTML Code:-
<html><head><link rel="stylesheet" href="mystyle.css"></head><body><h1>This is a heading</h1><p>An external style sheet is applied here. Click HTML and CSS tabs to check the code</p></body></html>CSS Code:-
body { background-color: lightblue;}h1 { color: navy; margin-left: 20px;}Output:-
- Internal Stylesheet
Internal style sheets may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section of the HTML page.
HTML Code with Internal CSS:-
<html><head><style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;} </style></head><body><h1>This is a heading</h1><p>An internal style sheet is applied here. Click HTML tab to check the code</p></body></html>Output:-
- Inline Styles
An inline style may be used to apply a unique style for a single HTML element.
To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
HTML Code with Inline CSS:-
<html><body><h1 style="color:blue;text-align:center;">This is a heading</h1><p style="color:red;">An inline style sheet is applied here. Click HTML tab to check the code</p></body></html>Output:-
Written by: W.A. Eranga Dewmini
