Example Css

1#.<html><head><style type="text/css"> body{ background-color:yellow; } h1{ background-color:#00ff00; } p{ background-color:rgb(255,0,255); } </style> </head> <body> <h1>This is heading 1</h1> <p>This is a paragraph.
</p> </body> </html> 2#.<html><head><style type="text/css"> body { background-image:url('paper.gif') } </style> </head> <body> <h1>Hello World!</h1> </body> </html> 3#.<html><head><style type="text/css"> body{ background-image:url('paper.gif'); } </style> </head> <body> <p>By default, a background image will be repeated both vertically and horizontally.</p> </body> </html> 4#.<html><head><style type="text/css"> body{ background-image:url('paper.gif'); background-repeat:repeat-y; } 1 |Page
</style> </head> <body> <p>repeat-y will repeat a background image only vertically.</p> </body> </html> 5#.<html><head><style type="text/css"> body{ background-image:url('paper.gif'); background-repeat:repeat-x; } </style> </head> <body> <p>repeat-x will repeat a background image only horizontally.</p> </body> </html> 6#.<html><head><style type="text/css"> body{ background-image:url('paper.gif'); background-repeat:no-repeat; } </style> </head> <body> <p>no-repeat will not repeat a background image. The image will only be shown once.</p> </body> </html> 7#.<html><head><style type="text/css"> body{ background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <p><b>Note:</b> For this to work in Firefox and Opera, the background-
attachment property must be set to "fixed".</p> </body> </html> 8#.<html><head><style type="text/css"> body{ background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } </style> </head> <body> <p><b>Note:</b> For this to work in Firefox and Opera, the backgroundattachment property must be set to "fixed".</p> </body> </html> 9#.<html><head><style type="text/css"> body{ background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } </style> </head> <body> <p><b>Note:</b> For this to work in Firefox and Opera, the backgroundattachment property must be set to "fixed".</p> </body> </html> 10#.<html><head><style type="text/css"> body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed } </style> 2 |Page
</head> <body> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> <p>The background-image scroll down the page.</p> </body> </html>
is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to is fixed. Try to
11#.<html><head><style type="text/css"> body{ background: #00ff00 url('smiley.gif') no-repeat fixed center; } </style> </head> <body> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p> <p>This is some text</p>
<p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is <p>This is </body> </html>
some some some some some some some some some some some some some some some some some some some some
text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p> text</p>
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span> </p> </body> </html> 14#.<html><head><style type="text/css"> h1 {letter-spacing:2px} h2 {letter-spacing:-3px} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> </body> </html> 15#.<html> <head> <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p> This is a paragraph with a standard lineheight. The default line height in most browsers is about 110% to 120%. This is a paragraph with a standard lineheight. </p> <p class="small"> This is a paragraph with a smaller lineheight. This is a paragraph with a smaller lineheight. This is a paragraph with a smaller lineheight. </p>
12#.<html><head><style type="text/css"> body {color:red} h1 {color:#00ff00} p.ex {color:rgb(0,0,255)} </style> </head> <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> </body> </html> 13#.<html><head><style type="text/css"> span.highlight{ background-color:yellow; } </style> </head> <body> <p> 3 |Page
<p class="big"> This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. </p> </body> </html> 16#.<html><head><style type="text/css"> h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html> 17#.<html><head><style type="text/css"> h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} 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>This is heading 4</h4> <p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p> </body> </html> 18#.<html><head><style type="text/css"> p {text-indent:50px} </style> </head> <body> <p>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,' 4 |Page
he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p> </body> </html> 19#.<html><head><style type="text/css"> p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize} </style> </head> <body> <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body> </html> 20#.<html><head><style type="text/css"> div.ex1 {direction:rtl} </style> </head> <body> <div>Some text. Default writing direction.</div> <div class="ex1">Some text. Left-to-right direction.</div> </body> </html> 21#.<html><head><style type="text/css"> p{word-spacing:30px;} </style> </head> <body> <p> This is some text. This is some text. </p> </body> </html>
22#. <html><head><style type="text/css"> p{white-space:nowrap;} </style> </head> <body> <p> This is some text. This is some some text. This is some text. This is some some text. This is some text. This is some some text. This is some text. This is some some text. </p> </body> </html>
<p style="font:small-caption">This is a paragraph.</p> <p style="font:status-bar">This is a paragraph.</p> </body> </html> text. This is text. This is text. This is text. This is 24#.<html><head><style type="text/css"> h1 {font-size:250%} h2 {font-size:200%} p {font-size:100%} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> </body> </html> 25#.<html><head><style type="text/css"> p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} </style> </head> <body> <p class="normal">This is a paragraph, normal.</p> <p class="italic">This is a paragraph, italic.</p> <p class="oblique">This is a paragraph, oblique.</p> </body> </html> 26#.<html><head><style type="text/css"> p.normal {font-variant:normal} p.small {font-variant:small-caps} </style> </head> <body> <p class="normal">My name is Hege Refsnes.</p> <p class="small">My name is Hege Refsnes.</p> </body>
23#.<html><head><style type="text/css"> p.serif{font-family:"Times New Roman",Georgia,Serif} p.sansserif{font-family:Arial,Verdana,Sansserif} </style> </head> <body> <h1>CSS font family example</h1> <p class="serif">This is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">This is a paragraph, shown in the Arial font.</p> </body> </html> <html> <body> <p>This is a standard paragraph.</p> <p style="font:caption">This is a paragraph.</p> <p style="font:icon">This is a paragraph.</p> <p style="font:menu">This is a paragraph.</p> <p style="font:message-box">This is a paragraph.</p> 5 |Page
</html> 26#.<html><head><style type="text/css"> p.normal {font-weight:normal} p.light {font-weight:lighter} p.thick {font-weight:bold} p.thicker {font-weight:900} </style> </head> <body> <p class="normal">This is a paragraph.</p> <p class="light">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> </body> </html> 27#.<html><head><style type="text/css"> p.ex1{ font:italic arial,sans-serif; } p.ex2{ font:italic bold 12px/30px arial,sansserif; } </style> </head> <body> <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p> </body> </html> 28#.<html><head><style type="text/css"> p{ border:5px solid red; } </style> 6 |Page
</head> <body> <p>This is some text in a paragraph.</p> </body> </html> 29#.<html><head><style type="text/css"> p.one {border-style:dotted solid dashed double} p.two {border-style:dotted solid dashed} p.three {border-style:dotted solid} p.four {border-style:dotted} </style> </head> <body> <p class="one">This is some text in a paragraph.</p> <p class="two">This is some text in a paragraph.</p> <p class="three">This is some text in a paragraph.</p> <p class="four">This is some text in a paragraph.</p> </body> </html> 29#.<html><head><style type="text/css"> p{ border-style:solid; border-top:thick double #ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 30#.<html><head><style type="text/css"> p{ border-style:solid; border-bottom:thick dotted #ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p>
</body> </html> 31#.<html><head><style type="text/css"> p{ border-style:solid; border-left:thick double #ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 32#.<html><head><style type="text/css"> p{ border-style:solid; border-right:thick double #ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 33#.<html><head><style type="text/css"> p.none {border-style:none} p.dotted {border-style:dotted} p.dashed {border-style:dashed} p.solid {border-style:solid} p.double {border-style:double} p.groove {border-style:groove} p.ridge {border-style:ridge} p.inset {border-style:inset} p.outset {border-style:outset} p.hidden {border-style:hidden} </style> </head> <body> <p class="none">No border.</p> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> 7 |Page
<p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="hidden">A hidden border.</p> </body> </html> 34#.<html><head><style type="text/css"> p {border-style:solid} p.none {border-top-style:none} p.dotted {border-top-style:dotted} p.dashed {border-top-style:dashed} p.solid {border-top-style:solid} p.double {border-top-style:double} p.groove {border-top-style:groove} p.ridge {border-top-style:ridge} p.inset {border-top-style:inset} p.outset {border-top-style:outset} </style> </head> <body> <p class="none">No top border.</p> <p class="dotted">A dotted top border.</p> <p class="dashed">A dashed top border.</p> <p class="solid">A solid top border.</p> <p class="double">A double top border.</p> <p class="groove">A groove top border.</p> <p class="ridge">A ridge top border.</p> <p class="inset">An inset top border.</p> <p class="outset">An outset top border.</p> </body> </html> 35#.<html><head><style type="text/css"> p {border-style:solid} p.none {border-bottom-style:none} p.dotted {border-bottom-style:dotted} p.dashed {border-bottom-style:dashed} p.solid {border-bottom-style:solid} p.double {border-bottom-style:double} p.groove {border-bottom-style:groove}
p.ridge {border-bottom-style:ridge} p.inset {border-bottom-style:inset} p.outset {border-bottom-style:outset} </style> </head> <body> <p class="none">No bottom border.</p> <p class="dotted">A dotted bottom border.</p> <p class="dashed">A dashed bottom border.</p> <p class="solid">A solid bottom border.</p> <p class="double">A double bottom border.</p> <p class="groove">A groove bottom border.</p> <p class="ridge">A ridge bottom border.</p> <p class="inset">An inset bottom border.</p> <p class="outset">An outset bottom border.</p> </body> </html> 36#.<html><head><style type="text/css"> p {border-style:solid;} p.none {border-left-style:none} p.dotted {border-left-style:dotted} p.dashed {border-left-style:dashed} p.solid {border-left-style:solid} p.double {border-left-style:double} p.groove {border-left-style:groove} p.ridge {border-left-style:ridge} p.inset {border-left-style:inset} p.outset {border-left-style:outset} </style> </head> <body> <p class="none">No left border.</p> <p class="dotted">A dotted left border.</p> <p class="dashed">A dashed left border.</p> <p class="solid">A solid left border.</p> <p class="double">A double left border.</p> 8 |Page
<p class="groove">A groove left border.</p> <p class="ridge">A ridge left border.</p> <p class="inset">An inset left border.</p> <p class="outset">An outset left border.</p> </body> </html> 37#.<html><head><style type="text/css"> p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three{ border-style:solid; border-width:1px; } </style> </head> <body> <p class="one">Some text.</p> <p class="two">Some text.</p> <p class="three">Some text.</p> <p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html> 37#.<html><head><style type="text/css"> p{ border-style:solid; border-top-width:15px; } </style> </head> <body> <p><b>Note:</b> The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body> </html> 38#.<html><head><style type="text/css"> p{ border-style:solid; border-bottom-width:15px; } </style> </head> <body> <p><b>Note:</b> The "border-bottomwidth" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html> 39#.<html><head><style type="text/css"> p{ border-style:solid; border-left-width:15px; } </style> </head> <body> <p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html> 40#.<html><head><style type="text/css"> p{ border-style:solid; border-right-width:15px; } </style> </head> <body> <p><b>Note:</b> The "border-right-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html> 9 |Page
41#.<html><head><style type="text/css"> p.one{ border-style:solid; border-color:#0000ff; } p.two{ border-style:solid; border-color:#ff0000 #0000ff; } p.three{ border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four{ border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border! </p> <p class="four">Four-colored border!</p> <p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html> 42#.<html><head><style type="text/css"> p{ border-style:solid; border-top-color:#ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html>
43#.<html><head><style type="text/css"> p{ border-style:solid; border-bottom-color:#ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 44#.<html><head><style type="text/css"> p{ border-style:solid; border-left-color:#ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 45#.<html><head><style type="text/css"> p{ border-style:solid; border-right-color:#ff0000; } </style> </head> <body> <p>This is some text in a paragraph.</p> </body> </html> 46#.<html><head><style type="text/css"> p {border-style:solid;} p.none {border-right-style:none} p.dotted {border-right-style:dotted} p.dashed {border-right-style:dashed} p.solid {border-right-style:solid} p.double {border-right-style:double} p.groove {border-right-style:groove} p.ridge {border-right-style:ridge} p.inset {border-right-style:inset} p.outset {border-right-style:outset} 10 | P a g e
</style> </head> <body> <p class="none">No right border.</p> <p class="dotted">A dotted right border.</p> <p class="dashed">A dashed right border.</p> <p class="solid">A solid right border.</p> <p class="double">A double right border.</p> <p class="groove">A groove right border.</p> <p class="ridge">A ridge right border.</p> <p class="inset">An inset right border.</p> <p class="outset">An outset right border.</p> </body> </html> 47#.<html><head><style type="text/css"> p{ border:red solid thin; outline:#00ff00 dotted thick; } </style> </head> <body> <p><b>Note: </b>Internet Explorer does not support the outline properties.</p> </body> </html> 48#.<html><head><style type="text/css"> p {border: red solid thin} p.dotted {outline-style:dotted} p.dashed {outline-style:dashed} p.solid {outline-style:solid} p.double {outline-style:double} p.groove {outline-style:groove} p.ridge {outline-style:ridge} p.inset {outline-style:inset} p.outset {outline-style:outset} </style> </head> <body> <p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> <p><b>Note: </b>Internet Explorer does not support the outline properties.</p> </body> </html> 49#.<html><head><style type="text/css"> p{ border:red solid thin; outline-style:dotted; outline-color:#00ff00; } </style> </head> <body> <p><b>Note: </b>Internet Explorer does not support the outline properties.</p> </body> </html> 50#.<html><head><style type="text/css"> p.one{ border:red solid thin; outline-style:solid; outline-width:thin; } p.two{ border:red solid thin; outline-style:dotted; outline-width:3px; } </style> </head> <body> <p class="one">This is some text in a paragraph.</p> <p class="two">This is some text in a paragraph.</p> <p><b>Note: </b>Internet Explorer does not support the outline properties.</p> </body> 11 | P a g e
</html> 51#.<html><head><style type="text/css"> a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html> 52#.<html><head><style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; textdecoration: none} a.five:hover {text-decoration: underline} </style> </head>
<body> <p>Mouse over the links to see them change layout.</p> <p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p> <p><b><a class="two" href="default.asp" target="_blank">This link changes fontsize</a></b></p> <p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p> <p><b><a class="four" href="default.asp" target="_blank">This link changes fontfamily</a></b></p> <p><b><a class="five" href="default.asp" target="_blank">This link changes textdecoration</a></b></p> </body> </html> 53#.<html><head><style type="text/css"> input:focus{ background-color:yellow; } </style> </head> <body> <form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> </body> </html> 54#.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><style type="text/css"> p:first-child{ color:blue; } 12 | P a g e
</style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p> </body> </html> 55#.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p > i:first-child{ color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p> </body> </html> 56#.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p:first-child i{ color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p> </body> </html> 57#.<html><head><style type="text/css"> q:lang(no){ quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> <p>In this example, :lang defines the quotation marks for q elements with lang="no":</p> <p><b>Note:</b> The :lang pseudo class is not supported in Internet Explorer.</p> </body> </html> 58#.<html><head><style type="text/css"> p:first-letter{ color: #ff0000; font-size:xx-large; } </style> </head> <body> <p>You can use the :first-letter pseudoelement to add a special effect to the first character of a text!</p> </body> </html> 59#.<html><head><style type="text/css"> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body>
<p>You can use the :first-line pseudoelement to add a special effect to the first line of a text.</p> </body> </html> 59#.<html><head><style type="text/css"> p:first-letter{ color: #ff0000; font-size:xx-large } p:first-line { color: #0000ff; font-variant: small-caps } </style> </head> <body> <p> You can combine the :first-letter and :firstline pseudo-elements to add a special effect to the first letter and the first line of a text! </p> </body> </html> 60#.<html><head><style type="text/css"> h1:before {content:url(smiley.gif)} </style> </head> <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> </body> </html> 61#.<html><head><style type="text/css"> h1:after {content:url(smiley.gif)} </style> </head> <body> <h1>This is a heading</h1> <p>The :after pseudo-element inserts content after an element.</p> </body> </html>
13 | P a g e
62#.<html><head><style type="text/css"> img { float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p> In the paragraph below, the image will float to the right. A dotted black border is added to the image. We have also added margins to the image to push the text away from the image: 0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image. </p> <p> <img src="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> 14 | P a g e
63#.<html><head><style type="text/css"> div{ float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div> <img src="logocss.gif" width="95" height="84" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p>
In the paragraph above, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption. </p> </body> </html> 64#.<html><head><style type="text/css"> span{ float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the first letter of the text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian". 15 | P a g e
</p> </body> </html> 65#.<html><head><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> </head> <body> <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> <p> In the example above, we let the ul element and the a element float to the left. The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). We add some colors and borders to make it more fancy. </p></body> </html>
66#.<html><head><style type="text/css"> div.container{ width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer{ padding:0.5em; color:white; background-color:gray; clear:left; } h1.header{ padding:0; margin:0; } div.left{ float:left; width:160px; margin:0; padding:1em; } div.content{ margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3Schools.com</h1></div > <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3Schools you will find all the Webbuilding tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3Schools - The Largest Web Developers Site On The Net!</p></div> 16 | P a g e
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div> </div> </body> </html> 67#.<html><head><style type="text/css"> h2.pos_left{ position:relative; left:-20px; } h2.pos_right{ position:relative; left:20px; } </style> </head> <body> <h2>This is a heading with no position</h2> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body> </html> 68#.<html><head><style type="text/css"> table.ex1 {table-layout:auto} table.ex2 {table-layout:fixed} </style> </head> <body> <table class="ex1" border="1" width="100%"> <tr> <td width="5%">1000000000000000000000000 000</td> <td width="95%">10000000</td>
</tr> </table> <br /> <table class="ex2" border="1" width="100%"> <tr> <td width="5%">1000000000000000000000000 000</td> <td width="95%">10000000</td> </tr> </table> </body> </html> 68#.<html><head><style type="text/css"> table{ border-collapse:separate; empty-cells:hide; } </style> </head> <body> <table border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td></td> </tr> </table> <p><b>Note:</b> The empty-cells property does not work in Internet Explorer.</p> </body> </html> 69#.<html><head><style type="text/css"> table {border-collapse:collapse} </style> </head> <body> <table border="1"> <tr> <td>Peter</td> <td>Griffin</td> 17 | P a g e
</tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> </body> </html> 70#.<html><head><style type="text/css"> table.ex1{ border-collapse:separate; border-spacing:10px; } table.ex2{ border-collapse:separate; border-spacing:10px 50px; } </style> </head> <body> <table class="ex1" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <br /> <table class="ex2" border="1"> <tr> <td>Cleveland</td> <td>Brown</td> </tr> <tr> <td>Glenn</td> <td>Quagmire</td> </tr> </table> <p><b>Note:</b> The border-spacing property does not work in Internet Explorer.</p> </body> </html>
71#.<html><head><style type="text/css"> caption {caption-side:bottom} </style> </head> <body> <table border="1"> <caption>This is a caption</caption> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <p><b>Note:</b> The caption-side property does not work in Internet Explorer.</p> </body> </html> 72#.<html><head><style type="text/css"> p.ex1 {margin-left:2cm} </style> </head> <body> <p>A paragraph with no margins specified.</p> <p class="ex1">A paragraph with a 2cm left margin.</p> <p>A paragraph with no margins specified.</p> </body> </html> 73#.<html><head><style type="text/css"> p.leftmargin{ margin-left: 25% } </style> </head> <body> <p>This is a paragraph with no margin specified</p> 18 | P a g e
<p class="leftmargin">This is a paragraph with a specified left margin</p> </body> </html> 74#.<html><head><style type="text/css"> p.ex1 {margin-right:4cm} </style> </head> <body> <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.</p> <p class="ex1">A paragraph with a 4cm right margin. A paragraph with a 4cm right margin. A paragraph with a 4cm right margin.</p> <p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.</p> </body> </html> 75#.<html><head><style type="text/css"> p.rightmargin{ margin-right:25% } </style> </head> <body> <p style="text-align:right">This is a right aligned paragraph with no margin specified</p> <p class="rightmargin" style="textalign:right">This is a right aligned paragraph with a specified right margin</p> </body> </html>

Example Css

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Example Css

Hochgeladen von

Copyright:

Verfügbare Formate

1#.<html><head><style type="text/css"> body{ background-color:yellow; } h1{ background-color:#00ff00; } p{ background-color:rgb(255,0,255); } </style> </head> <body> <h1>This is heading 1</h1> <p>This is a paragraph.

Das könnte Ihnen auch gefallen