s1 school: CSS

Showing posts with label CSS. Show all posts

CSS fonts

<span style="background-color: white;"><span style="font-family: inherit;">The CSS font properties define the font family, boldness, size, and the style of a text.</span></span><br />
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">CSS Font Families</span></h2>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">In CSS, there are two types of font family names:</span></div>
<span style="background-color: white; box-sizing: inherit; font-family: inherit;"><ol>
<li><b style="box-sizing: inherit; font-family: inherit; font-weight: bold;">generic family</b><span style="font-family: inherit;">  a group of font families with a similar look (like "Serif" or "Monospace")</span></li>
<li><b style="box-sizing: inherit; font-family: inherit; font-weight: bold;">font family</b><span style="font-family: inherit;"><b> </b> a specific font family (like "Times New Roman" or "Arial")</span></li>
</ol>
</span><ul style="background-color: white; box-sizing: inherit;">
</ul>
<div>
<div style="box-sizing: inherit;">
<div style="background-color: white;">
The font family of a text is set with the <b>font-family</b> property.</div>
<div style="background-color: white;">
The <b>font-family</b> property should hold several font names as a<i> "fallback"</i> system. If the browser does not support the first font, it tries the next font, and so on.</div>
<div style="background-color: white;">
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<b>Note:</b> If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
More than one font family is specified in a comma-separated list:</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-family<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> "Times New Roman", Times, serif<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div style="background-color: white;">
<br /></div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Font Style</span></h2>
<div style="background-color: white;">
<div>
The font-style property is mostly used to specify italic text.</div>
<div>
<br /></div>
<div>
This property has three values:</div>
<div>
<ol>
<li><b>normal </b> The text is shown normally</li>
<li><b>italic </b> The text is shown in italics</li>
<li><b>oblique </b> The text is "leaning" (oblique is very similar to italic, but less supported)</li>
</ol>
<div>
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.normal </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> normal<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.italic </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> italic<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.oblique </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> oblique<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
</div>
</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Font Size</span></h2>
</div>
<div style="background-color: white;">
<div>
The font-size property sets the size of the text.</div>
<div>
<br /></div>
<div>
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.</div>
<div>
Always use the proper HTML tags, like <b><h1> to <h6> for headings </b>and <b><p> for paragraphs.</b></div>
<div>
The font-size value can be an absolute, or relative size.</div>
<div>
Absolute size:</div>
<div>
<ol>
<li>Sets the text to a specified size</li>
<li>Does not allow a user to change the text size in all browsers (bad for accessibility reasons)</li>
<li>Absolute size is useful when the physical size of the output is known</li>
</ol>
</div>
<div>
Relative size:</div>
<div>
<ol>
<li>Sets the size relative to surrounding elements</li>
<li>Allows a user to change the text size in browsers</li>
</ol>
</div>
</div>
<div style="background-color: white;">
<span style="font-family: inherit; font-size: x-large;"><br /></span></div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Font Size With Pixels</span></h2>
<div style="background-color: white;">
<div style="box-sizing: inherit;">
<span style="font-family: inherit;">Setting the text size with pixels gives you full control over the text size:-</span></div>
<div style="box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<div style="box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h1 </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-size<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 40px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h2 </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-size<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 30px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-size<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 14px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div style="box-sizing: inherit;">
<span style="box-sizing: inherit;"><span style="font-family: inherit;"><br /></span></span></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><strong style="box-sizing: inherit;">Note:</strong> If you use pixels, you can still use the zoom tool to resize the entire page.</span></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Font Weight</span></h2>
</div>
<div style="background-color: white;">
The <b>font-weight</b> property specifies the weight of a font:-</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.normal </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-weight<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> normal<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.thick </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-weight<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> bold<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Font Variant</span></h2>
</div>
<div>
<div>
<span style="background-color: white;">The </span><b>font-variant</b><span style="background-color: white;"> property specifies whether or not a text should be displayed in a small-caps font.</span></div>
<div style="background-color: white;">
                     </div>
<div style="background-color: white;">
                 In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.normal </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-variant<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> normal<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.small </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    font-variant<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> small-caps<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">All CSS Font Properties</span></h2>
