CSS (Cascading Style Sheet) is add to HTML pages to design the archive as per data in the style sheet . There are three methods for embedding CSS in HTML document are following :- Inline CSS, Internal CSS and External CSS.
Method for using style in CSS
- Inline style.
- Internal style.
- External style / Embedded style.
Inline Style
- It is mainly use with particular tag.
- The inline CSS is also a method to embed style sheets in HTML document is knows as Inline Style.
Syntax
<style="property 1: value property2 : value;">
Example
<html>
<body>
<h1 style="color:green;margin-left:40px;text-align: center; ">Inline CSS example</h1>
<p style="color:red;margin-left:40px;text-align: center;" >It is mainly used with perticular tag <p>
</body>
</html>
Internal style
- It is use for only single webpage.
- It is written within <style> tag.
- <style> tag must be define in <head> tag.
- It is add unique style.
Syntax
<head>
<style= type=”text/css”>
Sector name
{
Property1: value;
Property2: value;
}
</style>
</head>
Example
<html>
<head>
<style>
body {
background-color: seagreen;
}
h1 {
color: black;
text-align: center;
}
</style>
</head>
<body>
<h1>It is used for only single webpage.</h1>
</body>
</html>
External style / Embedded style
- It is use for multiple webpages.
- It consist of separate CSS file in which only style or property are define.
- <link>tag is use to embed CSS file in html webpage.
- <link>tag is define within tag.
Syntax
<head>
<link rel=”stylesheet” href=”css file”>
</head>
Eg:-
<head>
<link rel=”stylesheet” href=”myfile.css”>
</head>
Example
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>External style / Embedded style</h1>
<p>It is used for multiple webpages</p>
</body>
</html>
CSS
body {
background-color: tomato;
}
h1 {
color: blue;
text-align: center
}
p {
color: black;
text-align: center
}
Background style
The CSS background properties are use to define the background effects for elements.
There are Six “6” background properties in CSS.
- Background-color
- Background-attachment.
- Background-position.
- Background-size.
- Background-repeat.
- Background-image.
Background-color
The background-color property is use to specify the background color of the component.
<html>
<head>
<style>
h1{
background-color:tomato;
}
</style>
</head>
<body>
<h1> Background-color </h1>
</body>
</html>
Background-attachment
The background-attachment property is use to specify the kind of attachment of the background image
<html>
<head>
<style>
body {
background: white url('https://tse1.mm.bing.net/th?id=OIP.B8gr_DYrPrZdvpRZQ2qO0wHaEo&pid=Api&P=0');
background-repeat: repeat;
text-align: center;
color:red;
}
</style>
</head>
<body>
<H1 style="color:red;text-align: center">background-attachment</H1>
<p>The background-attachment property is use to specify the kind of attachment of the background image</p>
<p>The background-attachment property is use to specify the kind of attachment of the background image</p>
<p>The background-attachment property is use to specify the kind of attachment of the background image</p>
</body>
</html>
Background-position
The background-style=”color:red;text-align: center property is use to define the position of the background image.
<html>
<head>
<style>
body {
background: white url('https://jooinn.com/images/sunset-532.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<h1 style="color:red;text-align: center">background-position</h1>
<
</body>
</html> 
Background-size
The background-size property is use to define the size of the background image.
Background-repeat
The background-image property use to repeats the background image horizontally and vertically.
<html>
<head>
<style>
body {
background-image: url("http://www.hdwallpaper.nu/wp-content/uploads/2015/06/1843513.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1 style="color:red;text-align: center">background-repeat</h1>
</body>
</html> Background-image
The background-image property is use to set an image as a background of the component.
<html>
<head>
<style>
body {
background-image: url("https://tse4.mm.bing.net/th?id=OIP.3a_5dTvvXiUnOpcW3Itq9AHaFj&pid=Api&P=0");
margin-left:100px;
}
</style>
</head>
<body>
<h1>background-image</h1>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article
To know more about CSS please check Wikipedia link Click here.
0 Comments