Skip to main content

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

p {
    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;
}

Comments

  1. Unknown13 December 2017 at 03:32

    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/

    ReplyDelete

Post a Comment

Popular posts from this blog

How to handle XML with PHP

What is XML? The  eXtensible Markup Language  is a way to structure your data for sharing across sites. Some of the technologies that are crucial to the web like  RSS  (Real Simple Syndication) and  Podcasts  are special flavors of XML. The beautiful thing about XML is that you can easily roll your own for anything you need. XML is easy to create because it’s a lot like HTML…except you can make up your own tags. Let’s say, for example that you’re putting together a feed for a list of songs playing at your own radio station. We’ll keep this simple, so we’ll just encode the name of the artist, the title of the song, plus the time when the song was played. We make up a couple of tags called  <title>  and  <artist>  and wrap each of them around a  <song>  tag. We’ll create a dateplayed attribute for each song with the date and time the song was played. You might encode something like that in this manner. ...
5 comments
Read more

XSLT QUICK GUIDE

E X tensible  S tylesheet  L anguage  T ransformation commonly known as XSLT is a way to transform the XML document into other formats such as XHTML. XSL Before learning XSLT, we should first understand XSL which stands for E X tensible  S tylesheet  L anguage. It is similar to XML as CSS is to HTML. Need for XSL In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet Language. An XSL document specifies how a browser should render an XML document. Following are the main parts of XSL − ·          XSLT  − used to transform XML document into various other types of document. ·       ...
8 comments
Read more

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax....
11 comments
Read more