<div>
<table class="w3-table-all notranslate" style="border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 877px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 219px;">Property</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">font</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the font properties in one declaration</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">font-family</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the font family for text</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">font-size</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the font size of text</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">font-style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the font style for text</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">font-variant</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies whether or not a text should be displayed in a small-caps font</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">font-weight</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the weight of a font<br /></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
</div>
</div>
</div>
</div>
</div>

CSS fonts

The CSS font properties define the font family, boldness, size, and the style of a text. CSS Font Families In CSS, there are two ty...

August 13, 2017

Text Style Color in Css

<h2>
<span style="font-family: inherit; font-size: x-large;">Text Color:-</span></h2>
The shading property is utilized to set the shade of the content.With CSS, a shading is frequently determined by:<br />
<br />
<ul>
<li>a shading name - like "red" </li>
<li>a HEX esteem - like "#ff0000" </li>
<li>a RGB esteem - like "rgb(255,0,0)" </li>
</ul>
<br />
<br />
Take a gander at CSS Color Values for a total rundown of conceivable shading esteems.<br />
The default content shading for a page is characterized in the body selector.<br />
<br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">body </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    color<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> lightpink<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">h1 </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    color<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> lightgreen<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Alignment of Text:-</span></h2>
<div>
<div>
The <b>text-align</b> property is utilized to set the even arrangement of a content. </div>
<div>
<br /></div>
<div>
A content can be left or right adjusted, focused, or advocated. </div>
<div>
<br /></div>
<div>
The accompanying illustration indicates focus adjusted, and left and right adjusted content (left arrangement is default if content bearing is left-to-right, and right arrangement is default if content heading is all in all correct to-left):</div>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">h1 </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-align<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> center<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">h2 </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-align<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> left<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">h3 </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-align<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> right<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
At the point when the text-align property is set to "legitimize", each line is extended with the goal that each line has measure up to width, and the left and right edges are straight (like in magazines and daily papers):</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">div </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-align<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> justify<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Decoration in Css:-</span></h2>
</div>
<div>
<div>
The  <b>text-decoration</b> property is utilized to set or expel adornments from content. </div>
<div>
<br /></div>
<div>
The esteem <b>text-decoration: none;</b> is regularly used to expel underlines from joins</div>
</div>
<div>
<br />
<span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">a </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-decoration<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> none<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span>
<span style="background-color: white;"><span style="font-family: inherit;">The other <b>text-decoration</b> values are used to decorate text:</span></span><br />
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h1 </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-decoration<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> overline<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h2 </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-decoration<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> line-through<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h3 </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-decoration<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> underline<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span>
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span>
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"></span><br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Transformation</span></h2>
</div>
<div>
<div>
The text-transform property is used to specify uppercase and lowercase letters in a text.</div>
<div>
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:</div>
</div>
<div>
<span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.uppercase </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-transform<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> uppercase<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.lowercase </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-transform<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> lowercase<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p.capitalize </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-transform<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> capitalize<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Indentation</span></h2>
<div>
The text-indent property is used to specify the indentation of the first line of a text:</div>
<div>
<br /></div>
<div>
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">p </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-indent<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 50px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="box-sizing: inherit;"><h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Letter Spacing</span></h2>
<div>
<div>
The letter-spacing property is used to specify the space between the characters in a text.</div>
<div>
The following example demonstrates how to increase or decrease the space between characters:</div>
</div>
<div>
<br /></div>
<div>
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h1 </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    letter-spacing<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 3px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h2 </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    letter-spacing<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> -3px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="box-sizing: inherit;"><h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Shadow</span></h2>
<div>
<div>
The text-shadow property adds shadow to text.</div>
<div>
<br /></div>
<div>
The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):</div>
<div>
<br /></div>
<div>
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px;">h1 </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    text-shadow<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 3px 2px red<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
</div>
<div>
<span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="box-sizing: inherit;"><h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">All CSS Text Properties</span></h2>
<div>
<table class="w3-table-all notranslate" style="border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 877px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 175px;">Property</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">color</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the color of text</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">direction</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the text direction/writing direction</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">letter-spacing</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Increases or decreases the space between characters in a text</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">line-height</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the line height</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">text-align</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the horizontal alignment of text</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">text-decoration</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the decoration added to text</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">text-indent</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the indentation of the first line in a text-block</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">text-shadow</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the shadow effect added to text</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">text-transform</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Controls the capitalization of text</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">text-overflow</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies how overflowed content that is not displayed should be signaled to the user</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">unicode-bidi</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Used together with the <a href="https://www.w3schools.com/cssref/pr_text_direction.asp" style="background-color: transparent; box-sizing: inherit;">direction</a> property to set or return whether the text should be overridden to support multiple languages in the same document</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">vertical-align</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the vertical alignment of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">white-space</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies how white-space inside an element is handled</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">word-spacing</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Increases or decreases the space between words in a text</td></tr>
</tbody></table>
</div>
</span></div>
</span></div>
</span></div>
</span></div>

