Scribd
Upload
37 views7 pages

Css Lab

The document discusses various HTML form elements and CSS properties including text fields, radio buttons, checkboxes, div, fieldset, legend, lists and navigation bars. It provides examples of how to implement these elements in HTML and style them with CSS.

Uploaded by

Gebremaryam Abebe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
37 views7 pages

Css Lab

The document discusses various HTML form elements and CSS properties including text fields, radio buttons, checkboxes, div, fieldset, legend, lists and navigation bars. It provides examples of how to implement these elements in HTML and style them with CSS.

Uploaded by

Gebremaryam Abebe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 7

universal selectir

* { color: #000000; }

ul em {color: #000000;}

.black {color: #000000; }

#black {color: #000000; }

h1#black { color: #000000; }

Add CSS to a Webpage

<style type = "text/css" media = "all">

body { background-color: linen;}

</style>

<h1 style = "color:#36C;">

<link type = "text/css" href = "..." media = "..." />

/* This is a single-line comment */

HTML form

<html>

<body>

<h2>Text input fields</h2>

<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe">

</form>

</body>

</html>

HTML form radio button Check box and Div element


<html>

<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

<label for="javascript">JavaScript</label>

<P>this is checkbox</P>

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label><br><br>

<input type="submit" value="Submit">

</form>

<style>div { background-color: #FFF4A3;}</style>

<body>

<h1>HTML DIV Example</h1>

Lorem Ipsum <div>I am a div</div> dolor sitamet.

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>
</html>

</body>

</html>

HTML <fieldset> and <legend>Tag

<html>

<head>

<style>

fieldset { background-color: #eeeeee;}

legend { background-color: gray; color: white; padding: 5px 10px;}

input { margin: 5px;}

</style>

</head>

<body>

<h1>The fieldset element + CSS</h1>

<form action="/action_page.php">

<fieldset>

<legend>Personal-info:</legend>

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<label for="lname">Last name:</label>

<input type="text" id="lname" name="lname"><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br><br>

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday"><br><br>

<input type="submit" value="Submit">


</fieldset>

</form>

</body>

</html>

list in css and html

<html>

<body>

<h2>CSS Lists - Controlled Counting</h2>

<h3>start attribute</h3>

<ol start="4">

<li>Java.</li>

<li>HTML.</li>

<li>CSS.</li>

<li>React.</li>

</ol>

<h3>reverse attribute</h3>

<ol reversed>

<li>Java.</li>

<li>HTML.</li>

<li>CSS.</li>

<li>React.</li>

</ol>

</body>

</html>

Navigation bar

<html>
<head>

<style>

ul {

background-color: #28bf17;

overflow: hidden;

list-style-type: none;

margin: 0;

padding: 0;

li {

float: left;

li a {

display: block;color: #f2f2f2;text-align: center;padding: 10px;text-decoration:

none;font-size: 17px;}

li a:hover {background-color: #dd9ede;color: black;}

.active-link {background-color: #f53319;color: white;}

</style>

</head>

<body>

<ul>

<li><a href="#" class="active-link">Tutorialspoint</a></li>

<li><a href="#">Home</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">eBook</a></li>
</ul>

<h1>Welcome to TutorialsPoint</h1>

<h3>Simple Easy Learning at your fingertips</h3>

</body>

</html>

vertical nav bar

<head>

<style>

ul {background-color: #28bf17;list-style-type: none;margin: 0;padding: 0;width:

200px;}

li {text-align: center;}

li a {display: block;color: #f2f2f2;text-align: center;padding: 10px;text-decoration:

none;font-size: 17px;}

li a:hover {background-color: #dd9ede;color: black;}

.active-link {background-color: #f53319;color: white;}

</style>

</head>

<body>

<ul>

<li><a href="#" class="active-link">Tutorialspoint</a></li>

<li><a href="#">Home</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">eBook</a></li>

</ul>

</body>

You might also like