Level 1 level 1

helow my name is rahul verma

level 1

helow my name is rahul verma

internal css using style tag

my

name

is

rahul

External css exaple

my name is rahul verma

hyper text markup language

cascading stylesheet

7.css h1 { color : red; } body{ background-color: pink; } button{ color : blue; background-color : yellow; } 7.html External css exaple

my name is rahul verma

hyper text markup language

cascading stylesheet

UNIVERSAL SELECTOR External css exaple

my name is rahul verma

hyper text markup language

cascading stylesheet

7.CSS *{ color: blue;} 7.CSS H1{ COLOR: BLUE ; BACKGROUND-COLOR : GRAY; } 1.HTML ELEMENT SELECTOR

my name is rahul verma

hyper text markup language

cascading stylesheet

7.css #a{ COLOR: GREEN; } #b{ COLOR: RED; } #c{ COLOR: yellow; } #d{ COLOR: purple; } n.html ID SELCECTO EXAMPLE

my name is rahul verma

hyper text markup language

cascading stylesheet

7.css #a{ COLOR: GREEN; } .b{ COLOR: RED; } #d{ COLOR: purple; } n.html class SELCECTO EXAMPLE

my name is rahul verma

hyper text markup language

cascading stylesheet

7.css /*Q1. create a simple div with an id "box" add some test contain inside the div set its backgroumnd color to blue */ #box{ background-color: blue; } 7.html practice set problem 1

my name is rahul verma .

7.css /* Q2. create a headings with h1,h2,h3 a give them all a class "heading" & set color of heading read. */ .heading{ color: red; /* border: 5px solid green; width : 300px; background-color : pink; */ } /* h1,h2,h3{ color : blue; } */ 7.html practice set problem 2

this is a heading first

this is a heading second

this is a heading third

7.css /* Q3.create a button & set its background color * green using css stylesheet * blue using style tag * pink using inline style */ button{ background-color: green; } /* button { border: 5px solid orange; } */ 7.html practice set problem 3 7.css /* my pratics /* Q3.create a button & set its background color * green using css stylesheet * blue using style tag * pink using inline style */ #css{ background-color: green; } /* button { border: 5px solid orange; } */ 7.html practice set problem 3



7.css /* Text properties */ /* text-align -> right,center,left */ h1{ text-align: left } h2{ text-align: center; } h3{ text-align: right; } 7.html test-aligh eg

my

name

is

7.css /* according to new version css3 */ /* Text properties */ /* text-align -> right,center,left */ h1{ text-align: start } h2{ text-align: center; } h3{ text-align: end; } 7.html test-aligh eg

my

name

is

7.css /* according to new version css3 */ /* Text properties */ /* text-align -> right,center,left */ h1{ text-decoration: underline; } h2{ text-decoration: overline; } h3{ text-decoration: line-through; } 7.html test-aligh eg

underline

overline

line-through

7.css /* according to new version css3 */ /* Text properties */ /* text-align -> none */ a{ text-decoration: none; } 7,hmtl test-aligh eg google.com 7.css /* Text properties */ /* text-decoration */ a{ text-decoration: red wavy line-through; } 7.html test-aligh eg google.com 7.css /* Text properties */ /* font-weight eg-> normal,bold,bolder,lighter*/ /* using id selector */ #h1{ font-weight: norml; } #h2{ font-weight: lighter; } #p2{ font-weight: bolder; } #p1{ font-weight: bold; } 7.html font weight eg -> normal,bold,bolder,lighter

normal

lighter

bold

bolder

  7.CSS /* Text properties */ /* font-weight eg-> normal,bold,bolder,lighter*/ /* using id selector */ #h1{ font-weight:100; } #h2{ font-weight: 300; } #p2{ font-weight: 700; } #p1{ font-weight:900; } 7.HTML font weight eg -> normal,bold,bolder,lighter

normal

lighter

bold

bolder

FONT FAMILI font-family eg

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, doloribus?




Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas.

7.css #p1{ font-family: segoe ui black; } #p2{ font-family: cursive; } 7.html font-size: 10 px;

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, doloribus?




Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas.

7.css #p1{ font-family: segoe ui black; font-size: 100pz; } #p2{ font-family: cursive; font-size: 30px; } 7.html font-size example fone-size eg in px

25 pxc language is develop by denish riche

50px html is stander form is hyter text markup language

100px oop is methodology and pradigm to deshign a program usign class and object.