Text Style Color in Css

Text Color:- The shading property is utilized to set the shade of the content.With CSS, a shading is frequently determined by: a shadin...

August 08, 2017

Box Model In Css

<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<div style="box-sizing: inherit;">
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;">All HTML components can be considered as boxes. In CSS, the expression "box model" is utilized when discussing plan and design. </span></span><br />
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;">The CSS box display is basically a case that wraps around each HTML component. It comprises of: edges, outskirts, cushioning, and the genuine substance. The picture beneath outlines the crate display:-</span></span><br />
<span style="font-family: verdana, sans-serif;"><span style="font-size: 15px; font-weight: normal;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBi84Hl41TbnW6u88CWG9HlXMMeLhkW_q0q7dpfOcxE530_dkBqZoGyGOY1LzYExq-5dVGZ-5K1DN1UD9xO0oni_-SpdQDuFol1drvf5VT5t-qCRgDsGIUeqFSalmq1nuh4sGI_JBidU/s1600/2017-08-01_060729.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="314" data-original-width="726" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOBi84Hl41TbnW6u88CWG9HlXMMeLhkW_q0q7dpfOcxE530_dkBqZoGyGOY1LzYExq-5dVGZ-5K1DN1UD9xO0oni_-SpdQDuFol1drvf5VT5t-qCRgDsGIUeqFSalmq1nuh4sGI_JBidU/s640/2017-08-01_060729.jpg" width="640" /></a></div>
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;"><br /></span></span></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;">Clarification of the diverse parts:-</span></span><br />
<br />
<ul>
<li><span style="font-family: inherit; font-size: small;">Content </span><span style="font-family: inherit; font-size: small; font-weight: normal;">- The substance of the box, where content and pictures show up</span></li>
<li><span style="font-family: inherit; font-size: small;">padding<span style="font-weight: normal;"> - Clears a zone around the substance. The cushioning is straightforward</span></span></li>
<li><span style="font-family: inherit; font-size: small;">Border <span style="font-weight: normal;">- A fringe that circumvents the cushioning and substance </span></span></li>
<li><span style="font-family: inherit; font-size: small;">Margin<span style="font-weight: normal;"> - Clears a zone outside the Border. The Magin is straightforward</span></span></li>
</ul>
</div>
<ul style="box-sizing: inherit; font-family: verdana, sans-serif; font-size: 15px; font-weight: 400;">
</ul>
<div style="box-sizing: inherit;">
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;">The container show enables us to include a border around elements, and to characterize space between elements.</span></span><br />
<span style="font-family: inherit; font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="color: brown; font-family: Consolas, "courier new"; font-size: 16px; font-weight: normal;">div </span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; font-weight: normal;">{</span><span style="box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px; font-weight: normal;"><br style="box-sizing: inherit;" />    width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 300px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 25px solid green<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    padding<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 25px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 25px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px; font-weight: normal;">}</span></div>
</h2>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Width and Height</span><span style="font-family: "Segoe UI", Arial, sans-serif; font-size: 30px;">:-</span></h2>
<div>
Keeping in mind the end goal to set the width and height of a element accurately in all browsers, you have to know  how the box model works.</div>
<div>
<br /></div>
<div>
<div>
<b>Critical:</b> When you set the width and height properties of a element with CSS, you simply set the width and height of the content zone. To figure the full size of a component, you should likewise include padding, borders and Margin. </div>
<div>
<br /></div>
<div>
Expect we need to style a <div> component to have an aggregate width of 500px:</div>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">div </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 350px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    padding<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 15px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 7px solid pink<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 0<span style="box-sizing: inherit; color: black;">;</span></span> </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span></div>
<div>
Calculation of the above Example:-</div>
<div>
<br /></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">320px (width)</span><br style="background-color: white; box-sizing: inherit;" /><span style="background-color: white;">+ 20px (left + right padding)</span><br style="background-color: white; box-sizing: inherit;" /><span style="background-color: white;">+ 10px (left + right border)</span><br style="background-color: white; box-sizing: inherit;" /><span style="background-color: white;">+ 0px (left + right margin)</span><br style="background-color: white; box-sizing: inherit;" /><strong style="background-color: white; box-sizing: inherit;">= 350px</strong></span></div>
<div>
<span style="font-family: inherit;"><strong style="background-color: white; box-sizing: inherit;"><br /></strong></span></div>
<div>
<span style="font-family: inherit;"><strong style="background-color: white; box-sizing: inherit;"><br /></strong></span></div>
<div>
The aggregate width of an element should be computed this way:-</div>
<div>
<br /></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">Total element width = width + left padding + right padding + left border + right border + left margin + right margin</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
The aggregate height of an element should be figured this way:-</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="background-color: white;"><b>Note for old IE</b>: internet Explorer 8 and earlier versions, incorporate padding and border in the width property. To fix this issue, add a <!DOCTYPE html> to the HTML page.</span></div>

Box Model In Css

All HTML components can be considered as boxes. In CSS, the expression "box model" is utilized when discussing plan and design. ...

August 01, 2017

CSS Height and Width

<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Setting height and width:-</span></h2>
<div>
The <b>height</b> and <b>width</b> properties are used to set the height and width of an element. The height and width can be set to auto.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRRCfNZDZJzlP6rInlA5pMB6wW7s4SCKRIzz0dwMaiUNpxHeh3ZuRWb-OTLJa940TBnTaWB9DSI_3YACsjdHc-WcQOByWbVyP4XOh3JkpjooDuJyxynos9O87gJ73duLwsGRhcaJqHlE/s1600/2017-07-28_103715.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="197" data-original-width="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRRCfNZDZJzlP6rInlA5pMB6wW7s4SCKRIzz0dwMaiUNpxHeh3ZuRWb-OTLJa940TBnTaWB9DSI_3YACsjdHc-WcQOByWbVyP4XOh3JkpjooDuJyxynos9O87gJ73duLwsGRhcaJqHlE/s1600/2017-07-28_103715.jpg" /></a></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">div </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" /><span style="color: red;">    height</span><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 200px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" /><span style="color: red;">    width</span><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 50%<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" /><span style="color: red;">    background-color</span><span style="box-sizing: inherit;"><span style="box-sizing: inherit; color: black;">:</span><span style="box-sizing: inherit;"><span style="color: mediumblue;"> lightpink</span></span><span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div stylye="bgcolor='lightpink'">
<b>Note:</b> The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element<br />
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Setting max-width:-</span></h2>
<div>
The <b>max-width</b> property is used to set the maximum width of an element. The <b>max-width</b> can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width). The <b>max-width</b> can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the pag.Using<b> max-width </b>instead, in this situation, will improve the browser's handling of small windows.Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!</div>
<div>
<br /></div>
<div>
Note: The value of the max-width property overrides width.</div>
<div>
The following example shows a <div> element with a height of 100 pixels and a max-width of 500 pixels:<br />
<br />
<span style="background-color: white; color: brown; font-family: Consolas, "courier new"; font-size: 16px;">div </span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: Consolas, "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    max-width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 500px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    height<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 100px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    background-color<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> powderblue<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;"><br /></span>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">All CSS Dimension Properties:-</span></h2>
</div>
<div>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 933px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 186px;">Property</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">height</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the height of an element</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">max-height</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the maximum height of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">max-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the maximum width of an element</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">min-height</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the minimum height of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">min-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the minimum width of an element</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the width of an element</td></tr>
</tbody></table>
</div>
</div>

