html tutorial
<b> background-color</b><br>
<p> background-image:url() <br>
background-size:cover/content <br>
background-repeat(norepeat,repeat,xrepeat,yrepeat,round) <br>
background-position </p> <br>
<div class="box-first">
<h1>hello world</h1>
<p>this is a box tag and div class tag</p>
<h2>content-box</h2>
<h2>padding(content to border space)</h2>
<h2>background-attachment(scroll,fixed,local)</h2>
<h3>border-style</h3>
<h3>MARGIN = border to webpage space</h3>
<h3>border width (thin,thick,medium) <br>
border color(red,green,...)
border style(solid,dotted,dashed,double,groove,ridge,inset,outset)</h3>
<table border="2">
<tr><th>tag</th><th>value</th></tr>
<tr><td>style</td><td>style=color...</td></tr>
<tr><td>css</td><td>inline,internel,external</td></tr>
<tr><td>style type=</td><td>media=screen and (max width px; )</td></tr>
<tr><td>background</td><td>image:url()</td></tr>
<tr><td>background</td><td>position x,y </td></tr>
</table>
</div><br><br>
<table height="500" width="700" border="5" bordercolor="Blue" class="first">
<tr><th>name</th><th>value</th></tr>
<tr><td>color</td><td>linear-gradient</td></tr>
<tr><td>color</td><td>repeat-linear-gradient(%)</td></tr>
<tr><td>color</td><td>radial-gradient(circle)</td></tr>
<tr><td>color</td><td>repeat-radial-gradient</td></tr>
<tr><td>size</td><td>closest-side</td></tr>
<tr><td>size</td><td>farthest-side</td></tr>
<tr><td>size</td><td>closest-corner</td></tr>
<tr><td>size</td><td>farthest-corner</td></tr>
<tr><td>background</td><td>conic-gradient</td></tr>
<tr><td>background</td><td>repeating-conic-gradient</td></tr>
<tr><td>value</td><td>outline/inline</td></tr>
<tr><td>value</td><td>outline-offset</td></tr>
</table>
<section class="box">
<h1>heading</h1>
</section>
<div class="box-second">
<h1>GOOGLE</h1>
</div>
<article>
<h1>this is heading in text property </h1>
<p class="first"> word spacing ,this design is used text property
<span>span tag(list item,block,inherit,initial)</span>and this is paragraph and i designed this
paragraph with css to this is a first paragraph </p>
<h2>this is heading two </h2>
<p class="second"> this is a second paragraph and i designed with using css paragraph second <br>
text spacing </p>
<h3>text decoration-(color=rgba)(style=solid,dotted,wavy,double,dashed)
(line=none,underline,overline, line-through,)
(thickness= ..px)</h3>
<h3>text-transform(uppercase,lovercase,)</h3>
<p class="third"> this is shadow tag </p>
</article>
<div class="container">
<div class="item item1">item 1</div>
<div class="item item2">item 2</div>
<div class="item item3">item 3</div>
<div class="item item4">item 4</div>
<div class="item item5">item 5</div>
</div>
<div class="box-third">cursor property</div>
<table border="2" cellpadding="10" cellspacing="5" class="second">
<tr><th>tag</th><th>value</th></tr>
<tr><td>font-weight</td><td>lighter,normal,bold,bolder,medium </td></tr>
<tr><td>font-style</td><td>oblique</td></tr>
<tr><td>font-varient</td><td>small-caps,normal,</td></tr>
<tr><td>line-height</td><td>....px </td></tr>
<tr><td>font</td><td>style,varient,weight,size/height,f-family,</td></tr>
<tr><td>box-position</td><td>static,relative,fixed,absolute</td></tr>
</table><br><br>
<table border="5" cellpadding="5" cellspacing="7" height="auto" width="700" class="third">
<caption>this is caption tag</caption>
<tr><th>tag</th><th>value</th></tr>
<tr><td>table-layout</td><td>auto,fixed,</td></tr>
<tr><td>border-collapse</td><td>collapse,separate</td></tr>
<tr><td>border-space</td><td>..px</td></tr>
<tr><td>verticle-align</td><td>top,bottom</td></tr>
<tr><td>empty-cell</td><td>show,hide</td></tr>
<tr><td>captiond-side</td><td>top,bottom</td></tr>
<tr><td>padding</td><td>...px, ...px </td></tr>
<tr><td>nth-child</td><td>(odd,even)background-color,color</td></tr>
<tr><td>hover</td><td>background-color</td></tr>
<tr><td>visibility</td><td>hidden,collapse,visible</td></tr>
<tr><td>nav position</td><td>sticky(top,bottom px..)</td></tr>
<tr><td>div</td><td>div tag is used for 100% width </td></tr>
<tr><td>float</td><td>left,right</td></tr>
<tr><td>z-index</td><td>1,2,3,...</td></tr>
<tr><td>flex-wrap</td><td>wrap</td></tr>
<tr><td>justify-content</td><td>space-around</td></tr>
<tr><td>box-shadow</td><td>hr(px),verticle(px),blore(px),spread(px),color,double shadow,color</td></tr>
<tr><td>simple selectors</td><td>Element Selector,id selector,class selector,universel selector,grouping selector</td></tr>
<tr><td>combinator selectors</td><td>descendant(space),child (>),adjacent sibling (+),general sibling(~),</td></tr>
<tr><td>attribute selector</td><td>simple,attribute ([])</td></tr>
<tr><td>Pseudo-class selector</td><td>direct designed</td></tr>
<tr><td>Pseudo-element selector</td><td>specific area (first later ,second later)</td></tr>
<tr><td>link</td><td>link,visited,active,hover</td></tr>
<tr><td>coma selector</td><td>first-child,last-child,nth-child,nth-last-child(),nth-last-of-type(),nth-of-type,
only-child,only-of-type,furst-of-type,kast-of-type,last-of-type,empty,not(h,p)</td></tr>
<tr><td>form selectors</td><td>focus,chacked,disabled,enabled,required,optional,out-of-range,in-range,
read-only,read-write,invalid,valid,default, </td></tr>
<tr><td>variable selector</td><td>root(--var)</td></tr>
<tr><td>Pseudo-element</td><td>(::)before,after,placeholder,selection,first-line,first-later</td></tr>
</table>