CSS (CASCADING
STYLE SHEET):
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:
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:
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
p {
color: red;
text-align: center;
}
<!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.
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:
(A)WRITE CODE FOR inline.html :
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 :
<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;
}
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;
}
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.
ReplyDelete:http://www.marketing92.com/web-development/