Scribd
Upload
93 views

Web Programming Chapter II (HTML&CSS)

The document discusses HTML and CSS. It defines markup languages as languages used for formatting text and describes tags that specify formatting. It then discusses HTML in more detail, describing it as a markup language used to structure web pages and tell browsers how to display content. It provides details on HTML tags, elements, and basic document structure.

Uploaded by

Lukas
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
93 views

Web Programming Chapter II (HTML&CSS)

The document discusses HTML and CSS. It defines markup languages as languages used for formatting text and describes tags that specify formatting. It then discusses HTML in more detail, describing it as a markup language used to structure web pages and tell browsers how to display content. It provides details on HTML tags, elements, and basic document structure.

Uploaded by

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

Chapter -2

HTML & CSS


Markup languages
 Markup languages are designed for the processing,
definition and presentation of text.
 The language specifies code for formatting, both the layout and
style, within a text file.
 The code used to specify the formatting are called tags.
 A markup language is a set of tags and/or a set of rules for
creating tags that can be embedded in digital text to
provide additional information about the text in order to
facilitate automated processing of it, including editing and
formatting for display or printing.
 A markup language is a system for annotating a document
in a way that is syntactically distinguishable from the text.
2 Web Programming Dec 18, 2023
HyperText Markup Language (HTML)
 A markup language, i.e. it "mark-up" a text document with tags that
tell a Web browser how to structure it to display.
 Used to tell the browser what to do, and what props to use and
having series of tags that are integrated into a text document
 It is the most widely used language on Web to develop web pages.
 Allow to embed other scripting languages to manipulate design
layout, text and graphics
 HTML was created by Berners-Lee in late 1991 but "HTML 2.0"
was the first standard HTML specification which was published in
1995.
 Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and it
was published in 2012.
 HTML is not case sensitivity.
3 Web Programming Dec 18, 2023
Creating and Viewing an HTML document?
1.Use an text editor such as Notepad, to write the
document
2.Save the file as filename.html on a PC. This is called the
HTML Document Source

3.Open any browser Off-Line


4.Click on File, Open File and select the filename.html
document that you just created
5.Your HTML page should now appear just like any other
Web page in internet Explorer

4 Web Programming Dec 18, 2023


HTML Document
 Composed of several tags: the first tag turns the action
on, and the second turns it off .
 The second tag(off switch) starts with a forward slash
 Should have an .htm or .html file name extension
 Designed to describe hypertext, not paper
 Processed by browsers "on the fly"
 Can be created using
1. Text Editors
 Notepad, Notepad ++, WordPad
2. WYSIWYG Editors
 Micro Soft FrontPage
 Macromedia Dreamweaver
5  Others Web Programming Dec 18, 2023
HTML Tags
 HTML pages are tag-based documents
 These tags are enclosed within angle braces <Tag Name>.
 Except few tags, most of the tags have their corresponding
closing tags.
 For example, <html> has its closing tag </html> and <body> tag
has its closing tag </body> tag etc.
 Most have reasonable names or mnemonics

 Most can be modified by attributes/values

6 Web Programming Dec 18, 2023


HTML Document Structure
 The HTML document is divided into two major parts:
 HEAD: contains information about the document:
• Title of the page (which appears at the top of the browser window)
• Meta tags: used to describe the content (used by Search engines)
• JavaScript and Style sheets generally require statements in the
document Head
 BODY: Contains the actual content of the document
• This is the part that will be displayed in the browser
window

7 Web Programming Dec 18, 2023


HTML Document Structure (cont’d)
 General Structure of HTML files:
<html> Start Tag
<head>
<title> Web page title
</title>
</head>
<body>
statement
…….
</body>
</html>  End Tag
8 Web Programming Dec 18, 2023
HTML Document Structure (cont’d)-E.g
<!DOCTYPE html>
<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff”>
<H1>Hello World</H1>
</font>
</body>
</HTML>
9 Web Programming Dec 18, 2023
HTML Comments
 HTML comments are placed in between <!-- ... --> tags.
 So, any content placed with-in <!-- ... --> tags will be
treated as comment and will be completely ignored by the
browser.
<!DOCTYPE html>
 Example <html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
 Output: Document content goes here....
10 Web Programming Dec 18, 2023
HTML Elements
 An HTML element is defined by a starting tag.
 If the element contains other content, it ends with a