7.css #c{ font-size: 25px; } #html{ font-size: 50px; } #oops{ font-size : 100px; } Output 7.css #c{ font-size: 25px; line-height: 20px; } #html{ font-size: 50px; line-height: normal; } #oops{ font-size : 30px; line0-height: 30px } 7.html line-height example

20 pxc language is develop by denish riche for creating system applicaton such as driver kernel ext. c language is also know a mother language. which are define the following way .mother language,procedure oriented programming language,Structure programming language

normal html is stander form is hyter text markup language Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro maxime tempora quod, veniam error incidunt consectetur dolorum a temporibus necessitatibus!

30px oop is methodology and pradigm to deshign a program usign class and object.it is spacifies the software developer maintain by provding the same concept and define blow .

Output transfrom-size example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, aperiam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, dolores ipsa ipsum nesciunt in qui esse iure? Obcaecati, quia modi.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi beatae obcaecati delectus. Quaerat quas ipsam nam eos dolores laborum repellat, nobis incidunt obcaecati quod?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, soluta iure quod sit fugit libero, hic assumenda, aliquam voluptatem dolores sint autem ducimus labore. Sit quam repellendus in quae optio?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis assumenda, quis molestias quaerat architecto ducimus aut neque velit consequatur quam optio libero nobis quibusdam voluptas dignissimos porro nesciunt! Sit perspiciatis ut autem tempore nobis ipsum at.

7.css #p1{font-family: Bahnschrift SemiBold SemiConden; font-size: 25px; line-height:25px; text-transform: uppercase; } #p2{font-family: "Lucida Handwriting"; font-size: 25px; line-height:25px; text-transform: lowercase; } #p3{font-family: Freestyle Script; font-size: 25px; line-height:25px; text-transform: capitalize;} #p4{font-family: Kristen ITC; font-size: 25px; line-height:25px; text-transform: none;} output 7.html transfrom-size example

rahul verma

7.css /* Q1. Create a heading cented on the page with all of its text capitilized by default. */ h1{ text-align: center; text-transform: capitalize; } Output transfrom-size example
my name is rahul
my name is aman
7.css #outer{ font-size: 25px; } #inner{ font-size: 10px; } Output   7.html

height

width

7.css /* height example */ h1{ height: 100px; background-color : lightblue; } Output 7.html

height

width

7.css /* width example */ h1{ width: 100px; background-color : lightblue; } Output 7.html

height

width

7.css /* border example */ h1{ width: 300px; text-align: center; background-color : lightblue; border-width: 3px; border-style: dashed; border-color: blue; } Output 7.html

height

width

7.css /*shorted border example */ h1{ width: 300px; text-align: center; background-color : lightblue; border: 5px dotted red; } Output 7.html border-radius example

1


2


3
7.css .my{ width: 100px; height: 100px; font-size: 20px; font-family: cursive; font-weight: bolder; text-decoration: underline; text-align: center; text-transform: uppercase; background-color: pink; border: 5px solid blue; border-radius: 50%; } Output Padding example 7.html padding example
database is a collection of realated daa
-7.css div{ width: 80px; height: 80px; border: 5px solid saddlebrown; border-radius: 2px; padding-left: 20px; padding-top: 40px; padding-bottom: 40px; padding-right: 20px; } Output Shorthand padding example padding example
div1


div 2
7.css .my { width: 140px; height: 140px; background-color : pink; font-family: cursive; font-size: 20px; font-weight: bolder; text-align: left; text-decoration: underline; text-transform: uppercase; border: 5px solid red; border-radius: 5px; padding : 20px 60px 20px 10px; } .fy{ width: 300px; height: 300px; font-family: cambria; font-size: 30px; font-weight: lighter; text-decoration: line-through; text-transform: uppercase; border: 6px dotted blue; border-radius: 50%; background-color : lawngreen; padding : 150px; } Output padding example
div1


