Information Technology 12th Science: ID and Class

Some other useful attributes used with <input> are-

1. id : This is used to identify the html element uniquely through the document object model.

2. class: It is used to apply CSS style to the individual input element

Chack The Different Between Id and Class Bellow link

👉 https://youtu.be/huzlORMo7ZI

-----------------------------------------------

Examples :

<!DOCTYPE html> <html>

<head>

<title>Forms in html 5 </title></head>

<body>

Date of Inception: <input type="date" name="bday"><br><br> Office time: <input type="time" name="usr_time"><br><br>

Number of years completed(between 1 and 100): <input type="number" min="1" max="100"><br><br>

Office phone number: <input type="tel" name="phone" pattern="[0-9]{2}-[0-9]

{10}" required><br><br> Add your homepage:

</form>

</body>

</html>

Do it Yourself

1. Use multiple attribute in <input>

2. Use pattern attribute in <input> and see the Outp <meta> tag

check the what is meta tag in below link 👇 https://youtu.be/o__D5WDltCA

The meta tag is a tag in html that describes some aspects of contents of a webpage. The HTML <meta> tag is used by search engines to search information

that is provided with the webpage. This is empty tag (singular tag) which carries information within its attributes. The <meta> tag is placed between the <head>and

</head> tags. Metadata will not be displayed on the webpage.

Attribute of <meta> tag

Attribute	Values	Description
Name	The value of the name attribute can be related to any of the following- i) Author ii) Description iii) Keywords iv) copyright e.g. <meta name = "author" >	Specifies the Name of the meta- data like the author, keywords or description.
Content	It can have any textual matter related to the name as in eg. i. <meta name = "author" content = "Balbharti"> ii. <meta name = "description" content = "Advance web de- signing"> iii. <meta name = "keywords" content = "html5, learn html5, list in html 5">	Here content of author is balbharati. Here the value for content attribute specifies name of the topic advance web designing. Here the values for content attribute are given as keywords like html5 , learn html5 etc.
Charset	UTF-8, Big5 e.g <meta charset="UTF-8"> <meta charset="Big5">	Specifies the character encoding used by the document, This is called a character encoding declaration. UTF-8 For Indiancharacters Big5 – for Chinese characters
http-equiv	refresh , set-cookie, content-type, expires, e.g. <meta http- equiv="refresh"content="5"> <meta http-equiv="set-cookies"> <meta http-equiv="content- type"content="text/ html"charset="Big5"> <meta http-equiv="expires" content="userid=pqr; expires=Wednesday, 8-feb-2018 23:59:59 GMT;">	Used for http response message headers. Here the page will get refresh after every 5 seconds. The browser sends the cookies back to the server. Specifies the character encoding for the document Here page session will get expire at specified date and time.

Example:

<!DOCTYPE html>

<html>

<head>

<title>meta tag examples</title>

= " copyright Balbharti All right Reserve">

</head>

<body>

<p> Welcome to HTML5

</p>

</body>

</html>

Cascading Style Sheets in HTML5

CSS stands for Cascading Style Sheets. 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. CSS allows you to control the look and feel of several pages by changing a single source.

Check the below link for Introduction to CSS

➡️ https://youtu.be/oLSxW1YcTr8

CSS Syntax

— A CSS rule set contains

Ø a selector and

Ø a declaration block.

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

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

1. color : yellow;

2. font-size :11 px;

Each declaration contains a property name and value, separated by a colon. Property : A Property is a type of

attribute of HTML element. It could be

color, border etc.

Value : Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.

Selector{Property1: value1; Property2: value2}

Types of CSS

There are three methods of implementing styling information to an HTML document.

1. Inline CSS

2. Embedded stylesheet or Internal CSS

3. External CSS

1. Inline stylesheet :

It uses the style attribute in the HTML start

tag.

Inline CSS is used to apply CSS on a single line or element.

For example :

<p style="color:blue">Hello CSS</p>

1. Embedded stylesheet or internal CSS :

This is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html.

For example :
<!DOCTYPE html>
<html>
<head>

<style> h1{color:Red;}
</style></head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.
</p>
</body>
</html>

CSS Properties
see the bellow link for the properties of css
👉https://youtu.be/oLSxW1YcTr8

1. External stylesheet : The external style sheet is generally used when you want to make changes on multiple pages. It facilitates to change the look of the entire web site by changing just one file. It uses the <link> tag on every page and the <link> tag should be put inside the head section.
An external style sheet can be written in any text editor, and must be saved with a .css extension. The external css file should not contain any HTML tags.
Here is how the "style.css" file looks like:

Style.css

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body></html>

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 unique  element.  It  is  written  with  the hash  character(#),  followed  by  the  id name.

<!DOCTYPE html>
<html>
<head>
<style>
#para1{text-align: center; color: blue}
</style>
</head>
<body>
<p id="para1">Hello Students</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
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. The Class selector is used when you want to change a group of elements within your HTML page.
The  class  name  should  not  start with number.

Let's take an example with a class "intro".
<!DOCTYPE html>
<html>
<head>
<style>
.intro{text-align:center;color:blue}
</style></head>
<body>
<h1 class="intro">This heading is blue and center-aligned.</h1>
<p   class="intro">This     paragraph   is blue and center-aligned.</p>
</body>
</html>

Class Selector for specific element

To specify only one specific HTML element should be affected then you should use the element name with class selector.

Let's see an example :

<!DOCTYPE html>

<html>

<head>

<style>

p.intro {text-align: center;color: blue}

</style>

</head>

<body>

<h1 class="intro">This heading is not affected</h1>

<p class="intro">This paragraph is blue and center-aligned.</p>

</body>

</html>

Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the Webpages.

Group Selector

The grouping selector is used to select all the elements with the same style definitions. It is used to minimize the code. Commas are used to separate each selector in grouping.

Let's see the CSS code without group selector.

h1{ text-align:center;color:blue} h2{ text-align:center;color:blue} p {text-align:center;color:blue}

As you can see, you need to define CSS properties for all the elements. It can be grouped as-

h1,h2,p{ text-align:center;color:blue}

Positioning in CSS

CSS helps to position the HTML elements. The position property is used to set position for an element. The element can be positioned using the top, bottom, left and right properties.

Syntax : Selector{position:value;top:value; left:value:bottom:value;right:value}

Where values in positions are fixed, absolute, relative and values of top, bottom, left, right are in pixels

There are four types of positioning in CSS

1. Static Positioning : This is a by- default position for HTML elements. It is not affected by the top, bottom, left and right properties.

2. Fixed Positioning : This property helps to put the text fixed on the browser. The FIXED property forces an element into a fixed position relative to the browser window. The fixed element will not move, even when the page is scrolled.

3. Relative Positioning : The relative positioning property is used to set the element relative to its normal position.

4. Absolute Positioning : This property sets an element in a specific location and it is not affected by the flow of the page. This property positions the element at the specified coordinates relative to your screen top-left corner.

In above output the Level 1 headings with class=“first"have a relative position 10 pixels above and 10 pixels to the right of it’s original position.

All level 2 headings will be positioned 100 pixels from the left of the browser window and 150 pixels from the top of the browser window.

Float Property

Float is a CSS property written in CSS file or directly in the style of an element. The float property defines the flow of content.

Following are the types of floating properties :

1. float : left : This keeps the element float on left side of the container

2. float : right : This keeps the element float on right side of container

3. float : none : This is default property

i.e. this shows the element as it is.

Display property

The Display property in CSS defines how the components (div, hyperlink, heading, etc) are going to be placed on the web page. It specifies how the element is displayed. As the name suggests, this property is used to define the display of different parts of a web page.

Syntax :

Display : value;

Where values are :

Inline : It is used to display an element as an inline element.

Block : It is used to display an element as an block element. It starts on a new line, and takes up the whole width of the browser window.

Block-inline : This value is very similar to inline element but the difference is that you are able to set the width and height.

None : The element is completely removed.

Let's see an example

<!DOCTYPE html>

<html>

<head>

<style> p {

display: inline;

}

</style>

</head>

<body>

<p>welcome to balbharti</p>

<p>Javascript</p>

<p>CSS</p></body></ht

Ordered list or numbered list

development.</h2></p></header>

<nav>The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.<br>

<a href="/">http://www.w3schools.com</a><br>

<a href="http://www.ebalbharati.in">Balbharti website</a><br></nav>

<aside>

<h1>Other education based websites of State</h1>

<a href="http://mahahsscboard.ac.in">State Board website</a><br>

<a href="http://unipune.ac.in">Pune university website</a><br>

</aside>

<h1>Impressive Web Designing</h1>

<p>The aside element is for content

that is tangentially related to the content around it, and is typically useful for marking up sidebars.</p>

</section>

<h1>Articles on:Article tag</h1>

</section>

<p>The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles,

Thursday, July 2, 2020

Information about CSS

Some other useful attributes used with <input> are-

Examples :

Attribute of <meta> tag

CSS Syntax

Types of CSS

1. Inline CSS

For example :

For example :
<!DOCTYPE html>
<html>
<head>

<style> h1{color:Red;}
</style></head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.
</p>
</body>
</html>

CSS Properties
see the bellow link for the properties of css
👉https://youtu.be/oLSxW1YcTr8

Style.css

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body></html>

Class Selector for specific element

To specify only one specific HTML element should be affected then you should use the element name with class selector.

Let's see an example :

There are four types of positioning in CSS

Float Property

Syntax :

Let's see an example

<!DOCTYPE html>