Online Tuts World

OnlineTutsWorld channel introduction

OnlineTutsWorld channel introduction

OnlineTutsWorld is a computer training center for latest technical posts and video. OnlineTutsWorld is also video tutorials are available. ...

MS Word 2013 video tutorials in Hindi

Unknown 0 MS office, MS Word, MS word 13 22:27

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd44dCcnyE4UVADzxk6RaK3IgeDlDIEV6z8TQJ2hLIxownHbORG48VBhZVJjKCJpq5L9jk75KIErxCDXguXt8Z0gYD0IpJpxw6Szweavwt1PYCA1PxmKstDb2tPywVBz7mwcSUxdcig50/s1600/auydwkqyw3h24dgpv7sx.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd44dCcnyE4UVADzxk6RaK3IgeDlDIEV6z8TQJ2hLIxownHbORG48VBhZVJjKCJpq5L9jk75KIErxCDXguXt8Z0gYD0IpJpxw6Szweavwt1PYCA1PxmKstDb2tPywVBz7mwcSUxdcig50/s320/auydwkqyw3h24dgpv7sx.jpg" width="320" /></a></div>
<h4 style="text-align: left;">
MS office is a very top level application for creating document. It is a collection of many application. It's working many type of work like documentation, presentation, designing, Database, Data management. Web Application designing etc. Office 2013 is a latest version. MS word is use to create document creation and manage alignment designing.</h4>
<h4 style="text-align: left;">
<span style="background-color: white; color: #333333; font-family: "open sans" , sans-serif; font-size: 20px; line-height: 25px;"><br /></span></h4>
<h4 style="text-align: left;">
<span style="background-color: white; color: #333333; font-family: "open sans" , sans-serif; font-size: 20px; line-height: 25px;">Microsoft Word 2013 Features</span></h4>
<div style="text-align: left;">
<div style="background-color: white; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px; text-align: justify;">
</div>
<div style="background-color: white; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px; text-align: justify;">
<blockquote class="tr_bq" style="color: #333333; font-family: 'open sans', sans-serif; font-size: 14px; line-height: 20px;">
<ul>
<li>The following features of this software are:</li>
<li><span style="text-align: left; text-indent: -0.35em;">New Read mode: text is classified in columns for a better reading experience</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Object Zoom: Double click to zoom in</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Resume Reading: This program resumes your last position on documents when you open them again (even with online documents)</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Add online videos</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Simple Markup</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">It opens PDF documents and allows editing them</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Reply Comment: You can reply to comments added on documents</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Free new templates</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Improved alignment options on pictures</span></li>
<li><span style="text-align: left; text-indent: -0.35em;">Enhanced Ribbon interface</span></li>
</ul>
</blockquote>
<h3 style="color: #333333; font-family: 'open sans', sans-serif; font-size: 14px; line-height: 20px;">
MS Word Introduction video tutorials in Hindi.</h3>
<div class="separator" style="clear: both; color: #333333; font-family: 'open sans', sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/-Inb_HOGG70/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/-Inb_HOGG70?feature=player_embedded" width="320"></iframe></div>
<h3 style="clear: both; color: #333333; font-family: 'open sans', sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
Font color, style, size</h3>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/U9ycAS8IDaI/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/U9ycAS8IDaI?feature=player_embedded" width="320"></iframe></div>
<h3 style="color: #333333; font-family: 'open sans', sans-serif; font-size: 14px; line-height: 20px;">
</h3>
</div>
<div style="background-color: white; color: #333333; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px; text-align: justify;">
</div>
</div>
</div>

MS Word 2013 video tutorials in Hindi

MS office is a very top level application for creating document. It is a collection of many application. It's working many type of w...

How to create Image file from CD/DVD

