Learn Cascading Style Sheet
About CSS
Css is called as cascading style sheet.CSS is mainly used for to styles for every design presentation i.e. look and formatting and how to display the web page. It is simple style sheet language.css write in any HTML (Hyper Text Markup Language).By using this one to create the layouts, fonts, headers and different type of styles for page.
In css we are using 2 types of attributes
In css we are using 2 types of attributes
- Id (we are using ‘#’ for identifying): used for single and unique identifier.
Example:
<style>
#style
{
Color:red;
}
</style>
<div id=”style”>
Welcome
</div>
<style>
#style
{
Color:red;
}
</style>
<div id=”style”>
Welcome
</div>
2) Class (we are using ‘.’ For identifying): used for a group of elements
Example:
<style>
.style
{
Color:red;
}
p.style
{
Background-color:green;
}
</style>
{
Background-color:green;
}
</style>
<p class=”style”>
Welcome
</p>
Welcome
</p>
CSS are used in different ways
Way1: creating .css file(External)
Design.css
Way1: creating .css file(External)
Design.css
.page
{
Color:red;
Background-color:green;
Float:left;
}
Way 2: In header part
<head>
<style>
.page
{
Color:red;
Background-color:green;
Float:left;
}
</style>
<head>
<style>
.page
{
Color:red;
Background-color:green;
Float:left;
}
</style>
</head>
Way3: create in tag
<div style=”color:red;background-color:green;float:left”>
Welcome to GK developmentS
</div>
<div style=”color:red;background-color:green;float:left”>
Welcome to GK developmentS
</div>
How to create borders to paragraph:
<html>
<head>
<style>
p.thick
{
border-style:solid;
border-width:5px;
}
p.thin
{
border-style:solid;
border-width:medium;
}
p.normal
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<html>
<head>
<style>
p.thick
{
border-style:solid;
border-width:5px;
}
p.thin
{
border-style:solid;
border-width:medium;
}
p.normal
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="thick">Welcome.</p>
<p class="thin">Gk.</p>
<p class="normal">developmentS.</p>
</body>
<p class="thick">Welcome.</p>
<p class="thin">Gk.</p>
<p class="normal">developmentS.</p>
</body>
</html>
Output:
Create border radius:
<html>
<head>
<style>
div
{
border:1px solid #a1a1a1;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<html>
<head>
<style>
div
{
border:1px solid #a1a1a1;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>Welcome</div>
</body>
</html>
</html>
Output:
Apply Shadow to div:
<html>
<head>
<style>
.shadow
{
width:300px;
height:100px;
color:yellow;
background-color:green;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<html>
<head>
<style>
.shadow
{
width:300px;
height:100px;
color:yellow;
background-color:green;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div class="shadow">
</b>Welcome to GK developmentS</b>
</div>
</b>Welcome to GK developmentS</b>
</div>
</body>
</html>
</html>
Output:
No comments:
Post a Comment