-
CSSstands for Cascading Style Sheets. -
CSShelps in making webpage's more attractive. - With the help of
CSSstyling Html elements is more easily.
- Inline CSS
- Internal CSS
- External CSS
::::Inline CSS::::
- Inline CSS is used to give style to a single HTML element.
- To give styling to a single Html element, we uses
styleattribute. - syntax-
<tagname style="property:value;"">CONTENT</tagname>Example:
Input
<html>
<body style="color:white;text-align:center;>
<p style="font-size:18px;color:#f39c12;">This is a Paragraph </p>
<p style="background-color:#2980b9;">This is a paragraph</p>
</body>
</html>Output
::::Internal CSS::::This is a Paragraph
This is a Paragraph
- It is Defined in the head section with
<style>...</style>open and close tags. - All CSS properties are written between
<style>...</style>. - It is used to define a
stylefor single Html page.
Input
<HTML>
<head>
<style>
.para{
color:#00cec9;
font-size:18px;
}
#p1{
font-family:monospace;
}
#p2{
color:yellow;
font-family:sans-serif;
}
</style>
</head>
<body>
<p class="para" id="p1">This is a Paragraph </p>
<p class="para" id="p2">This is a Paragraph </p>
</body>
<html>
Output
This is a Paragraph
This is a Paragraph
Class&Idyou will learn in the upcoming chapter.
- External CSS means writting a css style in external file i.e. filename.css
- while writting a css code in external file it is very important to link that css file with currently working .html file.
- To link the css file with html file we added link inside head section.
- To link this CSS file with html file we use
<link rel="stylesheet" href="url/file_location" />Examples:
"myfile.css"
body{
background-color:#2f3640 ;
}
p{
color:yellow;
font-size:20px;
}
h1{
color:aqua;
width:100%;
background-color:dimgray;
text-shadow:2px 2px 2px black;
}
.light{
color:aqua;
}
.light:hover{
color:aliceblue;
}
"page.html"
<html>
<head>
<link rel="stylesheet" href="files/myfile.css" />
<body>
<h1>
Hello,
</h1>
<p> Welcome to <span class="light">Code4xU</span> </p>
</body>
</html>
Output
Hello,
Welcome to Code4xU