Unknown 0 Application, PowerISO, Software 13:15

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
We are going to know about how to create Image file from CD/DVD. After creating Image file it will use to bootable Pen Drive for format OS for new or other OS.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmhq2aMFsHewwMEam1AqqNdd4H5mSQNc5gMKk_rUFPl2meLdJyl7BIl-iSMcvwqgRdJlSwb2Bw9aYLla6yLn8RGucc8LJeriGofrNWqXFD9iYqcgMlNNZUyU0mDP2U8QfW18wyMKdqJM/s1600/image105.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmhq2aMFsHewwMEam1AqqNdd4H5mSQNc5gMKk_rUFPl2meLdJyl7BIl-iSMcvwqgRdJlSwb2Bw9aYLla6yLn8RGucc8LJeriGofrNWqXFD9iYqcgMlNNZUyU0mDP2U8QfW18wyMKdqJM/s640/image105.png" width="640" /></a></div>
<br />
<div>
<br /></div>
<div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">
<b>Follow the steps carefully </b></div>
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">
<b><br /></b></div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">1. Go the PowerISO site </span><a href="http://www.poweriso.com/download.php" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-decoration: none;">http://www.poweriso.com/download.php</a><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;"> for download.</span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">2. Download softwer which is comfortable for your PC.</span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">3. Install software in your pc.</span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">4. After Installation </span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">Right click </b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">on application and go to</span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;"> Run as administrator</b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;"> and press </span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">Yes.</b><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">5. Go to </span><b style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">Tools</b><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;"> drop down menu and select <b>Make CD/DVD/BD Image file</b></span><span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">.</span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">6. Select <b>source drive</b> where your <b>CD/DVD/BD</b> .</span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">7. And then choose<b> .iso</b> or <b>.bin </b>after that <b>choose Destination</b> where you want save image file.</span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">8. Click <b>OK</b> for start creating Image file.</span></div>
<div>
<span style="background-color: white;"><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 12px; line-height: 18px;">9. After completing 100% image file show successful massage then click OK.</span></span></span></div>
<div>
<span style="background-color: white;"><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 12px; line-height: 18px;"><br /></span></span></span></div>
<div>
<span style="background-color: white;"><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 12px; line-height: 18px;">You will successfully complete creating Image file. You will Write in Pen drive for use bootable usb drive or you will save in your PC.</span></span></span><br />
<span style="background-color: white;"><span style="color: #333333; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 12px; line-height: 18px;"><br /></span></span></span>
<br />
<h2 style="text-align: left;">
Create Image file from CD/ DVD Video Turorials in Hindi</h2>
</div>
</div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/LW11eqwukyk" width="560"></iframe></div>

How to create Image file from CD/DVD

We are going to know about how to create Image file from CD/DVD. After creating Image file it will use to bootable Pen Drive for format OS...

How to Create Bootable USB Drive By PowerISO

Unknown 0 Application, PowerISO, Software 09:38

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
We know about how to create bootable USB Drive By PowerISO. This is a simple way to create bootable USB drive.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSEDdczpYUWyti-zjPagxGrSUcYSFtGncI7347EcJpfofvcbfYiC1XCGOQUCPRPRzEq6hAfWmVhvw35z3yVpoqa-CKob1sjJURA3TR83jHQZTH609JpNuXz70VbTZwt9tMiVGQ6G6uVs/s1600/Power-ISO-6-Final-Registration-Codes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSEDdczpYUWyti-zjPagxGrSUcYSFtGncI7347EcJpfofvcbfYiC1XCGOQUCPRPRzEq6hAfWmVhvw35z3yVpoqa-CKob1sjJURA3TR83jHQZTH609JpNuXz70VbTZwt9tMiVGQ6G6uVs/s400/Power-ISO-6-Final-Registration-Codes.jpg" width="303" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Follow the steps carefully </b></div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
1. Go the PowerISO site <a href="http://www.poweriso.com/download.php">http://www.poweriso.com/download.php</a> for download.<br />
2. Download softwer which is comfortable for your PC.<br />
3. Install software in your pc.<br />
4. After Installation <b>Right click </b>on application and go to<b> Run as administrator</b> and press <b>Yes.</b><br />
5. Go to <b>Tools</b> drop down menu and select <b>Create Bootable USB Drive</b>.<br />
6. And then go to <b>Source Image file </b>and select image file (OS).<br />
7. Select USB Drive in Destination USB Drive.<br />
8. And Press <b>Start </b>for create bootable Pen drive.<br />
9. After completing 100% show the message <b>Successfully created bootable</b>.<br />
10. Your Pen drive is ready for boot in your pc and you will format your PC.<br />
<br />
Follow the steps and get result better. For any question comment me.<br />
<br />
<h2 style="text-align: left;">
Create Bootable USB Drive Video tutorials in Hindi.</h2>
</div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/C5Fh-njKzPs" width="560"></iframe></div>

How to Create Bootable USB Drive By PowerISO

We know about how to create bootable USB Drive By PowerISO. This is a simple way to create bootable USB drive. Follow the steps caref...

CSS Tutorials for beginners

