• Tutorial List

Add styles to HTML elements

Last updated Jul 08, 2020
How to add styles to HTML elements

How to add styles to HTML elements?

The CSS is used to add styles to HTML elements. Style means – adding color to a text or background, adding width, height, & margin to an element, increasing or decreasing the font size, etc.


What is CSS?

CSS is a language that stands for Cascading Style Sheets which is used to describe the style of an HTML Element or whole HTML document.


How to write CSS?

Here is the Syntax of CSS –

Selector{

  property: value_of_the_property;
  property: value_of_the_property;

}

Another_Selector{

  property: value_of_the_property;
  property: value_of_the_property;

}

Explanation –

Selector

The selector is the targeted HTML element or elements, which you want to add style. So, to style an HTML element, you must first select the element.

👉 How to select HTML Elements in CSS?

In CSS You can select HTML Elements by their tag name or class or id –

Tag Name Selection –

When you select an element with its tag name, it will apply the style to the all element that starts with the same tag.

<style>
  p{
    color:red;
  }
</style>

<p>Hello World!</p>
<p>A common paragraph</p>
<div>It is a container</div>

Class & ID Name Selection –

If you want to select a particular element or specific elements, the class & Id name selection will help you to do this.

To select an element with a class or an ID name, you have to first specify the class or the ID name in the HTML element that you want to style.

👉 How to add class and id to an HTML element?

  • class=”…”
    • The class attribute is used to add a class name to an element.
  • id=”…”
    • The ID attribute is used to add an id to an element.

The Class and ID name is totally up to you. But the important thing is the class name can be repeated, But the ID name cannot be repeated.

The ID selection is used to select a particular element. But, the Class selection is used to select a particular element or specific elements.

<p class="myClass">Hello World!</p>
<p class="myClass">A common paragraph</p>
<div id="myContainer">It is a container</div>

👉 How to select Class & ID in CSS?

  • Class Selection
    • You have to put a dot (.) before writing the class name.
  • ID Selection
    • You have to add hash (#) before writing the id name.
<style>
  .myClass{
    color:red;
  }
  
  .myClass2{
  	color:green;
  }
  
  #myContainer{
  	border:1px solid blue;
    color:blue;
  }
</style>

<p class="myClass">Hello World!</p>
<p class="myClass">A common paragraph</p>
<p class="myClass2">Another paragraph</p>
<div id="myContainer">It is a container</div>

👉 How to select multiple elements at once?

In CSS, if you want to select multiple elements & apply the same style to all at once, you have separate those selectors by the comma ,.

<style>
  .myClass, .myClass2, #myContainer{
  	border:1px solid blue;
    color:blue;
  }
</style>

<p class="myClass">Hello World!</p>
<p class="myClass">A common paragraph</p>
<p class="myClass2">Another paragraph</p>
<div id="myContainer">It is a container</div>

Property & Value of the property

  • CSS Property
    • The property name defines which property of the selected element you want to style. Such as width, height, background-color, etc. of the selected element.
  • Value of the property
    • The value of the property defines how the property of the selected element will look.

The property and the value of the property are separated by the colon :. And don’t forget to add the semicolon ; after giving the property value.

<style>
  .myClass{
    text-align:center;
    color:red;
    font-size:25px;
    border:1px solid black;
    padding:10px;
  }
</style>
<p class="myClass">Hello World!</p>

How to Add or Apply CSS in HTML?

There are few ways to add CSS in HTML. In the following, we will see those ways step by step –

1) Inline CSS

When you write CSS code in an HTML element, that’s called Inline CSS. Using the style=”…” attribute you can write CSS in an HTML Element.

The style attribute takes only a property name and the value of the property. And you can add multiple properties at once.

<p style="color:red;">This is a Pragraph.</p>

2) Internal CSS

When you write CSS in a web page that is called internal CSS. Using the <style> tag you can write the CSS in a web page. And the <style> tag must be written inside the head tag.

<!DOCTYPE html>
<html>
  	
  <head>
    <title>Internal CSS</title>
    
    <style>
      p{
        color:white;
        background-color:gray;
        font-size:25px;
        padding:10px;
        text-align:center;
      }
    
    </style>
    
  </head>
  
  <body>
    <p>Internal CSS Testing</p>
  </body>
  
</html>

There is one more way to add CSS in HTML called External CSS, but here we will not cover this.

Ask Questions

Your email address will not be published. Required fields are marked *