Online Tuts World

CSS Tutorials for beginners

<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...

Latest HTML video tutorial for beginners (Hindi-Urdu)

Unknown 0 html, web designing 20:52

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKlymkOHvk60RHCXLR2uQKMuJ_yu0IYERnnAQ9ecpK2-GLVA88daz6VefekV-fvQ0jH1zBMlSphLeI2vvNaeuNn1wviChj99Tnw2y8VGID5t1wvBjndHu4GVtDEDl3WGJH96bYLflSHg/s1600/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKlymkOHvk60RHCXLR2uQKMuJ_yu0IYERnnAQ9ecpK2-GLVA88daz6VefekV-fvQ0jH1zBMlSphLeI2vvNaeuNn1wviChj99Tnw2y8VGID5t1wvBjndHu4GVtDEDl3WGJH96bYLflSHg/s320/html.jpg" width="320" /></a><strong 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; outline: none; padding: 0px;"></strong><br />
<div style="text-align: justify;">
<strong 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; outline: none; padding: 0px;"><strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">HTML</strong><span style="color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif;"> is a hyper text markup language. Even if you have never seen any Hyper Text Markup Language (HTML) code, you may know that it is used to create web pages. There have been five versions of HTML since the web began, and the development of the language is overseen by an organization called the World Wide Web Consortium (W3C).</span></strong></div>
<br />
<br />
<br />
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px;">This video tutorials on the latest version of the language, popularly referred to as HTML5. There </span><span style="background-color: white; color: #333333; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 13px; line-height: 22px;">are two other versions you might encounter. These are HTML 4.01, the last major version of the language from December 1999, and a stricter version from 2000 called Extensible Hyper Text Markup Language (XHTML). XHTML is still popular in some applications, so important differences between it and HTML5 will be called out in the text.</span></div>
<h2 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;">
HTML Versions</h2>
<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;">
Since the early days of the web, there have been many versions of HTML:</div>
<table class="reference notranslate" style="background-color: white; border-spacing: 0px; border: 1px solid rgb(238, 238, 238); 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 1.5em; outline: none; padding: 0px; width: 444px;"><tbody style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">
<tr style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><th style="background: rgb(244, 244, 244); border-bottom-color: rgb(238, 238, 238); border-right-color: rgb(238, 238, 238); border-style: none dotted solid none; border-width: 0px 1px 1px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">Version</th><th style="background: rgb(244, 244, 244); border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-left-style: none; border-top-style: none; border-width: 0px 0px 1px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">Year</th></tr>
<tr style="background: rgb(249, 249, 249); border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(238, 238, 238); border-right-color: rgb(238, 238, 238); border-style: none dotted solid none; border-width: 0px 1px 1px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">HTML</td><td style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-left-style: none; border-top-style: none; border-width: 0px 0px 1px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">1991</td></tr>
<tr style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(238, 238, 238); border-right-color: rgb(238, 238, 238); border-style: none dotted solid none; border-width: 0px 1px 1px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">HTML 2.0</td><td style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-left-style: none; border-top-style: none; border-width: 0px 0px 1px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">1995</td></tr>
<tr style="background: rgb(249, 249, 249); border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(238, 238, 238); border-right-color: rgb(238, 238, 238); border-style: none dotted solid none; border-width: 0px 1px 1px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">HTML 3.2</td><td style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-left-style: none; border-top-style: none; border-width: 0px 0px 1px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">1997</td></tr>
<tr style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(238, 238, 238); border-right-color: rgb(238, 238, 238); border-style: none dotted solid none; border-width: 0px 1px 1px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">HTML 4.01</td><td style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-left-style: none; border-top-style: none; border-width: 0px 0px 1px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">1999</td></tr>
<tr style="background: rgb(249, 249, 249); border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(238, 238, 238); border-right-color: rgb(238, 238, 238); border-style: none dotted solid none; border-width: 0px 1px 1px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">XHTML</td><td style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-left-style: none; border-top-style: none; border-width: 0px 0px 1px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">2000</td></tr>
<tr style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;"><td style="border-left-style: none; border-right-color: rgb(238, 238, 238); border-right-style: dotted; border-top-style: none; border-width: 0px 1px 0px 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">HTML5</td><td style="border-color: initial; border-left-style: none; border-top-style: none; border-width: 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0.4em;">2014</td></tr>
</tbody></table>
<h2 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;">
HTML tutorial Introduction video in Hindi</h2>
<div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/1vt3MmEGffs" width="560"></iframe>  <br />
<h2>
HEAD, TITLE, BODY TAGES</h2>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/KT-jxFny9rI" width="560"></iframe>
  <br />
<h2>header, footer, h1 h6, p tages</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/71jrUldRbMU" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>a, u, strong, em, i, b tages</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iRRPG8EjbVI" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>small, q, sub, sup, br tages</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qUb3b1FWbZM" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>br, hr, ol, ul, li tages</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wTf5rLFTSlk" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>table, tr, td, th, thead, tfooter, tbody, colspan tages</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZqDqF1cfc3Q" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>input type, text, password, date, time, lable tags</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OzVjpve81fQ" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>Input, radio, chekbox, fieldset, legend, select, option properties</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/CcAFc8xX61A" frameborder="0" allowfullscreen></iframe>
  <br />
<h2>img, audio, video, ifram tages</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/FE81j_88f8A" frameborder="0" allowfullscreen></iframe>
</div>
<h2 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;">
Some basic knowledge</h2>
<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;">All HTML elements can have <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">attributes</strong></li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">The HTML <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">title</strong> attribute provides additional “tool-tip” information</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">The HTML <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">href</strong> attribute provides address information for links</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">The HTML <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">width</strong> and <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">height</strong> attributes provide size information for images</li>
<li style="border: 0px none; box-sizing: border-box; list-style: disc outside none; margin: 0px 0px 5px; outline: none; padding: 0px;">The HTML <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">alt</strong> attribute provides text for screen readers</li>
</ul>
<h2 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;">
HTML Display</h2>
<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;">
You cannot be sure how HTML will be displayed.</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;">
Large or small screens, and resized windows will create different results.</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;">
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.</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;">
The browser will remove extra spaces and extra lines when the page is displayed.</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;">
Any number of spaces, and any number of new lines, count as <strong style="border: 0px none; box-sizing: border-box; list-style: none; margin: 0px; outline: none; padding: 0px;">only one space</strong>.</div>
</div>

Latest HTML video tutorial for beginners (Hindi-Urdu)

HTML is a hyper text markup language. Even if you have never seen any Hyper Text Markup Language (HTML) code, you may know that it is us...

top head ads

CSS Tutorials for beginners

Latest HTML video tutorial for beginners (Hindi-Urdu)

Popular Posts

Comments

Archive