CSS Examples
background-color
{
background-color: yellow;
background-color: #00ff00;
background-color: transparent;
background-color: rgb(250,0,255)
}

background-image
{
background-image:url('bgdesert.jpg')
}

background-repeat
{
background-image: url('bgdesert.jpg');
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-y;
background-repeat: repeat-x;
}

 

Position the background

{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}

Single declaration


{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}

Text

{
color: #00ff00;
background-color:yellow;
letter-spacing: 0.5cm;
line-height: 90%;
text-align: center;
text-decoration: overline; text-decoration: line-through; text-decoration: underline;
text-decoration: blink; text-decoration: none;
text-indent: 1cm;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
direction: rtl;
direction: ltr;
word-spacing: 30px;
white-space: nowrap;
}

Font

{
font-style: italic,normal,oblique;
font-family: courier;
font: caption;
font-size: 150%;
font-size-adjust: 0.40;
font-variant: small-caps,normal;
font-weight: bold;
font-weight: 900;
}

Font declaration in one line – {font: italic small-caps 900 12px arial}

Border

Different borders on each line:
{
border-style: solid double;
border-style: double solid;
border-style: groove double;
border-style: solid double groove;
}
{
border-top: medium solid #ff0000;
border-bottom: medium solid #ff0066;
border-left: medium solid #ff0021
border-Right: medium solid #ff2221
}

{
border-style: solid inset outset groove double dotted;
border-top-style: solid; border-bottom-style: solid; border-Right-style: solid; border-Left-style: solid}
{
border-width: 5px;
border-width: 5px 10px;
border-top-width: thin; border-bottom-width: 15px; border-Left-width: thin; border-Right-width: thin;
border-color: #0000ff;
border-Left-color: #ff0000; border-Left-color: #ff0000; border-Left-color: #ff0000; border-Left-color: #ff0000;
}

Padding in Table cell


{
padding-left: 2cm;
padding-right: 5cm;
padding-top: 5cm;
padding-bottom: 5cm;
padding: 1.5cm;
}

List

{
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: none;
}

Classification

img
{
float:right;
clear:both;
border:1px dotted black;
margin:0px 0px 15px 20px;
width:0.7em;
z-index:-1; z-index:1
bottom:0px   

}

Display

{
display: inline;
display: none;
display: block;
position:relative;
position:fixed;
position:absolute;
left:20px;
visibility:hidden;
visibility:Visible;
}

Cursor

{
cursor:auto;
cursor:crosshair;
cursor:default;
cursor:pointer;
cursor:move;
cursor:e-resize;
cursor:ne-resize;
cursor:nw-resize;
cursor:n-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:s-resize;
cursor:w-resize;
cursor:text;
cursor:wait;
cursor:help;

}

Simple Menu


<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}

a:hover {background-color:#ff3300}

li {display:inline}
</style>

<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>


Div with scroll
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}

Different color hyper link

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

First – child of Tags

p:first-child
{
color:blue
}
p > i:first-child – Ex: <p>dfdkfj<I>dkfjdk</I>dfsdkj</p>
{
color:blue
}

p:first-child i
{
color:blue
}

First Letter

p:first-letter
{
color: #ff0000;
font-size:xx-large
}

First Line


p:first-line
{
color: #ff0000;
font-variant: small-caps
}

Simple Menu


ul#cssnav {
margin:0 0 2em 17px;
padding:0;
list-style-type:none;
}
ul#cssnav li {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background: url(images/rollover2.gif) no-repeat left top;/* over state of image*/
float:left;
width: 8em;
height: 2em;
line-height:2em;
text-align:center;
margin-left:-17px;
}
#cssnav li a {
display:block;
width: 8em;
height: 2em;
display: block;
color: #FFF;
text-decoration: none;
background: url(images/rolloff2.gif) no-repeat left top;/* normal state of image*/
}
#cssnav li a:hover,#cssnav li.current a {background:transparent;color:#000} /* hide anchor on hover (and set current tab)*/


Scroll bar colors

body, html 
{
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

03:55 | Category: | 0 comments

Comments (0)

Post a Comment