When we talk about the role of CSS in web development it plays an important role in designing and making web pages attractive. HTML is used to create the structure of a webpage while CSS is used to decorate these pages to make them attractive.
Applying CSS to HTML
There are mainly three ways you can use CSS on an HTML page. The standard methods in which CSS can be applied to HTML 🚀
- 📌Inline CSS
- 📌Internal CSS
- 📌External CSS
Although your need may vary from the above three ways how you are willing to inject your CSS into HTML mainly there are above standard methods to add CSS into HTML.
Inline CSS
Inline CSS is generally used when anyone is a beginner or there are only one or two CSS properties that are required to add.💡 For example, text color, a specific word color, or a background to be changed.
<h1> Change color to <span style="color:black;">black</span></h1>Benefits of using inline CSS
There may be the following benefits of using inline CSS
- Specificity- when we use inline CSS, it has the highest specificity than other CSS (internal & external)
- Adding dynamic style
- quick apply- you can quickly add CSS
- Reduced HTTP request – helps in avoiding extra requests for CSS
Internal CSS
Internal CSS is mainly used when there is a need for a 2-3 page website. You generally add css using the internal css method to increase development speed.
Internal css is used using a style tag in the head section of the HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>External CSS
External CSS is used when we have to create a large website that has multiple pages and the css will be reused.
Benefits of using external CSS –
- CSS files can be reused.
- common CSS variable to be reused
- common section CSS to be reused
- we can load external CSS after page load, which is not in the viewport to increase performance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/main.css"/>
</head>
<body>
</body>
</html>CSS Selectors and Properties
When we tend to use CSS in html we need to have a proper understanding of CSS selectors so that we can add css of html elements easily. CSS (Cascading Style Sheets) selectors are used to target and style HTML elements. Here’s a table with some common CSS selectors:
Types of CSS selectors in CSS
There are mainly three types of CSS selector classes, id and tag, and other CSS selectors originated from these three CSS selectors.
- Class css selector
- ID css selector
- Tag CSS selectors
| Selector | Example | Description |
|---|---|---|
| Universal Selector | * | Selects all elements |
| Type Selector | element | Selects all instances of a given element type |
| Class Selector | .classname | Selects all elements with a specific class |
| ID Selector | #id | Selects a single element with a specific ID |
| Descendant Selector | ancestor descendant | Selects all descendants of an ancestor |
| Child Selector | parent > child | Selects all direct children of a parent |
| Adjacent Sibling Selector | element + element | Selects an element that is directly preceded by a specified element |
| Attribute Selector | [attribute] | Selects elements with a specified attribute |
| Attribute Value Selector | [attribute=value] | Selects elements with a specific attribute value |
| Attribute Begins With Selector | [attribute^=value] | Selects elements with an attribute that begins with a specified value |
| Attribute Ends With Selector | [attribute$=value] | Selects elements with an attribute that ends with a specified value |
| Attribute Contains Selector | [attribute*=value] | Selects elements with an attribute that contains a specified value |
| :hover Selector | element:hover | Selects and styles an element when hovered over |
| :focus Selector | element:focus | Selects and styles an element when in focus |
| :nth-child Selector | :nth-child(n) | Selects every nth child of its parent |
| :nth-of-type Selector | :nth-of-type(n) | Selects every nth child of its type |
| :not() Selector | :not(selector) | Selects all elements that do not match the given selector |
Some of the other CSS selectors.
| Selector | Example | Description |
|---|---|---|
| :first-child Selector | element:first-child | Selects the first child of its parent |
| :last-child Selector | element:last-child | Selects the last child of its parent |
| :nth-last-child Selector | :nth-last-child(n) | Selects the nth child counting from the last child |
| :first-of-type Selector | element:first-of-type | Selects the first child of its type |
| :last-of-type Selector | element:last-of-type | Selects the last child of its type |
| :nth-last-of-type Selector | :nth-last-of-type(n) | Selects the nth child of its type counting from the last child |
| :only-child Selector | element:only-child | Selects the element that is the only child of its parent |
| :only-of-type Selector | element:only-of-type | Selects the element that is the only child of its type |
| :empty Selector | element:empty | Selects elements that have no children or text content |
| :checked Selector | input:checked | Selects checked radio buttons or checkboxes |
| :disabled Selector | input:disabled | Selects disabled input elements |
| :enabled Selector | input:enabled | Selects enabled input elements |
| :target Selector | #section1:target | Selects the target element with a specified ID in the URL |
| :root Selector | :root | Selects the root element of the document (usually the <html> element) |
| :lang() Selector | p:lang(en) | Selects elements with a specific language attribute |
| ::before Pseudo-element | element::before | Styles a virtual element before the actual content |
| ::after Pseudo-element | element::after | Styles a virtual element after the actual content |
| ::first-line Pseudo-element | p::first-line | Styles the first line of a block-level element |
| ::first-letter Pseudo-element | p::first-letter | Styles the first letter of a block-level element |
| ::selection Pseudo-element | ::selection | Styles the portion of a document that is selected by the user |
So finally you can use the above three ways to add css to the html page. if you are a beginner you can use it as you want. finally for a performant application or website CSS needs to be optimized to have maximum performance of web page or web application.