CSS

CSS

Fill in the blanks

1.CSS stands for Cascade Style Sheet

2.Write a syntax for external style sheet <link rel="stylesheet" type="text/css" href="sample.css">

3.Write a element for changing background color background-color

4.Write a attribute for CSS inline style <style>

5.Write text bold property font-weight : bold

6.Negative values allowed in padding property [T/F]. False

7.Write a property to draw a line around the elements outside the border? Outline

8.Write a CSS property of shadow to text text-shadow

9.Write a tag to embed css in html page? <style>

10.Which of the CSS selector is used to specify a rule to bind a particular unique element? id

11.Write a extension for CSS .CSS

12.Write a property for table border in CSS border

13.Write a property to align the text in a table text-align

14.How many ways CSS can be written 3.

15.Write a element to specify I'd in CSS #

16.Write a element to specify class in CSS .

17.Write a comment in CSS /* */

18.Write a property for CSS Transparency Opacity

19.Write a Controlling layout CSS Property display

20.Write a different type of gradient linear gradient,Conic & Radial gradient

21.Write a property for font element font-family

22.Write a property for CSS mouse over hover

23.Write a CSS property for center an element text-align:center

24.Write a CSS property is used to specify the space between lines? line-height

25. id selector are used to specify a rule to bind to a particular unique element

Answer the following Question

(4 marks)

1.Write a code for button using CSS

<!DOCTYPE html>

<html>

<head>

<style>

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */

.button4 {background-color: #e7e7e7; color: black;} /* Gray */

.button5 {background-color: #555555;} /* Black */

</style>

</head>

<body>

<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

2.Create a Page for Color gradient using CSS

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background-color: red; /* For browsers that do not support gradients */

background-image: linear-gradient(red, yellow);

}

</style>

</head>

<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>

</html>

3.Create a Webpage for margin using CSS

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>

</html>

4.Write a code for CSS List

<!DOCTYPE html>

<html>

<head>

<style>

ul.a {

list-style-type: circle;

}

ul.b {

list-style-type: square;

}

ol.c {

list-style-type: upper-roman;

}

ol.d {

list-style-type: lower-alpha;

}

</style>

</head>

<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>

<ul class="a">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<ul class="b">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>Example of ordered lists:</p>

<ol class="c">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<ol class="d">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

</body>

</html>

5.Create a website CSS Border Color

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: red;

}

p.two {

border-style: solid;

border-color: green;

}

p.three {

border-style: dotted;

border-color: blue;

}

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

</html>

6.Write a code for CSS Text Color

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css"><style>

h1 {

color: orange;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>

</html>

7.Write CSS Color Names

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightgrey;

color: blue;

}

h1 {

background-color: black;

color: white;

}

div {

background-color: blue;

color: white;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This page has a grey background color and a blue text.</p>

<div>This is a div.</div>

</body>

</html>

Answer the following Question

(10 marks)

1.Create a Webpage for Page Redirect using href and id

Home.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Document</title>

</head>

<body>

<h2>Sample page</h2>

<a href="main.html#page">Main page</a>

<a href="main.html#para1">paragraph1</a>

<h3 style="color:orangered;background-color:yellowgreen;">Gradient Different Format</h3>

<div class="box">

</div>

<div class="box1">

</div>

<div class="box2">

</div>

<div class="box3">

</div>

</body>

</html>

Main.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Document1</title>

</head>

<body>

<h3 id="page">Main page</h3>

</body>

<p id="para">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate adipisci alias labore ad, autem perspiciatis voluptas eum ab iure soluta, et assumenda explicabo magni maxime, minus at. Beatae, earum repudiandae.</p>

<br>

<p id="para1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, excepturi aspernatur earum nulla nostrum optio maxime atque mollitia reprehenderit possimus, cupiditate hic neque quo. Minus praesentium illo saepe? Facere, distinctio.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, excepturi aspernatur earum nulla nostrum optio maxime atque mollitia reprehenderit possimus, cupiditate hic neque quo. Minus praesentium illo saepe? Facere, distinctio.

</html>

TraineeTech

C Language

CPP

Python

Labels

No comments:

Post a Comment

Tally

Java

HTML

CSS

Popular

Tags

Blog Archive

C Language

C++

Links

Python

HTML

Tally

Java

CSS

Contact Us