Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
714 views

HTML - CSS - Input Forms 2 PDF

This document provides an overview of HTML and CSS concepts. It discusses what CSS is and how it solves formatting problems in HTML. It describes CSS syntax and different CSS selectors like element, class, and grouping selectors. It also covers CSS properties for fonts, text, color, background, borders, margins, padding and more. Finally, it discusses HTML forms and common input elements like text, password, radio buttons and others.

Uploaded by

mz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
714 views

HTML - CSS - Input Forms 2 PDF

This document provides an overview of HTML and CSS concepts. It discusses what CSS is and how it solves formatting problems in HTML. It describes CSS syntax and different CSS selectors like element, class, and grouping selectors. It also covers CSS properties for fonts, text, color, background, borders, margins, padding and more. Finally, it discusses HTML forms and common input elements like text, password, radio buttons and others.

Uploaded by

mz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

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>
<form action="home.html">
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>
<form action="home.html">
<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

You might also like