CSS stands for cascading style sheets. It is a style sheet language used to style a Web page. How HTML will show of the website totally depends on CSS. It can control the layout of multiple web pages all at once.
What does CSS do?
- You can change your website looks using CSS.
- You can completely change your website looks with css code
- Css brings style to your web pages.
CSS Syntax
A css syntax consists of a set of rules. Seletor point to the html element you want to style, The declaration block contain one or declarations seperated by semicolons.For example:
In this example heading tag h1 will be center-aligned, with a red color heading .
|
1 2 3 4 |
h1 { color: red; text-align: center; } |
Example Explained
- h1 is a selector in CSS (it points to the HTML element you want to style: <p>).
- color is a property, and red the property value
- text-align is a property, center is the property value
What is CSS Selectors
A CSS selector selects the HTML elements(s) you want to style. We can divide CSS selectors into five categories:
- CSS Universal Selector
The CSS universal selector selects all the elements on a web page. For Example
|
1 2 3 4 |
*{ color: blue; font-size: 18px; } |
2. CSS Element Selector
CSS Element Selector is also known as a type selector.It selects the HTML element by
name.For Example:
|
1 2 3 |
ul{ border: solid 1px #ccc; } |
3. CSS ID Selector
CSS ID Selector helps you to styling the content by ID.The selector is define by using #
(hash). # sign come before the ID name declared by web developer.In html you can define id
by <div id=”dg”></div>.Here’s an example
|
1 2 3 4 |
#dg{ width:100px; padding:10px; } |
4. CSS Classs Selector
CSS Class Selector is one of the most useful selector.It is declared by by using dot and
followed by the name of the class. It is declared in html by <div class=”dg”></div>.
Here’s an example
|
1 2 3 4 |
.dg{ margin:15px; width:15px; } |
5. CSS Attribute Selector
The CSS Attribute Selector styles the elecment according to the attribute .In this selector
Attribute value mentioned in square brackets. No spaces in the opening square bracket
by <input type=”text”>.Here’s an example
|
1 2 3 4 5 |
input[type="text"] { background-color:#000; color: #fff; width:30px; } |
How To Add CSS
Three Ways to Insert CSS :
- Extenal CSS
- Internal CSS
- Inline CSS
External CSS: By using External css , you can change the style of whole website by changing just one file.It include in HTML file by using <link> element in <head> section of your html File.For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>How to use external Stylesheet In Html Page</h1> <p>Join Developer Guidance for web development blog</p> </body> </html> |
Internal CSS: An internal style sheet may be used if one single HTML page has a unique style.The internal style is defined inside the head section by using <style> element. For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <style> body{ background-color:#000; } </style> </head> <body> <h1>How to use Internal Stylesheet In Html Page</h1> <p>Join Developer Guidance for web development blog</p> </body> </html> |
Inline CSS: An inline style may be used to apply a unique style for a single element. Add the style attribute to the relevant element. T he style attribute can contain any CSS property. For example:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color:blue;text-align:center;">How to use Internal Stylesheet In Html Page</h1> <p style="color:red;">Join Developer Guidance for web development blog</p> </body> </html> |
