CSS can be applied to HTML in which ways?

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.

CSS can be applied to HTML in which ways?

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">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      box-sizing: border-box;
      margin: 0;
      padding: 0;

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">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/main.css"/>

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
Universal Selector*Selects all elements
Type SelectorelementSelects all instances of a given element type
Class Selector.classnameSelects all elements with a specific class
ID Selector#idSelects a single element with a specific ID
Descendant Selectorancestor descendantSelects all descendants of an ancestor
Child Selectorparent > childSelects all direct children of a parent
Adjacent Sibling Selectorelement + elementSelects 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 Selectorelement:hoverSelects and styles an element when hovered over
:focus Selectorelement:focusSelects 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.

:first-child Selectorelement:first-childSelects the first child of its parent
:last-child Selectorelement:last-childSelects 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 Selectorelement:first-of-typeSelects the first child of its type
:last-of-type Selectorelement:last-of-typeSelects 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 Selectorelement:only-childSelects the element that is the only child of its parent
:only-of-type Selectorelement:only-of-typeSelects the element that is the only child of its type
:empty Selectorelement:emptySelects elements that have no children or text content
:checked Selectorinput:checkedSelects checked radio buttons or checkboxes
:disabled Selectorinput:disabledSelects disabled input elements
:enabled Selectorinput:enabledSelects enabled input elements
:target Selector#section1:targetSelects the target element with a specified ID in the URL
:root Selector:rootSelects the root element of the document (usually the <html> element)
:lang() Selectorp:lang(en)Selects elements with a specific language attribute
::before Pseudo-elementelement::beforeStyles a virtual element before the actual content
::after Pseudo-elementelement::afterStyles a virtual element after the actual content
::first-line Pseudo-elementp::first-lineStyles the first line of a block-level element
::first-letter Pseudo-elementp::first-letterStyles the first letter of a block-level element
::selection Pseudo-element::selectionStyles 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.

About Author


Order for website design

Help :