Unknown 1 CSS, web designing 22:52

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ84fM3Lxu_gpkIrVuFhPAsE_hXP8_ABSzSQzh8lDVOY_Jd7hQxW4jgxNxqioIebkE58CghNTJ45h9sYtbFUorfZcOoC6zg5JL7tZoI2ry8TTzw_vamloYMXhwuaY2fn0NGylN1GB_6UY/s1600/css-advantages.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ84fM3Lxu_gpkIrVuFhPAsE_hXP8_ABSzSQzh8lDVOY_Jd7hQxW4jgxNxqioIebkE58CghNTJ45h9sYtbFUorfZcOoC6zg5JL7tZoI2ry8TTzw_vamloYMXhwuaY2fn0NGylN1GB_6UY/s320/css-advantages.jpg" style="cursor: move;" width="320" /></a></div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: justify;">
A cascading style sheet (CSS) is code that specifies formatting based on styles. You can store the</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: justify;">
CSS code in the <head>section of the webpage to which you want it to apply, or you can store it in</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: justify;">
a separate file with a .css extension (for situations in which you want the same CSS to apply to more</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: justify;">
than one webpage). The formatting then “cascades” down to the individual instances of each tag. You</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: justify;">
can also place a style directly within an individual tag.</div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
<strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">What is CSS?</strong></h4>
<ul style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin: 0px 0px 20px 15px; outline: none; padding: 0px;">
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS stands for Cascading Style Sheets</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS defines how HTML elements are to be displayed</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Styles were added to HTML 4.0 to solve a problem</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS saves a lot of work</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">External Style Sheets are stored in CSS files</strong></li>
</ul>
<div>
<h4 style="background: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 7.5pt 0in; outline: none; padding: 0px; text-align: left;">
<span style="border: 0px none; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; font-size: 22.5pt; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS Selectors</span></h4>
<div style="background: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 16.9pt; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<span style="border: 0px none; box-sizing: border-box; color: black; font-family: Verdana, sans-serif; font-size: 11.5pt; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS selectors allow you to select and manipulate HTML elements.</span></div>
<div style="background: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 16.9pt; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<span style="border: 0px none; box-sizing: border-box; color: black; font-family: Verdana, sans-serif; font-size: 11.5pt; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS selectors are used to “find” (or select) HTML elements based on their id, class, type, attribute, and more.</span></div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
The element Selector</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br />
text-align: center;<br />
color: red;<br />
}</div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
The id Selector</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
#para1 {<br />
text-align: center;<br />
color: red;<br />
}</div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
The class Selector</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
.center {<br />
text-align: center;<br />
color: red;<br />
}</div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Grouping Selectors</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h1, h2, p {<br />
text-align: center;<br />
color: red;<br />
}</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
There are three ways of inserting a style sheet:</div>
<ul style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin: 0px 0px 20px 15px; outline: none; padding: 0px;">
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">External style sheet</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">Internal style sheet</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">Inline style</li>
</ul>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
External Style Sheet</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
With an external style sheet, you can change the look of an entire website by changing just one file!</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<head><br />
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”><br />
</head></div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Internal Style Sheet</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
An internal style sheet may be used if one single page has a unique style.</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<head><br />
<style><br />
body {<br />
background-color: linen;<br />
}</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h1 {<br />
color: maroon;<br />
margin-left: 40px;<br />
}<br />
</style><br />
</head></div>
<h4 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Inline Styles</h4>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
An inline style may be used to apply a unique style for a single element.</div>
<div style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1><br />
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
<strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">CSS</strong> <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Background</strong></h4>
<ul style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px 0px 20px 15px; outline: none; padding: 0px;">
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">background-color</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">background-image</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">background-repeat</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">background-attachment</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">background-position</strong></li>
</ul>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Background Color</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-color: #b0c4de;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
With CSS, a color is most often specified by:</div>
<ul style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px 0px 20px 15px; outline: none; padding: 0px;">
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">a HEX value – like “#ff0000”</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">an RGB value – like “rgb(255,0,0)”</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">a color name – like “red”</strong></li>
</ul>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Background Image</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-image: url(“img.gif”);<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Background Image – Repeat Horizontally or Vertically</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-image: url(“img.png”);<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-repeat: repeat-x;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">background-repeat: repeat-y;</strong></div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
background-repeat: no-repeat;</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Background Image – Set position</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-image: url(“img.png”);<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-repeat: no-repeat;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-position: <u style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">right top;</u><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><u style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" /></u></strong>}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Background – Shorthand property</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
As you can see from the examples above, there are many properties to consider when dealing with backgrounds.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background: #ffffff url(“img.png”) no-repeat right top;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
CSS background-attachment Property</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-image: url(‘img.png’);<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-repeat: no-repeat;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-attachment: fixed;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Text Color</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The color property is used to set the color of the text.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
body {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: blue;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h1 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: #00ff00;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h2 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: rgb(255,0,0);<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Text Alignment</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The text-align property is used to set the horizontal alignment of a text.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h1 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-align: center;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.date {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-align: right;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.main {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-align: justify;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Text Decoration</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The text-decoration property is used to set or remove decorations from text.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
a {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-decoration: none;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h1 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-decoration: overline;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h2 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-decoration: line-through;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h3 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-decoration: underline;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Text Transformation</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The text-transform property is used to specify uppercase and lowercase letters in a text.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h3 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-transform: uppercase; lowercase; capitalize;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Font Family</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-family: “Times New Roman”, Times, serif;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Font Style</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The font-style property is mostly used to specify italic text.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.normal {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-style: normal;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.italic {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-style: italic;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.oblique {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-style: oblique;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Font Size</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The font-size property sets the size of the text.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h1 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-size: 40px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
h2 {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-size: 30px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />font-size: 14px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Styling Links</h4>
<ul style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px 0px 20px 15px; outline: none; padding: 0px;">
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">a:link – a normal, unvisited link</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">a:visited – a link the user has visited</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">a:hover – a link when the user mouses over it</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">a:active – a link the moment it is clicked</li>
</ul>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
/* unvisited link */<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />a:link {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: #FF0000;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
/* visited link */<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />a:visited {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: #00FF00;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
/* mouse over link */<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />a:hover {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: #FF00FF;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
/* selected link */<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />a:active {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: #0000FF;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Different List Item Markers</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
ul.a {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />list-style-type: circle;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
ul.b {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />list-style-type: square;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
ol.c {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />list-style-type: upper-roman;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
ol.d {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />list-style-type: lower-alpha;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
An Image as The List Item Marker</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
ul {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />list-style-image: url(‘sqpurple.gif’);<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Table Borders</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
To specify table borders in CSS, use the border property.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
table, th, td {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border: 1px solid black;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h3 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Collapse Borders</h3>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The border-collapse property sets whether the table borders are collapsed into a single border or separated:</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
table {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-collapse: collapse;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
table, th, td {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border: 1px solid black;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Table Width and Height</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Width and height of a table is defined by the width and height properties.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
table {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />width: 100%;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
th {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />height: 50px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Horizontal Text Alignment</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The text-align property sets the horizontal alignment, like left, right, or center.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
th {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />text-align: left;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: left;">
Vertical Text Alignment</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The vertical-align property sets the vertical alignment, like top, bottom, or middle.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
td {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />height: 50px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />vertical-align: bottom;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Table Padding</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
td {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />padding: 15px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Table Color</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
table, td, th {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border: 1px solid green;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
th {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />background-color: green;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />color: white;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: left;">
The CSS Box Model</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.</div>
<ul style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px 0px 20px 15px; outline: none; padding: 0px;">
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Content</strong> – The content of the box, where text and images appear</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Padding</strong> – Clears an area around the content. The padding is transparent</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Border</strong> – A border that goes around the padding and content</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">Margin</strong> – Clears an area outside the border. The margin is transparent</li>
</ul>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
div {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />width: 300px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />padding: 25px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border: 25px solid navy;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />margin: 25px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px; text-align: left;">
Border Style</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
The border-style property specifies what kind of border to display.</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.one {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-style: solid;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-width: 5px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Border Color</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p.one {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-style: solid;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-color: red;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Border – Individual sides</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-top-style: dotted;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-right-style: solid;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-bottom-style: dotted;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border-left-style: solid;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
Border – Shorthand property</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />border: 5px solid red;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Margin – Individual sides</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
In CSS, it is possible to specify different margins for different sides of an element:</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />margin-top: 100px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />margin-bottom: 100px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />margin-right: 150px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />margin-left: 50px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">margin: 25px 50px 75px 100px;</strong></div>
<h4 style="border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px; text-align: left;">
Padding – Individual sides</h4>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
In CSS, it is possible to specify different padding for different sides:</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
p {<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />padding-top: 25px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />padding-right: 50px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />padding-bottom: 25px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />padding-left: 50px;<br style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;" />}</div>
<div style="border: 0px none; box-sizing: border-box; list-style: none; margin-bottom: 20px; outline: none; padding: 0px;">
<strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">padding: 25px 50px 75px 100px;</strong></div>
</div>
</div>
</div>

CSS Tutorials for beginners

A cascading style sheet (CSS) is code that specifies formatting based on styles. You can store the CSS code in the <head>section...

top head ads

About Me