div 2
7.css .my { width: 140px; height: 140px; background-color : pink; font-family: cursive; font-size: 20px; font-weight: bolder; text-align: left; text-decoration: underline; text-transform: uppercase; border: 5px solid red; border-radius: 5px; margin : 20px 60px 20px 10px; } .fy{ width: 300px; height: 300px; font-family: cambria; font-size: 30px; font-weight: lighter; text-decoration: line-through; text-transform: uppercase; border: 6px dotted blue; border-radius: 50%; background-color : lawngreen; margin: 10%; } Output padding example
div1
7.css .my { width: 140px; height: 140px; background-color : pink; border: 5px solid red; border-radius: 5px; margin-left:400px; padding: 0px 0px 0px 400px; } Ouput 7.html padding example
7.css div{ width: 100px ; height: 100px; background-color : green ; border-radius: 50% ; } Output Que 2. navigation 7.css *{ padding : 0px; margin : 0px; color: white; text-decoration: none; } #navbar{ background-color : #0f1111; height : 60px; } #logo{ color : orange; padding-right: 200px; font-size: 25px; } button{ background-color : #f08804; } input{ color : black; } a{ padding-right : 200px; } /* body{ background-color: rgb(61, 2, 70); } */ Output include comment area part Using inline display properties example’s 7.html inline,block,
using iznline display property
without using inline display property
7.css #div1{ border: 2px dashed magenta; display: inline; } div{ border: 6px dotted aqua; } Output 7.html inline,block, using display : block properties using display : block properties 7.css /* bloack display properties example */ #button1{ background-color: skyblue ; display : block; } #button2{ background-color: pink ; } Output Document

this is a box




div 1
div 2
div 3
7.CSS /* kishi bhi div mai inline display set karene pare padding top or bottom se apply nhi hoti hai for example */ div{ padding : 25px; margin: 25px; width : 100px; height : 100px; display: inline; } #div1{ background-color: blue; } #div2{ background-color: red; } #div3{ background-color: #00ff00; } OUTPUT 7.html using inline block

this is a box




div 1
div 2
div 3
7.css /* using inline property */ div{ padding : 25px; margin: 25px; width : 100px; height : 100px; display: inline-block; } #div1{ background-color: blue; } #div2{ background-color: red; } #div3{ background-color: #00ff00; } Output using inline block

this is a box




div 1
div 2
div 3
7.css /* using display : none property */ div{ padding : 25px; margin: 25px; width : 100px; height : 100px; display: inline-block; } #div1{ background-color: blue; } #div2{ background-color: red; } #div3{ background-color: #00ff00; } .my{ display: none; } Ouptput 7.html using inline block

this is a box




div 1
div 2
div 3
7.css /* using visibility : hidden ; propertiy */ div{ padding : 25px; margin: 25px; width : 100px; height : 100px; display: inline-block; } #div1{ background-color: blue; } #div2{ background-color: red; } #div3{ background-color: #00ff00; } .my{ visibility: hidden; } Output 7.html using inline block
7.css div{ width: 100px; height : 100px; margin-right: 100px; display: inline-block; } #div1{ background-color: rgba(0,0,255,.25); } #div2{ background-color: rgba(0,0,255,.40); } #div3{ background-color: rgba(0,0,255,1); } Output 7.html Question 1

this is a color full box collection

7.css /* body{ background-image: url(th.jpeg); background-size:100%; } */ header{ #navar{ color: white; height: 50px; background-color: #000000; #logo{ color: orange; font-size: 25px; } } } button{ background-color: yellow; } .a{ padding-right: 100px; } #div1{ width: 60px; height: 60px; background-color: rgba(25,50,100,1); } #div2{ width: 60px; height: 60px; background-color: rgba(255,0,255,1); } #div3{ width: 60px; height: 60px; background-color: rgba(255,255,0,1); } #heading{ font-size: 20px; margin: 50px,0px,0px,50xp; } footer{ color: white; height: 50px; background-color: black; } Output Q2
div1
div1
div1
div1
div1
div1
7.css div{ width: 50px; height: 50px; border:8px solid red; border-radius: 5px; } Output 7.html Q2
div1
div1
div1
div1
div1
7.css #div1{ background-color: rgba(255,0,255,.5); } #div2{ background-color: rgba(0,255,255,.5); } #div3{ background-color: rgba(255,255,0,.5); } #div4{ background-color: rgba(1, 255, 192, 0.5); } #div5{ background-color: rgba(25,40,25,.5); } Ouput Level 3 Document
Output 7.Html
div1
div2
y.css #div1{ width: 50px; height: 50px; background-color : #0000ff; font-size: 10px; } #div2{ width: 100%; height: 50%; background-color: #ff0000; font-size: 2em;/*font size double ho jata haia or 3e tp tripple ho jata hai*/ } Output 7.html
div1
div2
y.css #div1{ width: 50px; height: 50px; background-color : #0000ff; font-size: 10px; } #div2{ width: 5em;/*20*5=100px;*/ height: 50%; background-color: #ff0000; font-size: 2em;/*20px*/ } Output