What is CSS Style in HTML?
CSS stands for Cascading Styles Sheets, It allows the web users or developers to control the style and layout of the HTML elements on the web pages.
CSS Style in HTML helps to make the web page interactive and dynamic by adding styles, colors, fonts and background style.
It is basically used with HTML tags to give HTML documents a new look.
CSS Basic Syntax:
CSS style in HTML, uses some basic syntax format which we will understand here with a basic example.
In the example above,
selector indicates– HTML element you want to style, like here heading1 is selected.
Declaration blog indicates-Values declared by you for that selected element, like here color : yellow and font size : 11 is declared for heading1.
How to add CSS Style in HTML:
There are three basic way to add CSS style in HTML:
-
Inline CSS:
Inline CSS style in HTML is used to apply CSS on a single line or element.
Here, only a single element is affected and all other sections remain the same.
For example:
<h2 style=”color:red;margin-left:40px;”> “Colour of this heading will change to red” </h2>
<p>“this paragraph will not be affected with above CSS Style”</p>
-
Internal CSS:
Internal CSS style in HTML is used to apply CSS on a single document or page.It generally affects all the elements in the document.
Internal CSS is written inside the style tag within the head section of
HTML.
For example:
<html>
<head>
<style>
body {
background-color: Blue; }
h1 {
color: red; }
</style>
</head>
<body>
<h1>red color will be applied to this heading </h1>
<p>This paragraph will not be affected.</p>
(background color will be blue for whole web page)
</body>
</html>
-
External CSS:
External CSS style in HTML is used to apply CSS on multiple pages.
Here, we write all the CSS code in a CSS file and Its extension must be of .css format.
The link tag must be used inside the head section of an HTML.
For Example:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
CSS Background property:
CSS styles in HTML also contain background properties that are used to define the background effects on elements, using these properties makes the web page more dynamic and interactive and gives a new look to the web page.
These background property include:
-
CSS background-color-
The background-color property of CSS styles in HTML is used to specify the background color of the element.
You can set the background color like this:
<!DOCTYPE html>
<html>
<head>
<style>
h1,p{
background-color: #b0d4de; }
</style>
</head>
<body>
<h1>My Web page</h1>
<p>This is an example of background color.</p>
</body>
</html>
-
CSS Background Image-
The background-image property of CSS style in HTML is used to set an image as a background of a web page. Adding images to the web page makes it more good looking and interactive.
You can set a background image of a page by following the code given below.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(“image.gif”);
margin-left:100px;
}
</style>
</head>
<body>
Learn CSS with PW skills:
Enrol in our Web Development Course to learn the principles, basics and knowledge of all the tools required for Web development. Whether you are a beginner or an individual looking to switch your career, this full stack development course will be a right fit for you: providing roadmap, and knowledge of all the tools including HTML, CSS, JavaScript, interactive classes, practice material, regular doubt sessions and guidance from experienced teachers for your better understanding helps you to get your desired job in the field of web development.
FAQs on CSS Style in HTML
Is using CSS Style necessary for web development?
It's not necessary to use CSS style in web development, but Yes,in order to make web pages dynamic and interactive using CSS is a must.
Making a web page dynamic without using CSS will not be possible.
Which CSS is mostly used?
Inline CSS is used quite often, as it helps to modify every line in a desired manner, then comes internal and external CSS.
What basically CSS contains ?
CSS styles in HTML, basically contains Size, Layouts, Styles and Paint for a web page. All these elements help in developing a good looking, dynamic and a user friendly web page.
