How to use grid area to create grid layout
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
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.
There are mainly three ways you can use CSS on an HTML page. The standard methods in which CSS can be applied to HTML 🚀
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 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>
There may be the following benefits of using inline 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 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 –
<!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>
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:
There are mainly three types of CSS selector classes, id and tag, and other CSS selectors originated from these three 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 |
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.
Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.
With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
Hello guys in this article we are going to see how to create moving background animation in CSS for the website. So here we are going to use @keyframe animation and translate…
System design is the process of defining systems and architectures to satisfy specific requirements. It includes the process of building architecture, components, or interfaces to satisfy the specific requirement which translates requirements…
Hello coders, in the blog we will learn how to reload a page in the React JS application Unlike the traditional web development practices where a simple page refresh could suffice, ReactJS,…
in this article, we will learn how to add an image in HTML. the syntax of adding an image in HTML is the same whether it reacts or another technology. <img/> is…