How to define Inline styling in CSS?
By Utkarsh TiwariHey folks,
I am up with a new tutorial of CSS. So in this tutorial, we will learn how to define inline styling in CSS. We use it to decorate our webpage and to make it more interesting. CSS makes our text more appealing.
Cascading Style Sheet(CSS) is a very important part of web development. Its main advantage is it is easier to use and update. We use CSS to handle look and feel parts of our web page. And it has so many formatting effects.
Inline Styling in CSS
So let’s begin with our tutorial on how to define inline styling in CSS. And we use CSS to create appealing dropdowns, image effects. We can implement it in three ways which are listed below :
- Inline
- Internal
- External
So let us start with the first one which is inline styling. But this is the least preferred method of adding CSS to our Html file. In this case, we add a style tag inside the head tag.
<html>
<head>
<title>CSS</title>
<style>
body{
background-color: black;
color: white;
}
h1{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<br>
<p>This is sample paragraph</p>
<br>
<ol>
<li>inline stylinsgs</li>
<li>internal stylings</li>
<li>external stylings</li>
</ol>
</body>
</html>
We use background-color to change the background colour of our web page. But we use color to change the colour of the text. In place of colours, we can also specify colour codes.
Internal Styling in CSS
In internal stylings instead of writing inside the head tag, we write inside respective tags. Like for defining formatting for the body tag, we write the same thing inside style=” “. In this method, we use style as an attribute inside a tag.
And inside inverted commas, we define our CSS properties. This method is much better for repeated use. Because it is easier to edit and is fast than inline stylings.
<html> <head> <title>CSS</title> </head> <body style="background-color: black; color: white;"> <h1 style="color: blue;">This is a heading</h1> <br> <p style="color: blue;">This is sample paragraph</p> <br> <ol> <li>inline stylinsgs</li> <li>internal stylings</li> <li>external stylings</li> </ol> </body> </html>
External Styling in CSS
It is the most used form of CSS. We create a separate CSS file in external styling. And it is linked to our Html file. Because of which it is used by most of the web developers.
style.css file
body{
background-color:blue;
color:white
}
h1{
color:yellow;
}
p{
color:green;
}Now, this file is linked to our main Html file. We use the link tag to create a link between the two files. So now we can edit apply formatting effects to our text.
CSS.html file
<html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>This is a heading</h1> <br> <p>This is sample paragraph</p> <br> <ol> <li>inline stylinsgs</li> <li>internal stylings</li> <li>external stylings</li> </ol> </body> </html>
The line written below is used to create a link between the two files.
<link rel="stylesheet" type="text/css" href="style.css">
I hope you understood the code well. Feel free to ask your doubts in comments below.
You may also read,
Leave a Reply