Introduction
- CSS stands for Cascading Style Sheets which is used to style a web page.
- CSS is used to decorate the webpage by describing how HTML elements are to be depicted on the screen or other media.
- CSS has the power to control the layout of multiple pages at once and saves a lot of time.
Topics I Covered Today
- how to add CSS
- CSS Syntax
- CSS selector
How to add CSS
CSS can be added using three methods to add CSS in HTML
- Inline CSS
- Internal CSS
- External CSS
Inline CSS:-
it is added by the syntax <tag style=”CSS”/>
It is used only when you target to single element of the HTML.
Eg, <html style=” background: blue>
</html>
Internal CSS:-
it is added by the syntax <style>css</style>
It is useful when you target a single webpage.
For example, <html>
<head>
<style>
html {
background: blue;
}
</style>
</head>
</html>
External CSS:-
it is added by using the syntax <link href=” style.css”/>
It is used for multiple web pages.
| Index.html | Style.css |
| <html> <head> <link rel= “stylesheet” href=“style.css”/> </head> </html> | Html { Background: green; } |
CSS Syntax
h1 { color: blue; font-size;12px;}
To explain the above syntax, h1 = selector that points out the html elements to change its style.
Color=property
Blue = value
We can say, the CSS rule consists of a selector and a declaration.
CSS Selector
CSS selectors are used to choose the HTML components that we want to style.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
| Selector | example | Example Description |
| #id | #firstname | Select the element with id=”firstname” |
| .class | .intro | Select all elements with class=”intro” |
| element.class | p.intro | Selects only <p> elements with class=”intro” |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