closing tag.
 Commonly have a start tag and end tag
 Start tag format: <tag_name>
 End tag format: </tag_name> [ note the / after < ]
 E.g. <strong>bold text</strong>
 Some tags may not have end tags
 E.g. <br>, <img>. <hr>
 Tags may have attributes
 <tag_name attr1=“val1” attr2=“val2” …>…</tag_name>
 E.g. <font face=“arial” size=“9”>Hello</font>
11 Web Programming Dec 18, 2023
Type of tags
 Metadata tags- <title> ,<base>, <link>,<meta>. <style>
 Section tags: <body>, <head> , <div> ,<frameset> ,<frame>,
<h1>..<h6> ,<p>
 Text-level appearance tags: <b>,<em> ,<strong>,
<del>,<sub>
 Grouping tags: <dl>, <dt>, <ol>, <li>, <select>, <option>
 Image tag: <img>
 Anchor tag: <a>
 Table tag: <table> ,<th> ,<tr> ,<td>
 Script tag: <script>
 Embeded content tags: <applet>,<object>
 Other tags: <br> ,<hr>
12 Web Programming Dec 18, 2023
Basic HTML Tags
 Html- everything in the document should be within
<html> &</html>
 Head- contains information which is not displayed in the
browser display area such as action-scripting (Javascript),
styles (CSS) and general information referenced in the
whole document
 may contain other tags in it
 format: <head>…</head>
 Title- sets the title of the web page to be displayed in the
browser’s title bar.
 found within the <head> tag.
 format: <title>…</title>
13 Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Body:
 contains the visible part of the web page
 displayed in the display area of the browser
 contains several other tags and content in it
 format: <body>…</body>
 attributes:
 bgcolor=“color”
 background=“img url”
 text=“text color”
 link=“link color”
 alink=“active link color”
 vlink=“visited link color”
 …
14 Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Headings:
 predefined formats for text presentation
 six heading formats defined in HTML: <h1> up to <h6>
 <h1> the largest font size
 <h6> the smallest font size
 Format:
 <h1>…</h1>
 E.g. <h2>a text in heading two</h2>
 Bold:
 makes a text appear in bold
 Format: <b>…</b> or <strong>…</strong>
 E.g. <b>a text in bold</b>
15 Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Italics
 makes a text appear in italics
 Format: <i>…</i> or <em>…</em>
 E.g. <i>a text in italics</i>
 Underline
 makes a text appear underlined
 Format: <u>…</u>
 E.g. <u>underlined text</u>
 Paragraph:
 defines a paragraph
 Format: <p>…</p>

16 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 E.g. <p>this is a paragraph of text. it has a new line before and
after it.</p>
 The browser inserts a new line before and after the text in the
paragraph tag.
 attribute:
 align=“alignment” {left, right, center, justify}

 line break:
 inserts a new line
 Format: <br>
 E.g. line one <br> line two <br> line three <br> line four

17 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Horizontal rule
 inserts a horizontal line
 Format: <hr>
 attributes:
 width=“width” {absolute: in pixels or relative: in %}
 noshade
 color=“color” {browser dependent}
 E.g. <hr width=“75%” noshade color=“#FF0000”>
 sub/sup
 define either a subscript or a superscript
 Format: <sub>…</sub> ; <sup>…</sup>
 E.g. X<sub>1</sub><sup>2</sup> + 2X<sub>3</sub>
18 Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Lists
 Unordered Lists (ul)
 define bulleted lists
 Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
 Atribute:
 type=“bullet type” {disc, circle, square}
 E.g.
<ul type=“square”>
<li>book</li><li>marker</li><li>chalk</li></ul>
19 Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Ordered Lists (ol)
 define numbered lists
 Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
 Atribute:
 type=“number type” {1, i, I, a, A}
 E.g.
<ol type=“i”> <li>book</li><li>marker</li><li>chalk</li></ol>

20 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Definition Lists (dl)
 define a list of term-description pairs
 Format:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
…
</dl>
 E.g.
<dl>
<dt>book</dt><dd>something that we read …</dd>
<dt>marker</dt><dd>something we write with …</dd>
21 </dl> Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Images
 insert images in an html document
 Format: <img> {no end tag}
 Attributes:
 src=“img url”
 alt=“alternate text”
 border=“border width”
 width=“image width”
 height=“image height”
 supported image formats:
 gif, jpg/jpeg, png
 E.g. <img src=“assets/images/logo.gif” alt=“Site Logo”>

22 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Anchor
 defines a hyperlink or a named anchor
 used for navigation
 Format: <a>…</a>
 Attributes:
 href=“url”
 target=“target” { _self, _blank }
 name=“anchor name”
 E.g.
<a href=“home.htm”>Go to home</a>
<a href=“http://www.google.com” target=“_blank”>Google</a>