CSS Height and Width

Setting height and width:- The height and width properties are used to set the height and width of an element. The height and width can...

July 28, 2017

CSS Padding

The CSS <b>padding</b> properties are used to generate space around content.<span style="background-color: white;"><span style="font-family: inherit;">The padding clears an area around the content (inside the border) of an element.</span></span><br />
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFMNThSUl1t9m7MMa7TUtHXy-U1qlbayL5T3kLlvXJvtFktO428yr-LTGa_rJZq08gFJ4_pR5fKho4pKpuZmhMoiZmZKlifnAcTiLX2uDaobHkIvEPqWcHul-atksm1n5lm7oXpJmVjU/s1600/padding.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="385" data-original-width="783" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFMNThSUl1t9m7MMa7TUtHXy-U1qlbayL5T3kLlvXJvtFktO428yr-LTGa_rJZq08gFJ4_pR5fKho4pKpuZmhMoiZmZKlifnAcTiLX2uDaobHkIvEPqWcHul-atksm1n5lm7oXpJmVjU/s640/padding.png" width="640" /></a></div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Individual Sides in padding:-</span></h2>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">CSS has properties for specifying the padding for each side of an element are as follows:-</span></span></div>
<div>
<ol>
<li>padding-top</li>
<li>padding-right</li>
<li>padding-bottom</li>
<li>padding-left</li>
</ol>
<span style="background-color: white;"><span style="font-family: inherit;">All the padding properties can have the following values:-</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<ol>
<li><span style="font-family: inherit;"><em style="background-color: white; box-sizing: inherit;">length</em><span style="background-color: white;"> - specifies a padding in px</span></span></li>
<li><span style="background-color: white;"><span style="font-family: inherit;"><em style="box-sizing: inherit;">%</em> - specifies a padding in %</span></span></li>
<li style="box-sizing: inherit;"><span style="font-family: inherit;">inherit - specifies that the padding should be inherited from the parent element</span></li>
</ol>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">The following example sets different padding for all sides of a <p> element:-</span></span></div>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    padding-top<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 50px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    padding-right<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 30px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    padding-bottom<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 50px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    padding-left<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 80px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"></span><br />
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit; font-size: x-large;">Shorthand Property:-</span></span></h2>
<span style="background-color: white; box-sizing: inherit;">
</span>
<div>
<div>
<span style="background-color: white; box-sizing: inherit;">To shorten the code, it is possible to specify all the padding properties in one property.The padding property is a shorthand property for the following individual padding properties:</span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><b>padding-top padding-right padding-bottom padding-left</b></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><br /></span>
<div>
<span style="background-color: white; box-sizing: inherit;"><b>Example:-</b></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><b><br /></b></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"><span style="color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p </span><span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    padding<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 50px 30px 50px 80px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></span></div>
</div>
</div>
<span style="background-color: white; box-sizing: inherit;">
<div>
<span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">All CSS Padding Properties:-</span></h2>
</div>
<div>
<br /></div>
<div>
<table class="w3-table-all notranslate" style="border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 872px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 174px;">Property</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">padding</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">A shorthand property for setting all the padding properties in one declaration</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">padding-bottom</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the bottom padding of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">padding-left</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the left padding of an element</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">padding-right</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the right padding of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">padding-top</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the top padding of an element</td></tr>
</tbody></table>
</div>
<div>
<h3 style="background-color: white;">
<div style="font-size: medium; font-weight: normal;">
IF you have any question about this lecture you can comment blow. feel free to contact me.</div>
</h3>
</div>
</span></div>

