penchalaiahcse.files.wordpress.com€¦ · Web view:after pseudo-classes. Finally, you see how to...
14
Styling Text CSS program : p.color{ color : #ff0000; } p.textalign{ text-align: center; } p.verticalalign{ vertical-align: super; } p.textdecoration{ text-decoration : underline; } p.textindent{ text-indent : 5em; } HTML Program : <html> <head> <link rel="stylesheet" href="tcss.css"> </head> <body> <p class="color">The color property enables you to specify the color of the text. The value of this property is mostcommonly a hex code for a color or a color name.</p> <p class="textalign">The text-align property works like the deprecated align attribute would with text. It aligns the text within its containing element or the browser window</p> <p class="verticalalign"> Welcome<img src="D:\17701A05C1\images\teddy.jpg" alt="Teddy" width="100" height="150"></p> <p class="textdecoration"> The text-decoration property enables you to specify the values.</p> <p class="textindent"> The text-indent property enables you to indent the first line of text within an element</p> </body> </html> Output:
Transcript of penchalaiahcse.files.wordpress.com€¦ · Web view:after pseudo-classes. Finally, you see how to...
Styling Text CSS program:p.color{color : #ff0000;}p.textalign{text-align: center;}p.verticalalign{vertical-align: super;}p.textdecoration{text-decoration : underline;}p.textindent{text-indent : 5em;}HTML Program:<html><head><link rel="stylesheet" href="tcss.css"></head><body><p class="color">The color property enables you to specify the color of the text. The value of this property is mostcommonly a hex code for a color or a color name.</p><p class="textalign">The text-align property works like the deprecated align attribute would with text.It aligns the text within its containing element or the browser window</p><p class="verticalalign">Welcome<img src="D:\17701A05C1\images\teddy.jpg" alt="Teddy" width="100" height="150"></p><p class="textdecoration">The text-decoration property enables you to specify the values.</p><p class="textindent">The text-indent property enables you to indent the first line of text within an element</p></body></html>
Output:
Text formatting:<html><head><link rel="stylesheet" href="text.css"></head><body><p class="introduction center overline footnote">In this chapter, you continue to learn how to use CSS to control the presentation of HTML web pages, starting with CSS properties that enable you to control the presentation of links, backgrounds, list styles, table styles, and outlines around boxes. You then learn a technique to add content to a page (even if it were not in the HTML document) using the :before and:after pseudo-classes. Finally, you see how to use CSS to position boxes on the page, whichenables you to create attractive layouts for your pages.</p><p class="dropShadow ltr">In this chapter, you continue to learn how to use CSS to control the presentation of HTML web pages, starting with CSS properties that enable you to control the presentation of links, backgrounds, list styles, table styles, and outlines around boxes. You then learn a technique to add content to a page (even if it were not in the HTML document) using the :before and:after pseudo-classes. Finally, you see how to use CSS to position boxes on the page, whichenables you to create attractive layouts for your pages.</p><p class="underline two">In this chapter, you continue to learn how to use CSS to control the presentation of HTML , which enables you to create attractive layouts for your pages.</p></body></html>Text.css:p {color:#ff0000;}.center {text-align : center;}p.underline {text-decoration : underline;}.dropShadow {text-shadow : #999999 10px 10px 3px;}p.overline {text-decoration : overline;}.two {word-spacing : 20px;}p.ltr {direction : ltr;}p.introduction:first-letter {font-size : 42px;}OUTPUT:
Box model<html><head><link rel="stylesheet" href="table.css"></head><body ><table align="center"><CAPTION><u>STUDENT INFORMATION</u></CAPTION>
<th>Name</th><th>Rollno</th><th>Branch</th><th>Section</th><th>Phno</td>
<tr><td>Suresh</td><td>5G0</td><td rowspan="5" align="center">CSE</td><td rowspan="5" align="center">c</td><td>8500593305</td>
</tr><tr> <td>Saikiran</td>
<td>5F8</td><td>9515048665</td>
</tr><tr>
<td>Sivaprasad</td><td>5F9</td><td>8142857411</td></tr>
<tr ><td>Janasena</td><td>5F5</td><td>8096094747</td></tr>
<tr> <td>VinodGoud</td><td>5G5</td><td>9100632654</td></tr>
</body></html>.Box.css:body, h1, p,img, b {border-style : solid;border-width : 3px;border-color :red;padding:10px;}p {border-style :dashed;}OUTPUT:
BORDERS:<html><head><style>p.one{ border-style:solid; border-width:5px; color:pink; }p.two{ border-style:ridge; border-radius:5px; color;green; border-color:green; }p.three{ border-style:inset; border-width:5px; color:sky blue; margin-left:5px; border-color:green yellow red pink; }p.four{ border-style:outset; border-width:5px; color:gray; }p.five{ border-style:double; border-width:thick; color:voilet; }p.six{ border-style:double; border-width:thick; color:slateblue; }p.seven{ border-style:solid; border-width:5px,3px; color:orange; }</style></head><body><h2>the border-width property</h2><p class="one">welcome to aits </p><p class="two">this is swe </p><p class="three"> this is jyo</p><p class="four">iam from 2nd cse</p><p class="five">iam swe</p><p class="six">my bestie mom </p><p class="seven">syam</p><style>p.center .large{ text-align:center; color;green;font-size:300%;}<style> <h1 style="border:2px solid Tomato;">Hello World</h1><h1 style="border:2px solid DodgerBlue;">Hello World</h1><h1 style="border:2px solid Violet;">Hello World</h1> </style> </style></html>Output:
FONT PROPERTIES<html><head><title> CSS Example </title><link rel="stylesheet" href="cse.css"></head><body><h1> Basic CSS Font Properties </h1><p> The following table shows you the basic CSS font properties that allowyou to change the appearance of text in your documents. </p><table><tr><th> Property </th><th> Purpose </th></tr><tr><td class="yamini"> font-family </td><td> Specifies the font used. </td></tr><tr><td class="yamini"> font-size </td><td> Specifies the size of the font used. </td></tr><tr><td class="yamini"> font-style </td> <td> Specifies whether the font should be normal, italic or oblique. </td></tr><tr><td class="yamini"> font-weight </td><td> Specifies whether the font should be normal, bold, bolder,or lighter </td></tr></table></body></html>.cssbody {color:GREEN;background-color:#ffffff;font-family:arial, verdana, sans-serif; }h1 {font-size:18pt;}p {font-size:12pt;}table {background-color:pink;border-style:solid;border-width:1px;border-color:red;}th {background-color:yellow;font-weight:bold;padding:5px;}td.code {font-family:courier, courier-new, serif;font-weight:bold;}Output:
Program: Styling LinksCSS Program:body {background-color : violet;}a {font-family : arial, verdana, sans-serif;font-size : 12px;font-weight : bold;}a:link {color : red;text-decoration : none;}a:visited {color : yellow;text-decoration : none;}a:link:hover {background-color : green;text-decoration : underline;}a:active {color :blue;text-decoration : underline;}
HTML Program:<html><head><link rel="stylesheet" href="link.css"></head><body><a href="http://www.aitsrajampet.ac.in" target=_blank">AITS Site</a><br><a href="pcss.html"target=_blank">click here to pcss</a><br><a href="tcss.html"target=_blank">click here to tcss</a><br><a href="Different Lists.HTML">click here to lists</a></body></body></html>Output:
List Properties<html><head><link rel="stylesheet" href="listscss.css"></head><body><ol>
<li>ADS</li><li>WP</li><li>DM</li><li>DBMS </li><li>DLD</li>
</ol><ul>
<li>ADS</li><li>WP</li><li>DM</li><li>DBMS</li><li>DLD</li>
</ul></body></html>
Listscss.cssol{
list-style-type:decimal-leading-zero;marker-offset:45;list-style-position:inside;
}ul{
list-style-type:square;list-style-image:url("csedept.jpg");
}
Program: styling backgroundsCSS program:body{background-color :yellow;background-image:url(" img3.jpg");background-repeat : repeat-y;background-position : centre;background-attachment : fixed;color:red;}HTML program:<html><head><link rel="stylesheet" href="back.css"></head><body><p>The background property enables you<br> to specify several of the background <br> properties at once.<br>The values can be given in any order, and if you do not supply one of the values, the default value</p></body></html>Output:
SELECTORS<html><head><style>#para1 { text-align: center; color: red;
} p,h1.center { text-align: center; color:blue; } *{ background-color:yellow } p:first-child { background-color:red;
}div p {
background-color:yellow;
}div > p { background-color: black;}div + p { background-color: green;}div ~ p { background-color:white;}</style></head><body><h1 class="center">Red and center-aligned heading</h1><p class="center">Red and center-aligned paragraph.</p> <p id="para1">Hello World!</p><p>This paragraph is not affected by the style.</p><p>This paragraph is the first child of its parent (body).</p>
<h1>Welcome to My Homepage</h1><p>This paragraph is not the first child of its parent.</p>
<div> <p>This paragraph is the first child of its parent (div).</p> <p>This paragraph is not the first child of its parent.</p></div><div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant --></div>
<p>Paragraph 4. Not in a div.</p><p>Paragraph 5. Not in a div.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p><div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span></div>
<p>Paragraph 4. Not in a div.</p><p>Paragraph 5. Not in a div.</p><div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p></div>
<p>Paragraph 3. Not in a div.</p><p>Paragraph 4. Not in a div.</p><p>Paragraph 1.</p>
<div> <code>Some code.</code> <p>Paragraph 2.</p></div>
<p>Paragraph 3.</p><code>Some code.</code><p>Paragraph 4.</p></body></html>Output:
Internal CSS <!doctype html><html lang="en"> <head> <title>Internal CSS</title> <style> body { background-image:url("C:/Users/IBM51/Desktop/NaturePics/puppykitty.jpg"); } h2 { color: green; font-family: sans-serif; font-weight: bold; font-style: italic; text-decoration: underline overline; text-transform: capitalize; } #abcd { background-color: red; color: green; } table, th, td { background-image:url("C:/Users/IBM51/Desktop/NaturePics/lemon-fruit.JPG"); width: 300px; border-color: red; font-family:sans-serif; } th{ font-weight:normal; text-align:right; } td { padding: 5px; } </style> </head> <body> <h1><b>Internal CSS properties with style</b></h1> <h2> Heading level 2 with CSS properties</h2> <p id="abcd">Paragraph with abcd attribute CSS</p> <table> <tr> <th>Table Heading</th> <td>data1</td> <td> data2</td> </tr> <tr><th>normal heading</th> <td>data3</td> <td>data4</td> </tr><tr> <th>normal heading</th> <td>data5</td> <td>data6</td> </tr><tr> <th>normal heading</th> <td>data7</td> <td>data8</td> </tr></table> </body></html>
EXTERNAL CSS:<html><head><link rel="stylesheet" href="abc.css"></head><body><h1>external style sheet</h1><h2>external style sheet</h2><p>applying style to web pages using css(extenal style sheet)</p><h3 class="hi">class as a selector in css</h3><h4 id="hello">id as a selector in css</h4><p class="hello">text formatting using css style sheet</P><h1 class="sri">verical align</h1><p class="sree">terxt transfrom into uppercase /none /capitalize /lowercase</p> <h1 id="d">text-direction</h1></body></html>OUTPUT:
INLINE STYLESHEET<html><head><title>inline style sheet</title></head><body><p style="front-family:arial; font-size:20px;
font-width:600; color:red; background-color:blue;">
welcome to inline stylesheet</p></body></html>Out put