23 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Navigation with anchors
 named anchors
 named places in an html document
 Format: <a name=“anchor_name”></a>
 E.g. <a name=“top”></a>
 linking to anchors
 Format:
 <a href=“#anchor_name”>link text</a> {on the same page}

 <a href=“url#anchor_name”link text</a> {on a different page}


 E.g.
 <a href=“#top”>Top of page</a> {assuming the example above}
 <a href=“http://www.hu.edu.et/history.htm#establishment”>
Establishment of HU</a>

24 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Tables
 Insert tabular data
 Design page layout
 Powerful, flexible information delivery
 Used to reflect or impart structure
 A table is a container
<table> ... </table>
 Tags involved: <table>, <tr>, <td>, <th>, <caption>

25 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Format:
<table>
<caption>table caption</caption>
<tr>
<th>…</th> <th>…</th> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>

26
</table> Web Programming Dec 18, 2023
HTML Tags (cont’d)
 E.g.
<table>
<caption align=“center” valign=“bottom”>table 1.0</caption>
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell 3</td> <td>Cell 4</td>
</tr>

27
</table> Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Table attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 width=“table width” {absolute or relative}
 border=“border width”
 bordercolor=“color”
 cellspacing=“space amount” {in pixels}
 cellpadding=“padding amount” {in pixels}
 …

28 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 Table row attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 height=“height”
 valign=“alignment” {top, middle, bottom}
 Table data/heading attributes:
 align=“alignment”
 valign=“alignment”
 width=“width”
 bgcolor=“color”
 Unless otherwise specified, <tr> and <td> inherit
attributes of <table> whenever it applies.
29 Web Programming Dec 18, 2023
HTML Tags (cont’d)
 Cells spanning multiple rows/columns
 two additional attributes of <td> and <th>
 colspan=“num columns”
 rowspan=“num rows”

 E.g. (colspan)
<table border=“1”>
<tr> <td colspan=“2”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> </tr>
<tr> <td colspan=“4”>Cell 8</td> </tr>
</table>

30 Web Programming Dec 18, 2023


HTML Tags (cont’d)
 E.g. (rowspan)
<table>
<tr> <td rowspan=“3”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>

 E.g. (hybrid)
<table>
<tr> <th colspan=“3”>Title</th> </tr>
<tr> <th rowspan=“3”>Cell 1</th> <td>Cell 2</td> <td>Cell 3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>
31 Web Programming Dec 18, 2023
HTML Special Characters
 Special characters (named characters)
 not found on the standard keyboard
 e.g. ©
 used by HTML
 e.g. <
 ignored by browsers
 e.g. blank spaces
 Format:
 &code;
 Examples:
 &copy;  © &lt;  < &amp;  & &nbsp;  space

32 Web Programming Dec 18, 2023


Divisions

 In HTML, we can create divisions of an HTML document


using the <div> tag.
 A <div> is a logical block tag that has no predefined
meaning or rendering
 Very important for page layout design
 The <div> tag works well with CSS
 Tag format:
 <div> … </div>
 Attributes:
 align=“alignment” {left, right, center} - define content alignt.

33 Web Programming Dec 18, 2023


HTML Forms

34 Web Programming Dec 18, 2023


Birds EyeView
<html>
 <body>
 <h2>HTML Forms</h2>
 <form action="/action_page.php">
 First name:<br>
 <input type="text" name="firstname" value="Mickey">
 <br>
 Last name:<br>
 <input type="text" name="lastname" value="Mouse">
 <br><br>
 <input type="submit" value="Submit">
 </form>
 <p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
 </body>
 </html>
35 Web Programming Dec 18, 2023
HTML Forms
 Used to gather input from users
 The input is usually sent to a server-side script for
processing

 The data can be sent in two methods: GET & POST


 GET
 for small and non-secure data
 Is the default method
 Data is sent as part of the request URL
 Limitation in size of data

36 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 POST
 For large & secure data
 Input is sent as a data stream after the request URL

 Tags

 The <form> tag


 Contains all input elements in the form
 Defines the method of sending data
 Defines the server-side script responsible for accepting the data

37 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 Attributes:
 name=“name”
 method=“method” {get, post}
 action=“url” {url of the server-side script to post data to}
 enctype=“enctype” {multipart/form-data, text/plain, … }
 multipart/form-data – used when uploading files

 Ex.
<form method=“post” action=“search.php”>
….
</form>