CSS Padding

The CSS padding properties are used to generate space around content. The padding clears an area around the content (inside the border) of ...

July 22, 2017

CSS Margin

<span style="font-family: inherit;">The CSS <b>margin</b> properties are used to generate space around elements. the <b>margin </b>property size of white space of the border.with CSS you have full control over the margin.There are the css property for setting the margin of each side of an element.</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX36nd8JlZvijNjY-WgES9Ifxqri7owCVAeFIyalYpfdlZn1Aj84o_p69FQxBu2LbRwIoA4-md-9P1s2TxlHl7iPzhT3j9jPWbpS5AhF7jdXNEcfwp20wVBB1I5yUJW3WAqCoCbz1TELo/s1600/margin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="409" data-original-width="756" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX36nd8JlZvijNjY-WgES9Ifxqri7owCVAeFIyalYpfdlZn1Aj84o_p69FQxBu2LbRwIoA4-md-9P1s2TxlHl7iPzhT3j9jPWbpS5AhF7jdXNEcfwp20wVBB1I5yUJW3WAqCoCbz1TELo/s640/margin.jpg" width="640" /></a></div>
<span style="font-family: inherit;"><br /></span>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Margin - Individual Sides:-</span></h2>
<div>
CSS has the property for specifying the margin for each side of an element.</div>
<div>
<ol>
<li>margin_top</li>
<li>margin-left</li>
<li>margin-right</li>
<li>margin-bottom</li>
</ol>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">All the margin properties can have the following values:-</span></span></div>
</div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<ol>
<li style="box-sizing: inherit;">auto - the browser calculates the margin</li>
<li style="box-sizing: inherit;"><em style="box-sizing: inherit;">length</em> - specifies a margin in px, pt, cm, etc.</li>
<li style="box-sizing: inherit;"><em style="box-sizing: inherit;">%</em> - specifies a margin in % .</li>
<li style="box-sizing: inherit;">inherit - specifies that the margin should be inherited from the parent element</li>
</ol>
<div>
<b style="background-color: lightpink; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">Note:</b><span style="background-color: lightpink; font-family: "verdana" , sans-serif; font-size: 15px;"> Negative values are allowed.</span><br />
<span style="background-color: lightpink; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span>
<span style="background-color: white;"><span style="font-family: inherit;">The following example sets margins for all sides of a <p> element:-</span></span><br />
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: white; color: brown;">p </span><span style="background-color: white; box-sizing: inherit;">{</span><span style="background-color: white; box-sizing: inherit; color: red;"><br style="box-sizing: inherit;" />    margin-top<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 100px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin-bottom<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 100px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin-right<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 150px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin-left<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 80px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit;">}</span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; box-sizing: inherit;"><br /></span></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Shorthand Property:-</span></h2>
<div>
You can write margin property in one line to short the code, You can write the margin property for the following individual property.</div>
<div>
<br /></div>
<div>
<b>margin-top , margin-right, margin-bottom, margin-left</b></div>
<br />
<br />
<b>Example:-</b><br />
<b><br /></b>
<span style="font-family: inherit;"><span style="background-color: white; color: brown;">p </span><span style="background-color: white; box-sizing: inherit;">{</span><span style="background-color: white; box-sizing: inherit; color: red;"><br style="box-sizing: inherit;" />    margin<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 100px 150px 100px 80px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit;">}</span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; box-sizing: inherit;"><br /></span></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Auto Value:-</span></h2>
</div>
</div>
<div>
The auto property is used <span style="font-family: inherit;">to <span style="background-color: white;">horizontally center the element within its container.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white; color: brown;">div </span><span style="background-color: white; box-sizing: inherit;">{</span><span style="background-color: white; box-sizing: inherit; color: red;"><br style="box-sizing: inherit;" />    width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 300px<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> auto<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 1px solid red<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit;">}</span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white; box-sizing: inherit;"><br /></span></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">inherit Value:-</span></h2>
</div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">This example lets the left margin be inherited from the parent element.</span></span></div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">div.Header </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 1px solid red<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    margin-left<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 100px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.first </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    margin-left<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> inherit<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit;"></span><br />
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit; font-size: x-large;">Margin Collapse:-</span></span></h2>
<span style="background-color: white; box-sizing: inherit;">
</span>
<div>
<span style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;">Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.This does not happen on left and right margins? Only top and bottom margins?</span></span></div>
<span style="background-color: white; box-sizing: inherit;">
</span><br />
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">Look at the following example:-</span></div>
<div style="background-color: white; box-sizing: inherit;">
<br /></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">h1 </span><span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    margin<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 0 0 50px 0<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">h2 </span><span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    margin<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 20px 0 0 0<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"></span></div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">All CSS Margin Properties:-</span></h2>
</div>
<div>
<br /></div>
<div>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 860px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 171px;">Property</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">margin</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">A shorthand property for setting the margin properties in one declaration</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">margin-bottom</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the bottom margin of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">margin-left</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the left margin of an element</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">margin-right</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the right margin of an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">margin-top</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the top margin of an element</td></tr>
</tbody></table>
</div>
<div>
<h3 style="background-color: white;">
<div style="font-size: medium; font-weight: normal;">
IF you have any question about this lecture you can comment blow. feel free to contact me.</div>
<div style="font-size: medium; font-weight: normal;">
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>
</h3>
</div>

