Scribd
Carica
7 visualizzazioni

Unit-2 - CSS

This css

Caricato da

kunkipudibharathkumar
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
7 visualizzazioni

Unit-2 - CSS

This css

Caricato da

kunkipudibharathkumar
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 17

1.

Explain form creation in HTML with form elements, input types


and attributes with example.

HTML Forms
An HTML form is used to collect user input. The user input is most often
sent to a server for processing.
The HTML <form> element is used to create an HTML form
Form contains different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

An <input> can be displayed many types of form elements, depending on


the type attribute.

Here are some examples:

Type Description

<input Displays a single-line text input field


type="textbox">

<input Displays a radio button (for selecting one of many


type="radio"> choices)

<input Displays a checkbox (for selecting zero or more


type="checkbox"> of many choices)

<input Displays a clickable button


type="button">
<input Defines a password field
type=”password“>

<input Validates that the input is a valid email address.


type=”email“>

<input Allows the user to enter a number. You can


type=”number“> specify min, max, and step attributes for range.

<input Allows the user to select a date from a calendar.


type=”date“>

<input Allows the user to select a time.


type=”time“>

<input Allows the user to select a file to upload.


type=”file“>

The <select> element defines a drop-down list. The <option> elements


defines an option that can be selected.

Example:

<html>

<head>

<title> user form</title>

</head>
<body>

<form action=”welcome.php” target =”_self” method =”POST”>

User name: <input type="textbox" name="uname"><br/>

Gender : <input type = “radio” name=”gender”/> Male

<input type = “radio” name=”gender”/> Female <br/>

Qualification : <input type =”checkbox” name=”qul”/>SSC

<input type =”checkbox” name=”qul”/>Inter

<input type =”checkbox” name=”qul”/>Degree <br/>

District : <select>

<option> Srikakulam</option>

<option> Vizag</option>

<option> Krishna</option>

</select> <br/>

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

<input type="button" value="Cancel">


</form>

</body>

</html>

2. Explain working with HTML API's (Geo location, Drag/drop,


local storage, HTML SSE).
HTML APPs:
1) Geolocation API:
The HTML Geolocation is used to get the real time geographical
position of a user, only if they allow it.

Syntax:
navigator.geolocation.getCurrentPosition()
2) Drag and Drop API

In HTML, any element can be dragged and dropped.

Drag and drop is a very common feature. It is when you "grab" an


object and drag it to a different location.

Ex:
function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

3) localStorage Object

The localStorage object stores the data with no expiration date. The data
will not be deleted when the browser is closed, and will be available the
next day, week, or year.

Example

localStorage.setItem("lastname", "Smith");
4. SSE API

Server-Sent Events (SSE) allow a web page to get updates from a server.
This was also possible before, but the web page would have to ask if any
updates were available. With server-sent events, the updates come
automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds,


sport results, etc.

3. explain working with HTML graphics with example.


HTML Graphics

The HTML <svg> element allows vector-based graphics in HTML:

SVG stands for Scalable Vector Graphics.


<html>
<body>
<h1>My first SVG</h1>
<svg>
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="8"
fill="yellow" />
</svg>
</body>
</html>

OUTPUT:

4.explain working with media (video, audio, plugin-INS,


YouTube) in HTML with example.
HTML media
Multimedia on the web is sound, music, videos, movies, and animations.
Multimedia comes in many different formats. It can be almost anything
you can hear or see, like images, music, sound, videos, records, films,
animations, and more.
HTML Video
The HTML <video> is used to show a video on a web page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> </video>
The controls attribute adds video controls, like play, pause, and volume.
To start a video automatically, use the autoplay attribute.
HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
<audio controls>
<source src="horse.mp3" type="audio/mpeg"> </audio>
The controls attribute adds audio controls, like play, pause, and volume.
To start a audio automatically, use the autoplay attribute.
HTML Plug-ins

Plug-ins are computer programs that extend the standard functionality of


the browser.

Plug-ins were designed to be used for many different purposes

 To run Java applets


 To display Flash movies
 To display maps
 To scan for viruses …etc

The <object> element defines an embedded object within an HTML


document.

It was designed to embed plug-ins in web pages

Example : <object data="audi.jpeg"></object>


HTML YouTube

The easiest way to play videos in HTML, is to use YouTube. Converting


videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.
To play your video on a web page, do the following:

 Upload the video to YouTube


 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the
player

Example :
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

5. Explain working HTML along CSS with example.

CSS Introduction :

o CSS stands for Cascading Style Sheet.


o You can add new looks to your old HTML documents.

CSS Syntax :

A CSS rule set contains a selector and a declaration block.

Selector { Property1: value1; Property2: value2; ..........; }

Selector: Selector indicates the HTML element you want to style. It could be any
tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For example,

color: yellow;

font-size: 10px;

Each declaration contains a property name and value, separated by a colon.

Colours :
 Color : this property sets text colour.
 Background-color : it sets background colour.
CSS Background:

CSS background property is used to define the background effects on element.

 The background-color property is used to set the background colour


of an element.
 The background-image property is used to set the background image
of an element.
 The background-repeat property is used to control the repetition of
an image in the background.
 The background-position property is used to control the position of
an image in the background.
 The background-attachment property is used to control the scrolling
