How to add CSS in HTML?
Hello friends, in today’s article we are going to tell you how you can add any CSS file in an HTML file or how you can add an external CSS file to any of your use, or how to use inline CSS. If you can, then definitely read this article completely to know.
CSS is a language by which we can give an attractive look to any HTML document. While with HTML we give shape to a webpage, with CSS we give that page an attractive look. To write CSS like HTML, we also need a text editor (such as notepad, or notepad ++) and the changes made to the page are visible on the web browser. Through CSS, we can give various properties to HTML elements, which we will discuss further.
There are 3 ways to add CSS to HTML?
- Inline CSS.
- Internal CSS.
- External CSS.
It is easy to apply CSS within the form of an HTML document. The design of the web page is performed through CSS. In structuring the HTML web page, the structure is designed using CSS. There are three different types of usage of CSS to structure HTML. If you wish to make use of CSS to use CSS in HTML, it is possible to accomplish it by using three different ways.
Inline CSS | Add CSS in HTML Unsing Inline CSS
When we write CSS inside an HTML tag, it is called Inline CSS. In this way, the properties of CSS are written inside the “style” attribute. For example
Also Read: What is CSS explain it? and CSS example? | Types of CSS?
<div style="color:red;height:50px;width:50px;background-color:blue;">Test</div>In the above eg, we have written the CSS of the div element inside it. With this CSS, we will get a box whose height and width will be 50px, the background color will be blue and the text color will be red.
Also Read: How To Link CSS To HTML With 3 Methods?
Internal CSS | Add CSS in HTML Unsing Internal CSS
In this way, CSS is written on an HTML page only, whose effect also falls on that page only. In this method, CSS is written inside the style tags and the style tags remain inside the head tags. Internal CSS is the process of creating and utilizing CSS on the webpage of HTML that is, we create CSS inside HTML.
CSS inside HTML tag and then use it by calling the class and id. Tag and then use it to call class and id. CSS is when we write CSS in HTML head tags and apply the same HTML head tag on the same page, this type of CSS is known as internal CSS. It is easy to design and implement on an HTML page.
Note:- Here we have used the #box. We have given an id to the div as a “box”, and we are giving properties to that div based on its id. When we select an element on the basis of its id, we use # before the id. It is called id selector (like #box here).
If we want to apply the same properties to two or more elements, then we use Class Selector.
For e.g.
<html>
<head>
<title></title>
<style>
.myboxes
{
color:red;
height:50px;
width:50px;
background–color:blue;
}
</style>
</head>
<body>
<div class = “myboxes”>Test 1</div>
<div class = “myboxes”>Test 2</div>
</body>
</html>Here we have given the same class to both the divs and have written CSS based on their class. This CSS will apply to both of them. If we have more than two div’s which all have class “myboxes” then this CSS will apply to all of them. Here we have put .(dot) before the class of the element. We will call .myboxes as the class selector. We can also give CSS to an element based on its name.
For e.g.
<html>
<head>
<style>
p{ color: red; }
</style>
</head>
<body>
<p> This is a test </p>
</body>
</html>Here we have given CSS by selecting the p element on the basis of its name. It is called an element selector.
Also Read: How To Add Background Image In CSS?
External CSS | Add CSS in HTML Unsing External CSS
In this method, we create a separate CSS file. And link it in an HTML file. For example, if we have a file named basic.html and its CSS has a separate file named style.css.
basic.html
<html>
<head>
<title></title>
<link rel =“stylesheet” href =“style.css” type = “text/css”>
</head>
<body>
<p>This is a test<p>
</body>
</html>style.css
p{ color: red; }We have included our stylesheet on the HTML page through the link tag.
Also Read: How Do You Insert A Comment In A CSS File
Some Basic Properties of CSS
- Height :- This property is used to give a fixed height to an element.
- Width :- This property is used to give a fixed width to an element.
- Color :- This property is used to give color to the text of an element.
- background-color :- This property is used to change the background color of an element.
- Border :- It is used to make the border of an element.
- In this we define three things. The thickness of the border, its style and its color.
For eg we have a div whose id is “mybox”. In this, we understand how many ways we can give borders.
<div id = “mybox”>This is a test</div>On this div, we are applying internal CSS.
<style>
#mybox
{
border: 1px solid black;
}
</style>
4 thoughts on “How to add CSS in HTML?”