CSS Margin

The CSS margin properties are used to generate space around elements. the margin property size of white space of the border.with CSS you ha...

July 21, 2017

CSS Borders

<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Border Properties:-</span></h2>
<div>
<span style="font-family: inherit;">The CSS <b>border properties</b> allow you to specify the style, width, and color of an element's border.</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhREOTMfGu5wxV7q_7FgVKY1hyphenhyphentg4HC6xv79kQ4Ix5anQNXL2rueZ3DDOqoQYCi8GvNA3AAim_m3ohijASA0ppJxeCNcQ4xKQlNqxnPIa2ZXFH2Vh4V9partgIEtxO6iFpAz9y3UFJZY/s1600/borders.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="888" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhREOTMfGu5wxV7q_7FgVKY1hyphenhyphentg4HC6xv79kQ4Ix5anQNXL2rueZ3DDOqoQYCi8GvNA3AAim_m3ohijASA0ppJxeCNcQ4xKQlNqxnPIa2ZXFH2Vh4V9partgIEtxO6iFpAz9y3UFJZY/s640/borders.png" width="640" /></a></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Border Style:- </span></h2>
</div>
<div>
The <b>border-style</b> property specifies what kind of border to display. </div>
<div>
The following values are allowed:-</div>
<div>
<ol>
<li><b>dotted </b>- Defines a dotted border</li>
<li></li>
<li><b>dashed</b> - Defines a dashed border</li>
<li><b>solid </b>- Defines a solid border</li>
<li><b>double </b>- Defines a double border</li>
<li><b>groove</b> - Defines a 3D grooved border. The effect depends on the border-color value</li>
<li><b>ridge </b>- Defines a 3D ridged border. The effect depends on the border-color value</li>
<li><b>inset</b> - Defines a 3D inset border. The effect depends on the border-color value</li>
<li><b>outset</b> - Defines a 3D outset border. The effect depends on the border-color value</li>
<li><b>none </b>- Defines no border</li>
<li><b>hidden</b> - Defines a hidden border</li>
</ol>
<span style="background-color: white;"><span style="font-family: inherit;">The <b>border-style</b> property can have from one to four values (for the top border, right border, bottom border, and the left border).</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="background-color: white;"><b>Example:- </b></span></div>
<div>
<span style="background-color: white;"><b><br /></b></span></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.dotted </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> dotted<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.dashed </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> dashed<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.solid </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.double </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> double<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.groove </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> groove<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.ridge </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> ridge<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.inset </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> inset<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.outset </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> outset<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.none </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> none<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.hidden </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> hidden<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.mix </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;">border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> dotted dashed solid double<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: white; font-size: 15px;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NmgqxbfTYkQGOSeG3wzbRIQ9IWwV7msXmCCmmWRBFTYoel_jASKswp3iWXpIgPjz4z99-0DmweNPEsaOQtNGTYn810WuPzFP4RKnAqfX_L2jHDxanuZ8xFqXaMga7xUwwfnIuleWqds/s1600/2017-07-21_100440.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="494" data-original-width="844" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NmgqxbfTYkQGOSeG3wzbRIQ9IWwV7msXmCCmmWRBFTYoel_jASKswp3iWXpIgPjz4z99-0DmweNPEsaOQtNGTYn810WuPzFP4RKnAqfX_L2jHDxanuZ8xFqXaMga7xUwwfnIuleWqds/s640/2017-07-21_100440.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Border Width:-</span></h2>
</div>
<div>
The <b>border-width</b> property specifies the width of the four borders.<span style="background-color: white;"><span style="font-family: inherit;">The width can be set as a specific size by using one of the three pre-defined values: thin, medium, or thick. </span></span></div>
<div>
The <b>border-width</b> property can have from one to four values (for the top border, right border, bottom border, and the left border).</div>
<div>
<br /></div>
<div>
<b>Example:- </b></div>
<div>
<b><br /></b></div>
<div>
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.one </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border-width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 5px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.two </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border-width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> medium<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.three </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border-width<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> 2px 10px 4px 20px<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span></div>
<div>
<br /></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Border Color in CSS:-</span></h2>
</div>
<div>
The <b>border-color</b> property is used to set the color of the four borders.</div>
<div>
<br /></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">The color can be set by:-</span></span></div>
<div>
<ol>
<li style="box-sizing: inherit;"><b>name</b> - specify a color name, like "red"</li>
<li style="box-sizing: inherit;"><b>Hex </b>- specify a hex value, like "#ff0000"</li>
<li style="box-sizing: inherit;"><b>RGB</b> - specify a RGB value, like "rgb(255,0,0)"</li>
<li>transparent</li>
</ol>
<div>
<span style="font-family: inherit;">The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). </span></div>
</div>
<div>
<span style="font-family: inherit;">If border-color is not set, it inherits the color of the element.</span></div>
<div>
<span style="font-size: x-large;"><b><br /></b></span>
<span style="font-size: x-large;"><b>Example:-</b></span><br />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.one </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border-color<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> red<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.two </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border-color<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> green<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<br style="background-color: white; box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p.three </span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">{</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"><br style="box-sizing: inherit;" />    border-style<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> solid<span style="box-sizing: inherit; color: black;">;</span></span><br style="box-sizing: inherit;" />    border-color<span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: black;">:</span> red green blue yellow<span style="box-sizing: inherit; color: black;">;</span></span></span><span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;">}</span><br />
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span>
<span style="background-color: white; box-sizing: inherit; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Rounded Borders in CSS:-</span></h2>
</div>
<div>
<span style="font-family: inherit;">The border-radius property is used to add rounded borders to an element:-</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bnyOqmggVGsdfA7uh0Gc-BzP9m_JTENnEdKouAA5A0RXmfNM4wJ7a7OyNoiU_Yd2O2vo9SiDX8dP8OahYQd6b1gzwBQjTbyRCCzDtwJ3IXfxJhjdT5srE5egXQ6t04xUxa-J26a4zfo/s1600/2017-07-21_103327.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="190" data-original-width="895" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4bnyOqmggVGsdfA7uh0Gc-BzP9m_JTENnEdKouAA5A0RXmfNM4wJ7a7OyNoiU_Yd2O2vo9SiDX8dP8OahYQd6b1gzwBQjTbyRCCzDtwJ3IXfxJhjdT5srE5egXQ6t04xUxa-J26a4zfo/s640/2017-07-21_103327.png" width="640" /></a></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">All CSS Border Properties:-</span></h2>
</div>
<div>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 876px;"><tbody style="box-sizing: inherit;">
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the border properties in one declaration</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-bottom</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the bottom border properties in one declaration</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-bottom-color</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the color of the bottom border</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-bottom-style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the style of the bottom border</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-bottom-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the width of the bottom border</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-color</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the color of the four borders</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-left</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the left border properties in one declaration</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-left-color</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the color of the left border</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-left-style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the style of the left border</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-left-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the width of the left border</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-radius</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the four border-*-radius properties for rounded corners</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-right</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the right border properties in one declaration</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-right-color</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the color of the right border</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-right-style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the style of the right border</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-right-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the width of the right border</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the style of the four borders</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-top</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets all the top border properties in one declaration</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-top-color</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the color of the top border</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-top-style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the style of the top border</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-top-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the width of the top border</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">border-width</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets the width of the four borders</td></tr>
</tbody></table>
</div>
<div>
<h3 style="background-color: white;">
<div style="font-size: medium; font-weight: normal;">
IF you have any question about this lecture you can comment blow. feel free to contact me.</div>
<div style="font-size: medium; font-weight: normal;">
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>
</h3>
</div>

CSS Borders

Border Properties:- The CSS border properties allow you to specify the style, width, and color of an element's border. Border...

July 21, 2017