Monday, December 1, 2014

CSS IN BRIEF



CSS IN BRIEF
<style type="text/css">
<#> (id> and <.> (class)
Text Align=                              text-align:center;
Color=                                      color:green;
Background color=                background-color:#b0c4de;
Background image=              body {background-image:url('naseer.jpg');
Background Repeat=            background-repeat:repeat-z;
Image Repeat=                      background-repeat:no-repeat;
Back.G. image position and margin=   
                                        background-position:right top;
                                        margin-right:200px;
Space bt character=              {letter-spacing:2px;}{ word-spacing:30px;}
Text wrapping=                      white-space:nowrap;
Line height=                            {line-height:200%;}
Text Indent=                           {text-indent:50px;}
Font Style=                                        {font-style:italic;}
Font Size=                                {font-size:14px;}
On hover=                               a:hover {color:red;}
Bk. G. height=                         max-height:60px; background-color:yellow;
Max. width of text=              max-width:20%;
Min Ht. of bak. Color=                    min-height:20px; min-width:190px;
Border and outline      =        border:1px solid red;
style                                          outline:green dotted thick;
                                                  outline-width:5px;
Pading=                                   padding-top:35px;
Positioning:                             {position:absolute;(relative,static,fixed
                                                  left:100px; top:150px;}
Style for selected=                 p > i:first-child{color:blue;}
Style for first line=       p:first-line {color:#ff0000; font-variant:small-caps;}
Style for first letter=    p:first-letter {color:#ff0000;font-size:xx-large;}
Pic. before           para or heading=         h1:before {content:url(abc.gif);}
Pic. After para or heading=           h1:after {content:url(abc.gif);}
Focus selected field     =                  input:focus{background-color:yellow;}




<style type="text/css">

1.     BACKGROUND IMAGE
<html>
<head>
<style type="text/css">
body {background-image:url('naseer.jpg');
</style>
</head>
<body>

</body>
</html>
    1. FONT COLOR STYLE AND TEXT ALIGN
<html>
<head>
<style type="text/css">
h1 {text-align:center;color:#00ff00;}
p {text-align:left;color:green;}
p.date {text-align:right;color:blue;}
p.main {text-align:left;color:red;}

</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>

</html>






    1. FOR IMAGE REPEAT AND MARGIN SET
<html>
<head>
<style type="text/css">
body {background-image:url('naseer.jpg');
background-repeat:repeat-z;
background-position:center top;
margin-right:100px;                           <text margin>
</style>
</head>
<body>
<p> the easterly 50 feet, measured at right angles to the east line thereof of lot(s) 12 in block 3 of tract no</p1>
</body>
</html>
    1. Registration Form in DIV
    1. Table in css
<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid black;
}
table
{
width:80%;
}
th
{
height:80px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
    1. Decorating of Text Underline, blink and overline
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:blink;}
h4 {text-decoration:blink;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>Naseer ud Din</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>




    1. POSITIOING
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
position:absolute;
left:0px;
top:100px;
z-index:-1;
}
    1. BORDER WITH STYLE
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
Border And Outline color
border:1px solid red;
outline:green dotted thick;
outline-color:#00ff00;
    1. Navigation Bar
      <ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

في

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Total Pageviews