Cascading Style Sheets
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides a powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
A style rule is made of three parts:
- Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> ,<p>,<div> or <table> etc.
- Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be margin,padding,font,color,background-color,border,width,height etc.
- Value: Values are assigned to properties. For example, color property can have the value either red or #FFF etc.
Syntax:
selector { property: value }
Example:
h1 {
color: #FFF;
}
Note: The above given example Indicates that h1 is a selector ,color is a property and #FFF is value that assign to property.
Type of Selectors:
- Class Selectors
- Id Selectors
- All Selector (*)
- Attribute Selectors
In css there are much more selector but we learn css with above given selectors
- Class Selectors:
Example:
.justclack {
color: #000000;
}
- Id Selectors:In Id selector we used (#) before element.
#black {
color: #000000;
}
- All Selector (*)
Example:
* {
color: #000000;
}
- Attribute Selectors:
input[type="text"]{
color: #000000;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style sheet
External style sheet:
Example:
<link rel="stylesheet" type="text/css" href="justclack.css">
Internal style sheet :
Example:<style>
body {background-color: red;}
</style>
Inline style sheet:
Example:<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Colors & background-color In CSS:
Syntax: h1{ color:#F00; background-color:#9CF;text-align:center;}
Example :
<!DOCTYPE html>
<html">
<head>
<title>Colors</title>
<style>
h1{ color:#F00; background-color:#9CF;text-align:center;}
h2{ color:#0F0; background-color:#9FC;text-align:center;}
h3{ color:#00F; background-color:#9C6;text-align:center;}
h4{ color:#FF0; background-color:#9F3;text-align:center;}
h5{ color:#0FF; background-color:#990;text-align:center;}
h5{ color:#F0F; background-color:#930;text-align:center;}
h6{ color:#030; background-color:#999;text-align:center;}
</style>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
Output:
Snapshot
Border in css:
Code:
<!DOCTYPE html>
<html">
<head>
<title>Colors</title>
<style>
h1 {border-style: dotted; text-align:center; background-color:#990;}
h2{border-style: dashed; text-align:center; background-color:#990;}
h3{border-style: solid;text-align:center; background-color:#9C6;}
h4{ border-style: dotted;text-align:center; background-color:#963;}
h5{border-style: double;text-align:center; background-color:#996;}
h5{border-style: groove;text-align:center; background-color:#C39;}
h6{border-style: ridge;text-align:center; background-color:#93C;}
p{border-style: inset;text-align:center; background-color:#69C;}
p{border-style: outset;text-align:center;}
p{border-style: none;text-align:center;}
p{border-style: hidden;text-align:center;}
p{border-style: dotted dashed solid double;text-align:center;}
</style>
</head>
<body>
<h1>Just clack</h1>
<h2>Just clack</h2>
<h3>Just clack</h3>
<h4>Just clack</h4>
<h5>Just clack</h5>
<h6>Just clack</h6>
<p>Just clack.blogspot.com</p>
</body>
</html>
Output:
Snapshot
Margin:
- margin-top
- margin-right
- margin-bottom
- margin-left
If the margin property has four values:
- margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
Css Box Model:
Css Box Model using margin,color,background-color etc
Code:
<!DOCTYPE html>
<html">
<head>
<title>Colors</title>
<style>
div{
border-style: dotted;
background-color: lightgrey;
padding: 25px;
border: 25px solid #633;
margin: 25px;
width:500px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div>
JUSTCLACK.BLOGSPOT.COM
</div>
</body>
</html>
<html">
<head>
<title>Colors</title>
<style>
div{
border-style: dotted;
background-color: lightgrey;
padding: 25px;
border: 25px solid #633;
margin: 25px;
width:500px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div>
JUSTCLACK.BLOGSPOT.COM
</div>
</body>
</html>
Output:
Snapshot
Link:
Syntax:
<a href="www.justclack.blogspot.com">This is a link </a>
Code:
<!DOCTYPE html>
<html>
<head>
<style>
a{
background-color:#330;
color: white;
font-weight:bold;
border:2px #FF9900 solid;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<a href="#">This is a link </a>
</body>
</html>
List in css:
<ol>Order list 1,2,3 and so on</ol>
<ul>Unorder list like dot . </ul>
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background:#303;padding: 20px; width:500PX;
}
ul {
background:#C90;padding: 20px; width:500PX;
}
ol li {background:#99C;padding: 5px;margin-left: 35px;
}
ul li {background:#960;margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>HOME</li>
<li>NOTES</li>
<li>TUTORIALS</li>
</ol>
<ul>
<li>HOME</li>
<li>NOTES</li>
<li>TUTORIALS</li>
</ul>
</body>
</html>
Output:
Snapshot
Table in css:
code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 20%;
}
th, td {
text-align: left;
padding: 2px;
}
tr:nth-child(even){background-color:#ccc;}
</style>
</head>
<body>
<h2>TABLE IN CSS</h2>
<table border="1">
<tr>
<th>BLOG</th>
<th>First Name</th>
</tr>
<tr>
<td>justclack.blogspot.com</td>
<td>JUST CLACK</td>
</tr>
<tr>
<td>justclack.blogspot.com</td>
<td>JUST CLACK</td>
</tr>
<tr>
<td>justclack.blogspot.com</td>
<td>JUST CLACK</td>
</tr>
</table>
</body>
</html>
Output:
Snapshot
nice
ReplyDelete