How to Assign Multiple Styles on an HTML Element?
There are three main ways by which multiple CSS styles are implemented to HTML elements. These are described below:
Method 1: Inline CSS
In Inline CSS, the styling properties are placed inside the opening tag of the HTML element before closing tags. This method of CSS is mostly used where the line of CSS code is not more than two. It makes code very messy sometimes and becomes a headache while applying changes.
The syntax is described below:
Here, the “property1” is the name of the CSS property that is being used, and “value1” is its value; it can be in the keywords, pixels, percentages, etc.
Example: Assign CSS Properties Using Inline Method
In the HTML file, add a div element inside that and create multiple heading tags:
After compiling the above code, the webpage displays like this:
The output shows that elements are placed on the webpage.
Add CSS Properties
To add inline CSS property, add the “style” keyword. For instance, inline CSS properties are used in below code snippet:
The color and font-size of “<h3>” is set to darkcyan and 20px, respectively. The background of “<h2>” is set to dimgray color.
After adding CSS properties, the HTML page looks like this:
The output confirms that CSS properties apply to HTML elements.
Method 2: Internal CSS
In the internal CSS, the CSS properties are written in the “<style>” tag in the same HTML file inside the “<head>” tag. Let practice the below example:
Example: Assign CSS Properties Using Internal Method
In the HTML file, add a div element, and inside it makes a “<h3>” element:
Style “heading” Class
Create a “<style>” tag in the “<head>” tag and make heading class block inside it. After that, type CSS properties are below:
color:white;
font-size:20px;
background-color: darkcyan;
}
In the above code snippet, the color is set to white and the background color of darkcyan is set to an HTML element that contains “heading” class.
After compiling the above script:
The output shows that CSS properties are applied using the internal method.
Method 3: External CSS
The most widely used method of CSS is external CSS. The separate file is created with the extension of “css”. This file is linked to multiple HTML pages and all those pages can write their CSS on this file. The CSS file is created as:
The above snapshot shows that the CSS file is created with the name “style.css”.
Style “heading” Class
Paste the same class with properties in “style.css”. In this file, there is no need to add the “<style>” tag:
Linking CSS File with HTML File
To link the CSS file with HTML, the “<link>” tag is used. It contains two attributes “rel” and “href”. The “rel” defines what sort of file is being linked and “href” contains the path of the file that is being linked:
After linking of a CSS file, the webpage looks like:
That is how multiple styles can be assigned to an HTML element.
Conclusion
To assign multiple styles to an HTML element, use inline CSS, internal CSS, and external CSS. Inline CSS is added with the element tag before the closing angle of the starting tag using the “style” keyword. Internal CSS is added inside the “<style>” tag in the “<head>” portion. For external, the separate file is created with the extension of “css” and by using the “<link>” tag that CSS file is included inside the HTML file.
