CSS (CASCADING STYLE SHEET)

CSS (CASCADING   STYLE   SHEET):


CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.

CSS describes how elements must be rendered on screen, on paper, or in other media.

CSS Syntax:

A CSS rule-set consists of a selector and a declaration block:
CSS selector
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:

Example

{
    color: red;
    text-align: center;
}
example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>

</body>

</html>

output:
Hello World!
This paragraph is styled with CSS.


==============================================================================================================================================
TYPES  OF CSS :

(1)EXTERNTAL CSS
(2)INTERNAL CSS
(3)INLINE CSS

(1)External Style Sheet:
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
(a)write   code for    index.html   file:
<html>
<head>
<link  rel=stylesheet     type=text/css      href="style.css">
</head>
<body>
<div   class=one>

</div>

<div  class=two>

</div>

<div  class=three>

</div>


</body>
</html>
(b)write code for style.css file(it is a external css  file):
.one
{
height:200px;
width:700px;
background-color:orange;
}

.two
{
height:200px;
width:700px;
background-color:white;
}
.three
{
height:200px;
width:700px;
background-color:green;

}
(3)Internal Style Sheet:
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

(A)write     code for  internal.html file:
<html>
<head>
<style>
.one
{
height:200px;
width:700px;
background-color:orange;
}

.two
{
height:200px;
width:700px;
background-color:white;
}
.three
{
height:200px;
width:700px;
background-color:green;

}
</style>
</head>
<body>
<div   class=one>

</div>

<div  class=two>

</div>

<div  class=three>

</div>


</body>
</html>
(3)Inline Styles:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
HERE WE  USE   STYLE ATTRIBUTE INSIDE <DIV > TAG :

(A)WRITE     CODE    FOR      inline.html  :
<html>
<head>
<title>inline css</title>
</head>
<body>
<div   style="height:200px;width:700px;background-color:orange;">

</div>

<div   style=" height:200px;width:700px;background-color:white;">

</div>

<div   style="height:200px;width:700px;background-color:green;">

</div>


</body>
</html>

     
output of all three   is given below:
================================================================================================================================================
Guidance of  developing simple layout :
First of all understand  Layout of given  below :

(1)main  class which contains all  other header,container,footer 
(2)container contains  left,center,right
(3)left contains  image,p
(4)right contains  image.p
(5)center contains image,p



(1)code for  index.html  file":

<html>
<head>
<link rel="stylesheet"   type="text/css"  href="css/style.css">
</head>
<body>
<div    class="main">
<div  class=header>
<div id=menu>
<img src="img/bootstrap.png "  id=logo>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>contact us</li>
</ul>
</div>
<div   class=container>
<div  class=left>
<img src="img/bootstrap.png"  class=image>
<p class=p> A "Hello, world!" program has become.

</p>
</div>
<div  class=center>
<img src="img/bootstrap.png"  class=image>
<p  class=p>A "Hello, world!" program has become.

</p>
</div>

<div class=right>
<img src="img/bootstrap.png"  class=image >
<p  class=p>A "Hello, world!" program has become.

</p>
</div>

</div>
<div  class=footer>
</div>
</div>
</body>
</html>
(2)code for   "style.css"   file:
.main
{

margin:0 auto;
background-color:yellow;
width:800px;

}

#logo
{

float:left;
margin-top:20px;
height:60px;
width:200px;

}

.header
{
margin:0 auto;
height:100px;
width:700px;
background-color:pink;
}

ul
{
float:left;
margin-left:80px;
margin-top:60px;
list-style-type:none;


}


li
{

display:block;
float:left;
padding-left:10px;
margin-left:20px;
border-radius:20px;
background-color:red;


}

.container
{

margin:0 auto;
height:200px;
width:700px;
background-color:orange;
}

.left
{
margin-top:20px;
margin-left:20px;
float:left;
width:200px;
height:100px;
background-color:white;
}





.center
{
margin-top:20px;
margin-left:20px;
float:left;
width:200px;
height:100px;
background-color:white;
}
.right
{
margin-top:20px;
margin-left:20px;
float:left;
width:200px;
height:100px;
background-color:white;
}

.image
{
float:left;
height:60px;
width:60px;
}

.p
{
text-align:justify;
float:left;
width:100px;

}

.footer
{
margin:0 auto;
height:50px;
width:700px;
background-color:green;
}
Previous
Next Post »

1 comments:

Write comments
13 December 2017 at 03:32 delete

Incredible work and it is able to apriciate. In web developement Marketing92 is working with latest technology to promote Web Development in Pakistan. We are creating a veriety of Web Development in Lahore.
:http://www.marketing92.com/web-development/

Reply
avatar