HTML - CSS - Input Forms PDF

Web Design and Online
Journalism
Lecture 06 - HTML-CSS
CENTRE OF MEDIA STUDIES, ART AND DESIGN
SHIZA NISAR
What is CSS
 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
 External stylesheets are stored in CSS files

CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting
a web page!
HTML was created to describe the content of a web page,

like:
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
CSS Solved a Big Problem
 To solve this problem, the World Wide Web Consortium (W3C) created CSS.
 CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!

 The style definitions are normally saved in external .css files.
 With an external stylesheet file, you can change the look of an entire website
by changing just one file!
CSS Syntax
 A CSS command consists of a selector and a declaration block:
 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.
 A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
The Element Selector
 The element selector selects elements based on the element name.
 You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a
red text color):
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
The Class Selector
 The class selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the name of the class.
 In the example below, all HTML elements with class="center" will be red and center-aligned:
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned

heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>
</body>
</html>
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 { text-align: center; color: red; }

h2 { text-align: center; color: red; }
p { text-align: center; color: red; }
It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
 Comments are used to explain the code, /* Comments Example */
and may help when you edit the source
code at a later date.
p {
color: red;
 Comments are ignored by browsers. /* This is a single-line comment */
text-align: center;
}
 A CSS comment starts with /* and ends
with */. Comments can also span /* This is
multiple lines: a multi-line
comment */
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
Inline style
Internal style sheet
External style sheet
Inline Style Sheet
 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.
 The example below shows how to change the color and the left margin of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Internal Style Sheet
 An internal style sheet <head>
may be used if one
single page has a unique <style>
style. body {
background-color: red;
}
 Internal styles are
defined within the h1 {
color: maroon;
<style> element, inside margin-left: 40px;
the <head> section of an }
HTML page: </style>
</head>
Example <body>
</body>
External Style Sheet
 With an external style sheet, you can change the look of an entire website by changing just
one file!
 Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
External Style Sheet
 An external style sheet can be written in any text editor.
 The file should not contain any html tags. The style sheet file must be saved with a .css
extension.
 Here is how the "myStyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Warning…
 On the next slides, we will study few of the CSS tags with examples
font-family
 The font-family property specifies the font for an element.
 The name of a font-family, like "times", "courier", "arial", etc.
Note: Separate each value with a comma.

font-size
font-style
font-weight
color
 The color
property
specifies the
color of text.
 Use a
background
color and a text
color that
makes the text
easy to read.
opacity
The opacity
property sets the
opacity level for
an element.
The opacity-level
describes the
transparency-
level, where 1 is
not transparent at
all, 0.5 is 50% see-
through, and 0 is
completely
transparent.
Background-color
background-size
border-color
border-style
Values border-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|ini
tial|inherit;
border-width
margin
The margin shorthand property sets all the margin properties in one declaration. This
property can have from one to four values.
Examples:
margin:10px 5px 15px 20px;
 top margin is 10px
 right margin is 5px
 bottom margin is 15px
 left margin is 20px
padding
The padding shorthand property sets all the padding properties in one declaration. This
property can have from one to four values.
Examples:
padding:10px 5px 15px 20px;
 top padding is 10px
 right padding is 5px
 bottom padding is 15px
 left padding is 20px
text-align
The text-align property specifies the
horizontal alignment of text in an
element.
text-transform
The text-transform property controls the capitalization of text.
word-wrap
The word-wrap property allows long words to be able to be broken and wrap onto the
next line.
word-wrap: normal|break-word|initial;
text-decoration
text-decoration: none|underline|overline|line-through|initial;
text-decoration-color
text-decoration-line
text-decoration-line: none|underline|overline|line-through|initial;
text-decoration-style
text-decoration-style:
solid|double|dotted|dashed|wavy|initial
text-decoration-style: solid|double|dotted|dashed|wavy|initial;
text-shadow
text-shadow: h-shadow v-shadow color;

Table Properties
border-collapse
border-collapse: separate|collapse|initial;
caption-side
caption-side: top|bottom|initial;
table-layout
table-layout: auto|fixed|initial;
This is just a brief overview. To explore more css tags, visit following website.
http://www.w3schools.com/cssref/
END OF CSS SECTION

HTML Forms and Input
The <form> Element
The HTML tag <form> define a form that is used to collect user input
The <input> Element
 The <input> element is the most important form element.
 The <input> element can be displayed in several ways, depending on

the type attribute.
Examples
The <input> Element… Example
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field

is 20 characters.</p>
</body>
</html>
form... action attribute
 The action attribute defines the action to be performed when the form is submitted.
 Normally, the form data is sent to a web page on the server when the user clicks on the
submit button.
 In the example above, the form data is sent to a page on the server called "action_page.php".
This page contains a server-side script (not included in our course) that handles the form
data
action attribute example
sample.html
<html>
<body>
<form action="home.html">
First name: <input type="text" name="FirstName" /><br/>
Last name: <input type="text" name="LastName" /><br/>
<input type="submit" value="Click me!" />
</form>
</body>
</html>
home.html
<html>
<body>
<p>Thanks for </p>
<a href="Login.html">Click here to go back</a>
<br />
</body>
</html>
Few Controls (textbox, password, radio)
TEXT
password
checkbox
color
date
email
number
radio
Sample Page
<html>
<body>
<h2>Sample Input Forms</h2>
First name: <input type="text" name="FirstName" value="" />
<br><br>
Last name: <input type="text" name="LastName" value="" />
<br><br>
Password: <input type="password" name="password" value="" />
<br><br>
<input type="submit" value="Click me!" />
</form>
</body>
</html>
Sample Page output
Sample Page using table layout
<html>
<body>
<h2>Sample Input Forms</h2>
<table border=0>
<tr> <td>First name:</td>
<td><input type="text" name="FirstName" value="" /></td>
</tr><tr>
<td> Last name:</td>
<td><input type="text" name="LastName" value="" /></td>
</tr><tr>
<td>Password:</td>
<td> <input type="password" name="password" value="" /></td>
</tr><tr>
<td colspan="2" align="center"><input type="submit" value="Click me!" /></td>
</tr>
</table>
</form>
</body>
</html>
Sample Page using table layout output
For more input types, visit following link:
http://www.w3schools.com/tags/att_input_type.asp
END OF LECTURE

HTML - CSS - Input Forms PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML - CSS - Input Forms PDF

Caricato da

Copyright:

Formati disponibili

Web Design and Online

 CSS describes how HTML elements are to be displayed on screen, paper, or

 External stylesheets are stored in CSS files

HTML was created to describe the content of a web page,

 CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

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

 The declaration block contains one or more declarations separated by semicolons.

<h1 class="center">Red and center-aligned

h1 { text-align: center; color: red; }

It will be better to group the selectors, to minimize the code.

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Note: Separate each value with a comma.

text-shadow: h-shadow v-shadow color;

END OF CSS SECTION

 The <input> element can be displayed in several ways, depending on

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text input field

Potrebbero piacerti anche