CSS

                             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:
In class selector we used dot (.) before element.

Example:

.justclack { 
  color: #000000;  
}
  • Id Selectors:In Id selector we used (#)  before element.
#black { 
  color: #000000;  
}
  • All Selector (*)
In all selector we used only * .

Example:

* {  
  color: #000000;  
}
  • Attribute Selectors:
Example:
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>

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>

Output:

Snapshot

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

Comments

Post a Comment