38 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 <input> tag
 used to define input fields in a form
 several types of input fields
{textbox, listbox, checkbox, radio, button, …}

 Attributes:
 name=“name”
 type=“type”
{text, hidden, password, file, submit, reset, button, checkbox, radio,
image}
 value=“value”
 disabled=“disabled”
 checked=“checked”

39 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 The possible input types:
 text – input text box
 hidden – a hidden field for storing values
 password – password input box
 file – input box for file uploading (browse)
 submit – a button that submits the form
 reset – a button that resets form fields to their original values
 button – a general purpose button
 checkbox – a check box
 radio – a radio button (option button)
 image – an image button that submits the form

40 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 Other input fields
 <textarea> tag
 used to input a large block of text
 Tag format: <textarea>…</textarea>

 Attributes:
 name=“name”
 cols=“num_columns”
 rows=“num_rows”
 readonly=“readonly”
 wrap=“wrap_type” {off, hard, soft, virtual, physical}

41 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 <select> tag
 used to create a select box
 Tag format:
 <select>
<option>…</option>
<option>…</option>
…
</select>
 Attributes:
 <select>
 name=“name”

 multiple=“multiple” {enables selection of multiple items}


 disabled=“disabled”

42 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 <option>
 value=“value”
 selected=“selected”
 disabled=“disabled” {browser compatibility: Firefox ?}

 Ex.
1. <select name=“department”>
<option value=“1”>Computer Science</option>
<option value=“2”>Information Science</option>
<option value=“3”>Computer Engineering</option>
</select>
2. Modify the above input so that Information Science is selected by
default.

43 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 submit & reset buttons
 the value attribute is the caption of the buttons
Ex. <input type=“submit” value=“ok”>
inserts a button with the caption (label) ok.

 file upload fields


Ex. <input type=“file” name=“doc”>

44 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 <label> tag
 used to give labels to input fields

 Ex.
<label>First Name:
<input type=“text” name=“fname”>
</label>

45 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 <fieldset> tag
 used to group input fields in a form
 the title/label of the group is set using the <legend> tag
 Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>

 Attributes:
 <legend>
 align=“alignment” {left, center, right}

46 Web Programming Dec 18, 2023


HTML Forms (cont’d)
 Presentation
 tables can be used to align form fields and their labels so that
the presentation of the form looks more regular.
 one possibility is to use:
 one table row per input field
 within a table row
 one column for the labels

 one column for the input fields

 the table borders can be set to 0 so that they are not visible
 other features of tables (rows & columns) can be adjusted as
required

47 Web Programming Dec 18, 2023


HTML Forms (cont’d)

 Exercises:

