We know css is cascading style sheet which is used for styling the web pages. i.e it change the look of a web page using css.
In css we can add css to html in three ways.
They are:
1. Inline css
2. Internal css
3. External css.
In line css we add unique style to html element
Example.
<h1 style=”background:yellow;”>
In the above code we add css to h1 single element.
In line css we will have to add style to each element.
We cannot apply single style to multiple elements.
Internal css :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background:yellow;
color: red;
}
</style>
</head>
<body>
<h1>hello friends</h1>
</body>
</html>
In the above code <style> tag is added to head part of css.
Here we can add style to all elements in that web page.
External css:
We can add style in separate sheet:
After that we can refer it in more than one web page
Here we have created a new style sheet as mystyle.css.
Mystyle.css
body{
background-color: teal;
}
p{
font-family: 'Times New Roman', Times, serif;
}
We can link using <link> tag to any html page as belows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background:yellow;
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>hello friends</h1>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
</body>
</html
Look at:
<link rel="stylesheet" type="text/css" href="mystyle.css">
Here we have entered style sheet name using href attribute of link tag.
Output:
Thank you:
Muthu karthikeyan, Madurai.
91 96293 29142
Tamilnad, India
No comments:
Post a Comment