Scribd
Upload
17 views9 pages

p16065 File

The document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in web design, syntax, and methods of insertion (external, internal, and inline). It details various CSS selectors and includes practical examples of HTML code with and without CSS. Additionally, it outlines practical exercises involving date and time display and JavaScript form validation.

Uploaded by

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

p16065 File

The document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in web design, syntax, and methods of insertion (external, internal, and inline). It details various CSS selectors and includes practical examples of HTML code with and without CSS. Additionally, it outlines practical exercises involving date and time display and JavaScript form validation.

Uploaded by

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

AWP(3161611) 221240116065

Practical-1

AIM: Introduction to CSS.

 Introduction to CSS :

- Cascading Style Sheets, referred to as CSS, is a simple design language intended to


simplify the process of making web pages presentable.
- CSS defines layout of HTML documents. For example, CSS covers Fonts, colors,
margins, lines, height, width, background images, advanced positions and many
other things.
- CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files.

 CSS Syntax :

- The selector points to the HTML element you want to style.


- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a CSS property name and a value, separated by a colon.
- Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.

 Three Ways to Insert CSS :


There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS

SPCE(IT) 1
AWP(3161611) 221240116065

External CSS
- With an external style sheet, you can change the look of an entire website by
changing just one file!
- Each HTML page must include a reference to the external style sheet file
inside the element, inside the head section.

Internal CSS
- An internal style sheet may be used if one single HTML page has a unique
style.
- The internal style is defined inside the <style>element, inside the head
section.

Inline CSS
- An inline style may be used to apply a unique style for a single element.
- To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

 CSS selectors :

- Css selectors are used to select the content you want to style. Selectors are the part
of CSS rule set. CSS selectors select HTML elements according to its id, class,
type, attribute etc.

There are several different types of selectors in CSS.

CSS Id Selector
- The id selector uses the id attribute of an HTML element to select a specific
element.
- The id of an element is unique within a page, so the id selector is used to
select one unique element!
- To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
- Example :
#para1 {
text-align: center;
color: red;
}

SPCE(IT) 2
AWP(3161611) 221240116065

CSS Class Selector


- The class selector selects HTML elements with a specific class attribute.
- To select elements with a specific class, write a period (.) character,
followed by the class name.
- Example :
.center {
text-align: center;
color: red; }

CSS Universal Selector


- The universal selector (*) selects all HTML elements on the page.
- Example :
*{
text-align: center
color: blue; }

CSS Group Selector


- The grouping selector selects all the HTML elements with the same style
definitions.
- It will be better to group the selectors, to minimize the code.
- To group selectors, separate each selector with a comma.
- Example :
h1,h2,p {
text-align: center;
color: red; }

 Program without CSS :


<html>
<head>
<title>Practical-1</title>
</head>
<body>
<h1><p>Introduction of css</p></h1>
<h2>what is css?</h2>
<h2>css syntex</h2>
<h2>types of css</h2>
<h2>css selectors</h2>
</body>
</html>

SPCE(IT) 3
AWP(3161611) 221240116065

OUTPUT :

 Program with CSS :

<html>
<head>
<title>Practical-1</title>
<style>
body{
background-color:black;
}
h1,h2,p{
text-align:center;
color:white;
}
</style>
</head>
<body>
<h1><p>Introduction of css</p></h1>
<h2>what is css?</h2>
<h2>css syntex</h2>
<h2>Types of css</h2>
<h2>css selectors</h2>
</body>
</html>

SPCE(IT) 4
AWP(3161611) 221240116065

OUTPUT :

SPCE(IT) 5
AWP(3161611) 221240116065

Practical – 2

AIM: Write a program to display current date and time using CSS.

<html>
<head>
<title>Date and Time</title></br></br>
</head>
<style>
Body{
background-color :white;
justify-content: center;
}
</style>
<body>
<div class="Example">Date and Time</div></br>
<button type ="button"
onclick="document.getElementById('demo').innerHTML=
Date();">

click me to display date and time


</button></br></br>
<p id="demo" class="Example">
</body>
</html>

OUTPUT :

SPCE(IT) 6
AWP(3161611) 221240116065

Practical – 3

AIM : Write a program to perform JavaScript form validation.

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validate() {
var name = document.f1.name.value;
var password = document.f1.password.value;
var status = true;
// Name validation
if (name.length < 1) {
document.getElementById("nameloc").innerHTML =
'<img src="unchecked.png" style="width:15px; height:15px;"/>Please enter
your name';
status = false;
} else {
document.getElementById("nameloc").innerHTML =
'<img src="checked.png" style="width:15px; height:15px;"/>';
}
// Password validation
if (password.length < 6) {
document.getElementById("passwordloc").innerHTML =
'<img src="unchecked.png" style="width:15px; height:15px;"/> Password
must be at least 6 characters';
status = false;
} else {
document.getElementById("passwordloc").innerHTML =
'<img src="checked.png" style="width:15px; height:15px;"/>';
}
return status; }
</script>
</head>

SPCE(IT) 7
AWP(3161611) 221240116065

<body>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr>
<td>Enter your name :</td>
<td>
<input type="text" name="name"/>
<span id="nameloc"></span>
</td></tr>
<tr>
<td>Enter your password :</td>
<td>
<input type="password" name="password"/>
<span id="passwordloc"></span>
</td> </tr>
<tr><td colspan="2">
<input type="submit" value="Register"/>
</td></tr>
</table>
</form>
</body>
</html>

OUTPUT :

SPCE(IT) 8
AWP(3161611) 221240116065

SPCE(IT) 9

You might also like