1. Create an HTML page which displays a login screen with


 a username field
 a password field
 a department field {select box with values:
1. Computer Science
2. Information Science
3. Information Technology
a button to submit the form
 a button to reset the content of the form

48 Web Programming Dec 18, 2023


HTML Forms (cont’d)

2. Create an HTML page which displays student registration screen with


 a name field
 an ID field
 a department field {select box with values:
1. Computer Science
2. Information Science
3. Computer Engineering
 a semester field {select box with values:
1. I
2. II
 an academic year field
{select box with values: 1998-2000, 2008 default}
 a button to submit the form

 a button to reset the form


49 Web Programming Dec 18, 2023
For General Understanding
 <html>
 <body>
 <h2>Grouping Form Data with Fieldset</h2>
 <p>The fieldset element is used to group related data in a form, and the legend element defines a caption for
the fieldset element.</p>
 <form action="/action_page.php“ method=“get”>
 <fieldset>
 <legend>Personal information:</legend>
 First name:<br>
 <input type="text" name="firstname" value="Mickey">
 <br>
 Last name:<br>
 <input type="text" name="lastname" value="Mouse">
 <br><br>
 <input type="submit" value="Submit">
 </fieldset>
 </form>
 </body>
 50</html> Web Programming Dec 18, 2023
HTML5

51 Web Programming Dec 18, 2023


HTML5 Overview
 HTML5 is the latest and the most enhanced version of html
that aims to make HTML more useful for creating internet
and web applications as well as semantically marked up
documents
 It is the standard for structuring and presenting content on the
WWW
 HTML5 offers new features (elements, attributes, event
handlers, and APIs) for easier web application development
and more sophisticated form handling.
 New Features such as : Video and Audio playback, Drag-
and –Drop, Canvas, Server-sent Events ,etc are included.

52 Web Programming Dec 18, 2023


Features of HTML5

 New Semantic Elements – Some new elements such as <header>, <footer> and
<section> are added to HTML5.
 Forms 2.0 – The web forms are improved by introducing some new attributes for
the <input> tag.
 Persistent Local Storage – This storage is achieved without resorting to the third-
party plugins.
 Server–Sent Events – Events introduced by HTML5 which flow from the web
servers to the web browsers and they are known as Server-Sent Events(SSE).
 Canvas – It is a drawing surface which supports two-dimensional drawing that can
be programmed with JavaScript.
 Audio & Video - Audios and videos can be added to the web pages without
resorting to the third-party plugins.
 Geolocation - Physical location of the visitors can be shared with the web
applications.
 Drag and drop – This feature helps in dragging and dropping items from one
location to the other on the same web page.
53 Web Programming Dec 18, 2023
HTML5-Rules
 New features should be based on HTML, CSS, DOM, and
JavaScript
 The need for external plug-ins (like Flash) needs to be
reduced
 Error handling should be easier than in previous versions
 Scripting has to be replaced by more markup
 HTML5 should be device-independent
 The development process should be visible to the public

54 Web Programming Dec 18, 2023


New in HTML5
 HTML5 introduces the following new input and form
control types : calendar, date, time, email, url, search
 APIs: With a growing demand for interactive content on web
pages,HTML5 introduces several APIs (Application
Programming Interfaces) for standardizing the creation of
web applications.
 Drag and drop functionality (including the new draggable attribute)
 Playing video and audio files, with video and audio element
 Two-dimensional drawing in conjunction with the new canvas element
 Registering applications for certain protocols or media types
 Cross-document messaging
 New content-specific elements, like <article>, <footer>, <header>, <nav>,
<section>
55 Web Programming Dec 18, 2023
New HTML5- Global attributes
 In addition to id, class, style, title, dir, lang, accesskey, and
tabindex carried over from HTML 4.01, HTML5 adds the
following global attributes that are applicable to all
elements:
 contenteditable="true|false“
 contextmenu="id of menu element“
 draggable="true|false“
 spellcheck="true|false"

56 Web Programming Dec 18, 2023


Exercises
1. Create an HTML document with the following
elements:
 At least one image
 At least three links
 Different background color and text colors.
 Two different sizes of text
 Some centered text.
 A title

57 Web Programming Dec 18, 2023


Exercises (cont’d)
2. For this exercise, you will familiarize yourself with
HTML by hand-writing a web site. You will develop at
least two web pages.
 The first will provide a Google-like interface where a user can
perform a search query.
 The "Search" button will link to the second page that displays
the results of a query.
 You will not actually be generating results. Instead, your
"Search" button can simply link to another page that shows the
results for a static query.
 The goal is really just to design the interface.

58 Web Programming Dec 18, 2023


Exercises (cont’d)
3. Create a menu list of links to the following search
engines:
 Yahoo: http://www.yahoo.com
 Google: http://www.google.com
 Alta Vista: http://www.altavista.com
 Ask: http://www.ask.com

 Refer to the following syntax:


<a href=”<URL>”>Text to Display</a>

59 Web Programming Dec 18, 2023


Cascade Style Sheet (CSS)

60 Web Programming Dec 18, 2023


Style Sheet Language
 Cascading Style Sheets (CSS): is style sheet language
used to describe the presentation of a html document.
 CSS describes how HTML elements should be
displayed.
 Define colors, fonts, layout, and other aspects of
document
Why CSS?
• more flexibility
• control the specification of presentational
characteristics
• reduce complexity and repetition in the structural
61 Web Programming Dec 18, 2023
content.
Objectives
 Topics covered:
 using a style sheet to give all the pages of a Web site
the same look and feel
 style sheet types and cascade precedence
 CSS syntax for assigning style properties
 Class selector and using the class attribute to
apply styles
 using style sheets to separate presentation from
content

62 Web Programming Dec 18, 2023


Introduction
 Cascading Style Sheets (CSS)
 Separation of document structure from presentation
 Styles define how to display HTML elements
 Relationship between the style formatting and the
structure/content is no longer 1:1
 multiple style sheets can be applied to the same Web
page
 Same style sheet can be applied to the multiple Web
page
 Clearly separates content from its presentation
Saves a lot of work. Especially in website maintenance and upgrading
63 Web Programming Dec 18, 2023
Introduction (cont’ d)

 An extension (addition) to HTML which allows us to style


our web pages, it is the language used to add style to
HTML elements.
 Provides more detailed attributes to elements than the
ones defined in standard HTML
 Styles are defined once and used any number of times and
in several contexts for the web docs
 Cascading Style Sheets are simple text files saved in a
“.css” extension which contain style Rules.

64 Web Programming Dec 18, 2023


Styling View – Web docs

65 Web Programming Dec 18, 2023


Cascading Style Sheets (CSS)

 In 1996 the W3C recommended the adoption of a standard set to


style sheets, Cascading Style Sheets level 1 (CSS1).
 The original purpose of CSS was to provide HTML authors with
more formatting support and give them a way to apply uniform
styles to multiple documents.
 Cascading Style Sheets level 2 (CSS2), introduced in 1998, included
additional features and functionality.
 Cascading Style Sheets level 3 (CSS3), was started in 1998 and like
HTML5 is still a standard in progress, but is supported (to some
extent) by most current web browsers.
 CSS4 began as a W3C working draft in September 2009 and is not
sufficiently developed yet to be supported by any major browser.
Why Use Cascading Style Sheets?

 The main reason for using CSS is:


 to separate a document’s content and structure from its
presentation. In so doing it provides the document author
with much greater control over the document’s format.
 to change your presentation layout or method without having
to modify the documents themselves, and allows you to
apply one style sheet to any number of documents.
 For example, an organization could produce a price list
document and then develop different style sheets depending
on the type of user who is viewing the content whether they
are using a desktop browser or a mobile device.
Advantages of CSS
 CSS saves time: will automatically apply the specified
styles whenever that element occurs.
 Pages load faster: less code means faster download times.
 Easy maintenance: to change the style of an element, you
only have to make an edit in one place.
 Superior styles to HTML : CSS has a much wider array of
attributes than HTML.
 Better type and layout controls
 Reliable browser support
 More accessible sites
Defining Styles
 In order to use a style sheet with your HTML5 document, you
need to tell your document where to locate the style definitions.
 There are three ways to define styles:
1. Inline Styles: Inline styles are applied to a single element within
the start tag of the element.
2. Global (Embedded or Internal) Style Sheets: Style definitions
in are stored in the HTML5 document global style sheet itself
within the <style> element in the <head> of the document.
3. Linked (External) Style Sheets: Style definitions in linked style
sheets are stored in a file separate from the HTML5 document.
1. Inline Style Sheets
 Inline styles are applied to a single element within the
start tag of the element.
 For example, if you wanted to assign certain properties to
the text within a paragraph, you would include style
definitions like the following:
<p style=“color:red; font-family:arial;”>
paragraph text
</p>
 We’ve already used this style of CSS in a couple of our
earlier examples.
1. Inline Style Sheets - Example

<!DOCTYPE html>
<html>
<body>

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


<p>This is a paragraph.</p>

</body>
</html>
2. Embedded/Global/Internal Style Sheets

 Style definitions in global style sheets are stored in the HTML5


document itself within the <style> element. The <style>
element must be contained within the <head> element.
 The syntax of a global style sheet is:
<style type=“text/css”>
<!-- style definitions go here
-->
</style> Notice that the section where the global styles are defined is contained within an
HTML5 comment. This is to hide the actual contents of the style definition from older
browsers that don’t support CSS. The comment tags are not necessary to make
CSS work, but if they are not provided in an XHTML document, older Web browsers
may actually display the style property definitions on the Web page!
2. Global/Embedded/Internal Style Sheets
 this method can only specify style information for the current
document:
 It is a 1:1 relationship
 However, the same document may have other style definitions applied to it
 1:M relationship

 embedded style sheet rule will have higher precedence than


external style sheet rule, if there is a conflict between styles

 embedded style sheet rule will have lower precedence than an


inline style sheet rule

73 Web Programming Dec 18, 2023


2. Global/Embedded/Internal – Example 1
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Global/Embedded/Internal Style Sheet – Example 2

A global (internal) style sheet


3. External/Linked Style Sheets

 Style definitions in linked style sheets are stored in a file


separate from the HTML5 document.
 It provides style definitions to many documents – each
document simply has to reference a single style sheet.
 The syntax for a linked style sheet declaration in an HTML5
document is:
<link rel=“stylesheet” href=“mystyles.css” type=“text/css” />

 The <link> element is used to define the style sheet. The


<link> element is an empty element and must be contained
within the <head> element of an HTML5 document.
3. External/Linked Style Sheets
 External style sheets
 Applicable to more than one document
 Documents can have more than one source for style specification
 M:M relationship
 Can provide uniform look and feel to entire site

 Same CSS syntax rules for assigning and invoking style properties
apply

77 Web Programming Dec 18, 2023


3. External/Linked Style Sheets
 The rel attribute specifies this <link> element to be a link
to a style sheet.
 The href attribute, like that for the <a> (anchor) element,
specifies the location of the style sheet file on the system.
Both relative and absolute URLs can be used as the value for
the href attribute.
 The type attribute declares this style sheet to be a plain-text
file containing CSS styles.
3. External/Linked Style Sheets - Linking
 To make a style sheet persistent, set the rel attribute to
"stylesheet".

 To make a style sheet preferred, set the rel attribute to


"stylesheet" and name the style sheet with the additional
title attribute.

 To specify an alternate style sheet, set the rel attribute to


"alternate stylesheet" and name the style sheet with the title
attribute.

79 Web Programming Dec 18, 2023


3. External/Linked Style Sheets - Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Style Precedence – The Cascade

Browser defaults

External styles

Embedded styles

Inline styles

HTML5 attributes
CSS (cont’d)
 CSS styles can be specified:
 Inside a single HTML element (inline)
 Inside the <head> element of an HTML document (internal)
 In an external CSS file (external)

 Rules of precedence application:


 Inline styles
 Internal styles
 External styles
 Browser default
 From highest to lowest

82 Web Programming Dec 18, 2023


CSS Syntax for Assigning Style Properties
 The CSS syntax is made up of three parts: a selector, a property and a value:
 selector {property: value}
 A selector can be:
 the HTML element/tag you wish to define. In this example:
 body {color: black} , element body is the selector
 The class selector, which can be tied to a specific element, such as:
 p.right {text-align: right}
 The class selector applicable to any element, such as:
 .loud {font-family: fantasy; font-size:
xx-large}
 If a class selector is used, it has to be invoked in the body of the
HTML document:
 <p class="right"> or
 <table class=“loud”>
 Selectors can be grouped (separated by comma)
83 Web Programming Dec 18, 2023
Ex. p, div, table { align: center }
CSS Syntax for Assigning Style Properties
 Group selectors are possible for a group of HTML elements. For example:
 h1,h2,h3,h4,h5,h6 {color: green} will make all header
elements text green
 When a class selector is defined for a particular element, it can
not be invoked on other elements. Using example from the
previous slide which of these uses of class styles in the
XHTML document is correct?
 <ul class = “loud”>
 <ul class = “right”>
 Pseudo-class selectors define the style for the parts of a
document based on some characteristics other than tag name,
attributes or content.
 They may be defined by a user action such as:
 Mouseover (hover pseudoclass)
 Clicking (active pseudoclass)

84 Web Programming Dec 18, 2023


CSS (cont’d)
 Types of selectors
 HTML tag names
 Class selectors
 Id selectors

 HTML tag names as selectors


 used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline
}

85 Web Programming Dec 18, 2023


CSS (cont’d)
 The class selector

define generic styles that can be applied to different HTML
elements
 applied to the class attribute of HTML elements

Format:
1. Styles for a particular element
Syntax: tag_name.style_name { property: value }
Ex. p.color { color: green }
 <p class=“color”>some text</p>
2. Styles for all elements
Syntax: .style_name { property: value }
Ex. .color { color: blue }
 <div class=“color”>some text</div>
86 Web Programming Dec 18, 2023
<table class=“color”>…</table>
CSS (cont’d)
 The Id selector

unlike the class selector, the Id selector always applies to only
one element
Format:
1. Styles for a particular element
Syntax: tag_name#style_name { property: value }
Ex. p#color { color: green }
 <p id=“color”>some text</p>
2. Styles for all elements
Syntax: #style_name { property: value }
Ex. #color { color: blue }
 <div id=“color”>some text</div>
87 <table id=“color”>…</table> possible
Web Programming Dec 18,???
2023
CSS (cont’d)
 CSS comments
 Format:
/* comment text */

 Example
p{
color: red; /* Set text color to red */
/* This is
a multi-line
comment */
}

88 Web Programming Dec 18, 2023


CSS (cont’d) - Some common CSS properties

 Background
 background-color: color
 background-image: url(url)
 background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-repeat}
 background-attachment: attachment_type {scroll, fixed}
 Text
 color: color
 direction: direction {ltr, rtl} borwser issue??
 letter-spacing: value
 text-align: alignment {left, right, center, justify}
 text-decoration: decoration {none, underline, overline, line-through,
blink}
 text-indent: value

89 Web Programming Dec 18, 2023


CSS Rules – Examples

h1 {
CSS rule applying to color: black;
a single element.
font-size: 12pt;
font-family: arial;
}

h1, h2, p {
CSS rule applying to color: red;
a three elements. font-size: 12pt;
font-family: arial;
}
CSS Example

 Before we go too much further in examining CSS,


let’s rework one of our earlier examples to include
CSS.
 The very first HTML document we created was a
course description document
 For this first example of CSS, we’ll use a linked
style sheet. Recall that this means the style
definitions are stored in a file separate from the
HTML document. So let’s create the CSS file and
name it “firstCSS.css”.
firstCSS.css
CSS Properties
There are many types of CSS properties:
1. Font properties define font styles such as font family or type, size,
weight, and variant.
2. Text properties define the layout of blocks of text, words, or characters,
including spacing, alignment, transformation (forced uppercase or
lowercase), and decoration (such as underline, overline, strikethrough,
and blinking).
3. Color and image properties define the color and background formatting
of text and images. These properties can also define the position of a
background image and whether the image is repeated (tiled).
4. Border properties define the style of borders for elements like tables and
images, as well as for the entire document. Border properties include
width, height, style, color, margins, and padding.
5. Display properties define the style for the structure of the document.
These properties can define the placement of elements within the
document, such as block or inline, and how whitespace is formatted
within the document.
Font Properties

Property Description Value Example(s)


Global font declaration. Can font-family, font-
define all font properties in one style, font-weight,
font font-size, font-style
property.

Font type to display text. arial, courier


font-family
Size of font in pixels or as a small, x-small,
font-size percentage. medium, large,
x-large
Style of font. italic, bold, oblique
font-style
normal, small-caps
font-variant Font rendering.
Darkness of font. Uses name or normal, light, bold,
font-weight number. bolder, 100, 200,
300, 400, etc.
Text Properties
Property Description Value Example(s)
Amount of space between words in an normal, number of pixels
word-spacing element.
letter-spacing Amount of space between letters. normal, number of pixels
text-align Horizontal alignment of text on page. right, left, center
baseline, sub, super,
top, text-top, middle,
vertical-align Vertical alignment of text on page. bottom, text-bottom,
percentage
How much first line is indented. 0, number of pixels (i.e. 10 px),
text-indent percentage (i.e. 10%)
Change case of text. uppercase, lowercase,
text-transform capitalize, none
Amount of space between lines of text. normal, number of pixels
line-height
Special controls of text appearance underline, overline,
text-decoration blink, line-through,
none
Color Properties
Property Description Value Example(s)
color Text color red, blue, color code

Global background declaration. Can background-color, background-


define all background properties in one image, background-position,
background property. background-repeat, background-
attachment

background- Color of element’s background color name, transparent,


color inherit

background- URL, name of local file.


Image to be used as a background.
image
background- Scrolling of background image with the scroll, fixed, inherit
attachment element.

Position of element’s background. top, center, bottom,


background-
left, right, percentage,
position number of pixels
background- Repeat pattern for background image repeat, repeat-x,
repeat (tiling). repeat-y, no-repeat
Border Properties
Property Description Value Example(s)
Color of the border element. red, blue, color code
border-color
Width of the border. medium, thin, thick,
border-width
number of pixels.
border-style Style of the border. none, solid, double
0, number of pixels, percentage.
margin-top Width of margin at the top of element.

Width of margin at the bottom of 0, number of pixels, percentage.


margin-bottom element.
Width of margin at the left side of 0, number of pixels, percentage.
margin-left element.
Width of margin at the right side of 0, number of pixels, percentage.
margin-right element.
Amount of padding at top of element. 0, number of pixels, percentage.
padding-top
Border Properties (continued)

Property Description Value Example(s)


Amount of padding at bottom of 0, number of pixels, percentage.
padding-bottom element.
Amount of padding on left side of 0, number of pixels, percentage.
padding-left element.
Amount of padding on right side of 0, number of pixels, percentage.
padding-right element.

Whether an element permits other none, left, right


clear
elements on its sides.

float Floating element. none, left, right

Height of an element. auto, number of pixels,


height
percentage
Width of section auto, number of pixels,
width
percentage
Display Properties

Property Description Value Example(s)


Controls display of an element. block, inline, list-
display item

white-space Whitespace formatting. normal, pre, nowrap

Controls visibility of element. inherit, visible,


visibility hidden
Example –inline style
<html>
<head>
<title> Inline Style</title>
</head>
<body>
<p> this text doesn’t have any style applied to it</p>
<p style= “font-size:20pt”> this text
<emp>Font-Size</emp> syle appied to it making 20pt
</p>
<p style= “font-size=:20pt;color:#0000ff”> this text has
the<emp> Font-Size</emp> and <emp>color<emp> style
applied to it as 20pt and blue.</p>
100 Web Programming Dec 18, 2023

You might also like