of an image in the background.
 The background property is used as a shorthand to specify a number
of other background properties.
Example :
background-color: lightblue;
background-image: url("bgdesert.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
CSS border :
The border-style property specifies what kind of border to display. (dotted/
dashed/solid/double/hidden ..etc)

The border-width property specifies the width of the four borders.

The border-color property is used to set the colour of the four borders.

The border-radius property is used to add rounded borders to an element.

Example :
border-style: dotted;
border-width: 5px;
border-color: green;
border-radius: 5px;

CSS margins :
The CSS margin properties are used to create space around elements,
outside of any defined borders.

CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left

Example :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

CSS padding :

The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an element:

 padding-top
 padding-right
 padding-bottom
 padding-left

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

CSS Font:

CSS Font property is used to control the look of texts.

 The font-style property is used to make a font italic or oblique.


 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or
light a font appears.
 The font-size property is used to increase or decrease the size of a font.

Example :
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-variant: small-caps;
CSS – Text :
 The color property is used to set the colour of a text.
 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between
the letters that make up a word.
 The word-spacing property is used to add or subtract space between
the words of a sentence.
 The text-shadow property adds shadow to text.
Example:
color: blue;
text-decoration-line: line-through;
letter-spacing: 5px;
word-spacing: 10px;
text-shadow: 2px 2px;
CSS Lists :

There are various CSS properties that can be used to control lists.

o list-style-type: This property is responsible for controlling the appearance


and shape of the marker.
o list-style-image: It sets an image for the marker instead of the number or a
bullet point.

Example:
.One{
list-style-image: url(‘ img.png ’);
}
</style>

Overflow :

The CSS overflow property controls what happens to content that is too big to fit into
an area. The overflow property specifies whether to clip the content or to add
scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

 visible - Default. The overflow is not clipped. The content renders outside the
element's box
 hidden - The overflow is clipped, and the rest of the content will be invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest of the
content
 auto - Similar to scroll, but it adds scrollbars only when necessary

div {
overflow: scroll;
}

CSS Opacity
The opacity property specifies the opacity/transparency of an element.
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img src="forest.jpg" width="170" height="100">
</body>
</html>

Explain CSS Selectors with example .

CSS Selector :

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.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

p{
text-align: center;
color: blue;
}
2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific


element. An id is always unique within the page so it is chosen to select a single,
unique element.

It is written with the hash character (#), followed by the id of the element.

#One {
text-align: center;
color: blue;
}

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used
with a period character( . - full stop symbol) followed by the class name.

.Two {
text-align: center;
color: blue;
}

4) CSS Universal Selector

The universal selector is used as a wildcard( * ) character. It selects all the elements
on the pages.

AD* {
color: green;
font-size: 20px;
}
5) CSS Group Selector

The grouping selector is used to select all the elements with the same style
definitions.

Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }

Explain types of CSS with example .


CSS Types

CSS is added to HTML pages to format the document according to information in the
style sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

1) Inline CSS

We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. If you
want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Example:

<h2 style="color:red;margin-
left:40px;">Inline CSS is applied on this heading.</h2>
2) Internal CSS :
The internal style sheet is used to add a unique style for a single document. It is
defined in <head> section of the HTML page inside the <style> tag.

<html>
<head>
<style>
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
</body>
</html>
3) External CSS

The external style sheet is generally used when you want to make changes on
multiple pages. It is ideal for this condition because it facilitates you to change the
look of the entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the
head section.

Example:

1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
3. </head>

The external style sheet may be written in any text editor but must be saved with
.css extension.

File: mystyle.css

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

CSS Combinators
A combinator is something that explains the relationship between the selectors.
There are four different combinators in CSS:
1.descendant combinator (space)
2.child combinator (>)
3.adjacent sibling combinator (+)
4.general sibling combinator (~)

Descendant Combinators
The descendant selector matches all elements that are descendants of a specified
element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}

Child Combinators (>)


The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div>
element:
div > p {
background-color: yellow;
}

Adjacent Sibling Combinators (+)


The adjacent sibling selector is used to select an element that is directly after
another specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
The following example selects the first <p> element that are placed immediately
after <div> elements:
div + p {
background-color: yellow;
}

General Sibling Combinators (~)


The general sibling selector selects all elements that are next siblings of a specified
element.
The following example selects all <p> elements that are next siblings of <div>
elements:
div ~ p {
background-color: yellow;
}

pseudo-class:
A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user mouses over it


 Style visited and unvisited links differently

Syntax:
selector:pseudo-class {
property: value;
}

Example :
<html>
<head>
<style>
a:hover {
color: pink;
font-size: 22px;
}
</style>
</head>
<body>
<a href="page1.html">page1</a>
</body>
</html>

pseudo-element:

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

 Style the first letter, or line, of an element


 Insert content before, or after, the content of an element

Syntax:
selector::pseudo-element {
property: value;
}

1. ::first-line pseudo-element is used to add a special style to the first


line of a text.
2. ::first-letter pseudo-element is used to add a special style to the
first letter of a text.
3. ::before pseudo-element can be used to insert some content before the
content of an element.
4. ::after pseudo-element can be used to insert some content after the
content of an element.

Example:
p::first-letter
{
color: red;
}
::selection {
color: red;
background: yellow;
}

Potrebbero piacerti anche