Fundamentals of Web Design Technologies: HTML & CSS
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
TYPE DESCRIPTION
<INPUT TYPE="TEXT"> Displays a single-line text input field
<INPUT TYPE="RADIO"> Displays a radio button (for selecting one of many choices)
<INPUT TYPE="CHECKBOX"> Displays a checkbox (for selecting zero or more of many
<INPUT TYPE="SUBMIT"> choices)
Displays a submit button (for submitting the form)
<INPUT TYPE="BUTTON"> Displays a clickable button
HTML Input Types
Here are the different input types you can use in HTML:
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
P a g e 45 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Text Fields
The <input type="text"> defines a single-line input field for text input.
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="qursiah"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="saad">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20
characters.</p>
</body>
</html>
P a g e 46 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The <label> Element
Notice the use of the <label> element in the example above.The <label> tag defines a label for
many form elements. The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.
The attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your Department:</p>
<form>
<input type="radio" id="jtmk" name="dept_1" value="JTMK">
<label for="jtmk">Jabatan Teknologi Maklumat dan Komunikasi</label><br>
<input type="radio" id="Jke" name="dept_2" value="JKE">
<label for="jke">Jabatan Kejuruteraan Elektrik</label><br>
<input type="radio" id="Jph" name="dept_3" value="JPH">
<label for="jph">Jabatan Pelancongan dan Hospitaliti</label>
</form>
</body>
</html>
P a g e 47 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a
checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 48 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Combo boxes
Combobox is the HTML element which can easily support all kind of browsers. It works as the
latest form of objects as a Combobox for filling data through options in a given textfield.
A function like onChange is able to choose an option from the selection list as per user
preference.Once the user selects the option, it will remain as it is still showing on the output
screen.
<!DOCTYPE html>
<html>
<body>
<h1>Select list in Combo box with Textbox</h1>
<p>Once the user selects the option, it will remain as it is still
showing on the output screen:</p>
<form action="/action_page.php">
<select name=” optionlist ” onChange=”combo(this, ’demo’)”>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option> option 4 </option>
<option> option 5 </option>
</select>
<input type=”text” id=”demo” name=”comboboxdemo”/>
</form>
</body>
</html>
P a g e 49 | 118
Fundamentals of Web Design Technologies: HTML & CSS
HTML Combobox is mainly used for building forms in HTML. In which users are able to select an
option from the list as per their preference.Combobox in HTML is formed with select element
and input type=”text” element.The functionality of the Combobox is as same as a select tag. It’s
also having a <option>tag attribute within the <select >tag to select the menu option from the
list so one can choose an option as per their choice.
<html>
<head>
<title>Example of Combobox</title>
</head>
<style>
.combo{
padding:10px;
}
</style>
<h1>Pendaftaran Kelas di JTMK</h1>
<body>
<form>
<label for="fname">KELAS :</label>
<select class="combo">
<option value="Select">Sila Pilih Kelas</option>
<option value="DDT1A">DDT1A</option>
<option value="DDT1B">DDT1B</option>
<option value="DDT1C">DDT1C</option>
<option value="DDT1D">DDT1C</option>
<option value="DDT1E">DDT1E</option>
</form>
</body>
</html>
P a g e 50 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Textarea
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width
font (usually Courier).The size of a text area is specified by the <cols> and <rows> attributes (or
with CSS).The name attribute is needed to reference the form data after the form is submitted
(if you omit the name attribute, no data from the text area will be submitted).The id attribute is
needed to associate the text area with a label.
<!DOCTYPE html>
<html>
<body>
<h1>The textarea element</h1>
<form action="/action_page.php">
<label for="Ulasan">Ulasan Ketua Program:</label>
<textarea id="ukp" name="ukp" rows="4" cols="50">
Secara keseluruhan pencapaian CLO 1 dan CLO 2 bagi kursus DFP40043
Web Design Technologies
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page
on the
server called "action_page.php".</p>
</body>
</html>
P a g e 51 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.The
form-handler is typically a file on the server with a script for processing input data.The form-
handler is specified in the form's action attribute.
<!DOCTYPE html>
<html>
<body>
<h1>Display a Submit and Reset Button</h1>
<p>Click on the reset button to reset the form.</p>
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="pin">Enter a PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4"><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 52 | 118
Fundamentals of Web Design Technologies: HTML & CSS
HTTP Request Methods
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients
and servers.
HTTP works as a request-response protocol between a client and server.
Example: A client (browser) sends an HTTP request to the server; then the server returns a
response to the client. The response contains status information about the request and may also
contain the requested content.
HTTP Methods
• GET
• POST
• PUT
• HEAD
• DELETE
• PATCH
• OPTIONS
The two most common HTTP methods are: GET and POST.
The GET Method
GET is used to request data from a specified resource.
GET is one of the most common HTTP methods.
Note that the query string (name/value pairs) is sent in the URL of a GET request:
/test/demo_form.php?name1=value1&name2=value2
Some other notes on GET requests:
• GET requests can be cached
• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests are only used to request data (not modify)
P a g e 53 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The POST Method
POST is used to send data to a server to create/update a resource.
The data sent to the server with POST is stored in the request body of the HTTP request:
POST /test/demo_form.php HTTP/1.1
Host: psis.edu.my name1=value1&name2=value2
POST is one of the most common HTTP methods.
Some other notes on POST requests:
• POST requests are never cached
• POST requests do not remain in the browser history
• POST requests cannot be bookmarked
• POST requests have no restrictions on data length
The Submit Button with POST-METHOD
The formmethod attribute specifies which HTTP method to use when sending the form-data. This
attribute overrides the form's method attribute.
The formmethod attribute is only used for buttons with type="submit".
The form-data can be sent as URL variables (with method="get") or as HTTP post (with
method="post").
Notes on the "get" method:
• it appends the form-data to the URL in name/value pairs
• it is useful for form submissions where a user want to bookmark the result
There is a limit to how much data you can place in a URL (varies between browsers), therefore,
you cannot be sure that all of the form-data will be correctly transferred
Never use the "get" method to pass sensitive information! (password or other sensitive
information will be visible in the browser's address bar)
Notes on the "post" method:
• it sends the form-data as an HTTP post transaction
• Form submissions with the "post" method cannot be bookmarked
• it is more robust and secure than "get"
• it does not have size limitations
P a g e 54 | 118
Fundamentals of Web Design Technologies: HTML & CSS
<!DOCTYPE html>
<html>
<body>
<h1>The button formmethod attribute</h1>
<form action="/action_page.php" method="get" target="_blank">
<label for="fname">USERNAME:</label>
<input type="text" id="usrname" name="usrname"><br><br>
<label for="lname">PASSWORD:</label>
<input type="text" id="pwd" name="pwd"><br><br>
<button type="submit">Submit</button>
<button type="submit" formmethod="post">Submit using POST</button>
</form>
</body>
</html>
P a g e 55 | 118
Fundamentals of Web Design Technologies: HTML & CSS
File Upload field
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
To define a file-select field that allows multiple files to be selected, add the multiple attribute.
<body>
<h1>Show File-select Fields</h1>
<h3>Show a file-select field which allows only one file to be chosen:</h3>
<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>
<h3>Show a file-select field which allows multiple files:</h3>
<form action="/action_page.php">
<label for="myfile">Select files:</label>
<input type="file" id="myfile" name="myfile" multiple><br><br>
<input type="submit">
</form>
</body>
P a g e 56 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The hidden text field
The <input type="hidden"> defines a hidden input field.
A hidden field let web developers include data that cannot be seen or modified by users when a
form is submitted.
A hidden field often stores what database record that needs to be updated when the form is
submitted. While the value is not displayed to the user in the page's content, it is visible (and can
be edited) using any browser's developer tools or "View Source" functionality. Do not use hidden
inputs as a form of security.
<!DOCTYPE html>
<html>
<body>
<h1>A Hidden Field (look in source code)</h1>
<form action="/action_page.php">
<label for="fname">NAMA ANDA:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The hidden field is not shown to the user, but
the data is sent when the form is submitted.</p>
</body>
</html>
P a g e 57 | 118
Fundamentals of Web Design Technologies: HTML & CSS
File Upload field
The <input type="password"> defines a password field (characters are masked). Any forms
involving sensitive information like passwords should be served over HTTPS. Always add the
<label> tag for best accessibility practices!
<!DOCTYPE html>
<html>
<body>
<h1>Display a Password Field</h1>
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
minlength="8"><br><br>
<input type="submit">
</form>
</body>
</html>
P a g e 58 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The value Attribute
The input value attribute specifies an initial value for an input field.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The readonly Attribute
The input readonly attribute specifies that an input field is read-only. A read-only input field
cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The
value of a read-only input field will be sent when submitting the form!
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified however, a user can tab to it, highlight it, and copy
the text from it. The value of a read-only input field will be sent when submitting the form!
<!DOCTYPE html>
<html>
<body>
<h1>The input readonly attribute</h1>
<p>The readonly attribute specifies that an input field should be read-only (cannot be
changed):</p>
<form action="/action_page.php">
<label for="fname">NAMA PELAJAR:</label><br>
<input type="text" id="fname" name="fname" value="Qursiah" readonly><br>
<label for="lname">NAMA PENSYARAH:</label><br>
<input type="text" id="lname" name="lname" value="Nurakmar"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 59 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The Maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input
field.
<!DOCTYPE html>
<html>
<body>
<h1>The input maxlength attribute</h1>
<p>The maxlength attribute specifies the maximum number of
characters allowed in an input field:</p>
<form action="/action_page.php">
<label for="fname">Username:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4"
size="4"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
When a maxlength is set, the input field will not accept more than the specified number of
characters. However, this attribute does not provide any feedback. So, if you want to alert the
user, you must write JavaScript code.
P a g e 60 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-
local, month, time and week.
<!DOCTYPE html>
<html>
<body>
<h1>The input min and max attributes</h1>
<p>The min and max attributes specify the minimum and maximum values for an input
element.</p>
<form action="/action_page.php">
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 61 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more than one value in an
input field.
<!DOCTYPE html>
<html>
<body>
<h1>The input multiple attributes</h1>
<p>The multiple attribute specifies that the user is allowed to
enter more than one value in an input field.</p>
<form action="/action_page.php">
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple><br><br>
<input type="submit" value="Submit">
</form>
<p>To select multiple files, hold down the CTRL or SHIFT key while
selecting.</p>
</body>
</html>
P a g e 62 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked
against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and
password.
<!DOCTYPE html>
<html>
<body>
<h1>The input pattern attribute</h1>
<p>The pattern attribute specifies a regular expression that the
input element's value is checked against.</p>
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag
is not supported in Safari 10 (or earlier).</p>
</body>
</html>
P a g e 63 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value of an
input field (a sample value or a short description of the expected format).The short hint is
displayed in the input field before the user enters a value.The placeholder attribute works with
the following input types: text, search, url, tel, email, and password.
<!DOCTYPE html>
<html>
<body>
<h1>The input placeholder attribute</h1>
<p>The placeholder attribute specifies a short hint that describes
the expected value of an input field.</p>
<form action="/action_page.php">
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="012-115-
568" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 64 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the
form.
The required attribute works with the following input types: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.
<!DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be
filled out before submitting the form.</p>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag
is not supported in Safari prior version 10.1.</p>
</body>
</html>
P a g e 65 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when
the page loads.
<!DOCTYPE html>
<html>
<body>
<h1>The input autofocus attribute</h1>
<p>The autofocus attribute specifies that the input field should
automatically get focus when the page loads.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 66 | 118
Fundamentals of Web Design Technologies: HTML & CSS
The autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input field should have
autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the
browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with <form> and the following <input> types: text, search, url,
tel, email, password, datepickers, range, and color.
P a g e 67 | 118
Fundamentals of Web Design Technologies: HTML & CSS
<!DOCTYPE html>
<html>
<body>
<h1>The autocomplete attribute</h1>
<p>The autocomplete attribute specifies whether or not an input
field should have autocomplete enabled.</p>
<p>Fill in and submit the form, then reload the page to see how
autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for
the e-mail field!</p>
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
P a g e 68 | 118
Fundamentals of Web Design Technologies: HTML & CSS
EXERCISE
HTML BASICS EXERCISES
1. Create a webpage that prints your name to the screen.
2. Create a webpage that prints the numbers 1 - 10 to the screen. [See solution]
3. Create a webpage and set its title to "This is a webpage".
4. Create a webpage that prints the message "When was this webpage created? Check
page's title for the answer." to the screen, and set the title of the page to the current date.
5. Create a webpage that prints any text of your choosing to the screen, do not include a
head section in the code.
6. Repeat exercise Number 5, but this time include a head section in the code.
HTML TEXT EXERCISES
1. Print your name in green.
2. Print the numbers 1 - 10, each number being a different color.
3. Prints your name in a Tahoma font.
4. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.
5. Print a paragraph that is a description of a book, include the title of the book as well as its
author. Names and titles should be underlined, adjectives should be italicized and bolded.
6. Print your name to the screen with every letter being a different heading size.
HTML TEXT FORMATTING EXERCISES
1. Print the squares of the numbers 1 - 20. Each number should be on a separate line,
next to it the number 2 superscripted, an equal sign and the result. (Example: 102 =
100)
2. Prints 10 names with a line break between each name. The list should be alphabetized,
and to do this place a subscripted number next to each name based on where it will
go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a
subscript number next to each name, then the alphabetized list. Both lists should have
an <h1> level heading.
3. Print two paragraphs that are both indented using the command.
4. Print two lists with any information you want. One list should be an ordered list, the
other list should be an unordered list.
5. Prints an h1 level heading followed by a horizontal line whose width is 100%. Below
the horizontal line print a paragraph relating to the text in the heading.
P a g e 69 | 118
Fundamentals of Web Design Technologies: HTML & CSS
HTML LINK EXERCISES
1. Create some links to various search engines (google, yahoo, altavista, lycos, etc).
2. Create links to five different pages on five different websites that should all open in a new
window.
3. Create a page with a link at the top of it that when clicked will jump all the way to the
bottom of the page.
4. Create a page with a link at the bottom of it that when clicked will jump all the way to the
top of the page.
5. Create a page with a link at the top of it that when clicked will jump all the way to the
bottom of the page. At the bottom of the page there should be a link to jump back to the
top of the page.
HTML IMAGE EXERCISES
1. Display five different images. Skip two lines between each image. Each image should
have a title.
2. Display an image that has a border of size 2, a width of 200, and a height of 200.
3. that when clicked will link to a search engine of your choice (should be opened in a
new window).
4. Display an image that when clicked will link to itself and will display the image in the
browser by itself.
P a g e 70 | 118
CASCADING
STYLE
SHEETS
Fundamentals of Web Design Technologies: HTML & CSS
CASCADING STYLE SHEETS
CSS handles the appearance and experience a part of an internet page. Using CSS, you could
manage the style of the text, the fonts, the spacing among paragraphs, how columns are sized
and laid out, what background used, format designs, versions in show for different devices and
display screen sizes in addition to quite a few different effects.
CSS enables Web designers to establish a consistent look across multiple pages of a website.
Commonly used styles only need to be declared once in a CSS document, rather than describing
the style of each table and each block of text within the HTML of a page. Once a style is defined
in a cascading style sheet, any page that mentions the CSS file can utilize it. CSS also makes it
simple to update the style of multiple pages at once.
Advantages of CSS:
1. Can write CSS as soon as after which reuse equal sheet in more than one HTML pages.
You can outline a style for every HTML detail and use it on as many Web pages as you
want.
2. Using CSS, you do now no longer want to put in writing HTML tag attributes each time.
Just write one CSS rule of a tag and use it on all of the occurrences of that tag. So much
less code means faster download times.
3. Easy maintenance with simply change the style, all elements in all web pages will update
automatically.
4. CSS allow contents to be optimized more than one type of device. Using the same HTML
document, different version of website can be presented for handheld devices.
Syntax
A CSS rule-set consists of a selector and a declaration block.
selector {property: value}
Example: declaration Selector: Selector is HTML tag at which a
selector style will be applied.
{color: blue; font-size: 10px;} Property: Property is a type of attribute of
H2 HTML tag.
Value: Value are assigned to properties.
property value
P a g e 71 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Style of Cascading Style Sheet
1. Inline
Inline styles directly affect the tag they are written in, without the use of selectors.
Example:
<html>
<head></head>
<body>
<p style = "color: yellow; text-align: right;" > paragraph
</p>
</body>
</html>
2. Internal
Internal styles are used to add unique style for a single document. It defined in <head> section
of the HTML page inside the <style> tag.
Example:
<html>
<head>
<style>
p {color: yellow;
text-align: right:}
</style>
</head>
<body>
<p> paragraph </p>
</body>
</html>
3. External
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 page and the <link> tag should be put inside
the head section.
P a g e 72 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p> paragraph </p>
</body>
</html>
file: mystyle.css
p {color: yellow;
text-align: right:}
CSS Rules Overriding
Here is the rule to override any style sheet rule.
✓ Any inline style sheet takes the highest priority. So, it will override any rule defined in
Internal or any external style sheet file.
✓ Any rules defined in internal will override the rules defined in any external style sheet
file.
✓ Any rule defined in the external style sheet file takes the lowest priority and the rules
defined in this file will be applied only when the above rules are not applicable.
CSS Comments
Comment helps to understand code better and makes it readable and helps to debug the code.
To add comment at any part in the style sheet, you can simply put your comments inside /*….
This is comment in style sheet….*/.
You can use /*…..*/ to comment multi-line blocks in style sheet file.
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p> paragraph </p> /* This is Paragraph */
</body>
</html>
P a g e 73 | 118
Fundamentals of Web Design Technologies: HTML & CSS
CSS Selectors
CSS selectors are used to select the HTML elements that want to style. You can define selectors
in various way based on your comfort.
1. Universal Selectors
The CSS Universal Selector (*) is a selector which is used to select all elements of the
HTML.
Syntax:
*{/*declaration* /}
Example:
<html>
<head>
<style>
*{color: blue;}
</style>
</head>
<body>
<h1>Welcome to My Site</h1>
<div class="intro">
<p id="firstname">My name is John. </p>
<p id="hometown">I live in Kuala Lumpur. </p>
</div>
<p>My best friend is Michele. </p>
</body>
</html>
Output:
P a g e 74 | 118
Fundamentals of Web Design Technologies: HTML & CSS
2. Type Selector
The type selector selects the HTML elements based on the element name.
Example:
<html>
<head>
<style>
p {text-align: center;
font-size: 14px;}
</style>
</head>
<body>
<h1>Welcome to My Site</h1>
<p My name is John. </p>
<p> I live in Kuala Lumpur. </p>
<p>My best friend is Michele. </p>
</body>
</html>
Output:
3. Class Selector
The class selector(.) selects elements with a specific class attribute.
Example:
<html> P a g e 75 | 118
<head>
<style>
. center {text-align : center;
font-size: 14px;}
</style>
</head>
<body>
<h1>Welcome to My Site</h1>
<p class= "center" > My name is John. </p>
<p> I live in Kuala Lumpur. </p>
<p>My best friend is Michele. </p>
</body>
</html>
Fundamentals of Web Design Technologies: HTML & CSS
Output:
Class selectors can also specify that only specific HTML elements should be affected by a
class.
<html>
<head>
<style>
p.center { text-align : center;
font-size: 14px;}
</style>
</head>
<body>
<h1>Welcome to My Site</h1>
<p class= “center” > My name is John.</p>
<h3 class= “center” > I live in Kuala Lumpur.</h3>
<h3>My best friend is Michele.</h3>
</body>
</html>
Output:
In this example only <p> elements with class="center" will be font size 14px and center-
aligned:
P a g e 76 | 118
Fundamentals of Web Design Technologies: HTML & CSS
4. Id selector
The id selector (#) uses the id attribute of an HTML elements to select specific element.
<html>
<head>
<style>
#para { text-align : center;
font-size: 14px;}
</style>
</head>
<body>
<h1>Welcome to My Site</h1>
<p id= “para” > My name is John.</p>
<h3 id= “para” > I live in Kuala Lumpur.</h3>
<h3>My best friend is Michele.</h3>
</body>
</html>
Output:
5. Child Selector
The child selector (>) was created by using two selectors. The child combinator selects
elements that match the second selector and are the direct children of the first selector.
[First selector indicates] parent > child [ second selectors indicate child elements CSS will
style].
<html>
<head>
<style>
div > p { text-align : center; }
</style>
</head>
<body>
<div>
<p> My name is John.</p>
<p> I live in Kuala Lumpur.</h3>
<h3>My best friend is Michele.</h3>
</div>
</body>
</html>
P a g e 77 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
6. Descendant Selectors
The descendant selector (<space>) matched all elements that are descendants of a
specified elements. The first selectors represent the ancestor elements, and the second
selectors represents descendent elements that trying to match.
<html>
<head>
<style>
div p { text-align : center; }
</style>
</head>
<body>
<div>
<p> My name is John.</p>
<p> I live in Kuala Lumpur.</p>
<h3>My best friend is Michele.</h3>
</div>
</body>
</html>
Output:
P a g e 78 | 118
Fundamentals of Web Design Technologies: HTML & CSS
7. Adjacent sibling selector
The adjacent sibling selector (+) is used to select an element directly after another
specific elements.
<html>
<head>
<style>
div + p { text-align : center; }
</style>
</head>
<body>
<div>
<p> My name is John.</p>
<p> I live in Kuala Lumpur.</p>
<h3>My best friend is Michele. </h3>
</div>
<p> My hobbies are watching tv and listening to the radio. </p>
</body>
</html>
Output:
The following example selects the first <p> element that are placed immediately after
<div> elements:
8. Attribute selector
The attribute selector is used to select elements with a specified attribute.
<html>
<head>
<style>
a [ target] { font-size : 40px;}
</style>
</head>
<body>
<p><a href = “https://www.yahoo.com” > Yahoo </p>
<p><a href = “https://www.google.com” target= “blank”> Google</p>
</body>
</html>
P a g e 79 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
9. Query selector
Queryselector() methods returns the first elements that matches a specifies CSS selector
in the document. To return all matches, use the querySelectorAll() method.
<html>
<body>
<p>This is a first paragraph. </p>
<p>This is second paragraph. </p>
<p>Click the button to add a background color to the first
paragraph in the document. </p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.querySelector("p").style.backgroundColor =
"yellow";}
</script>
</body>
</html>
Output:
P a g e 80 | 118
Fundamentals of Web Design Technologies: HTML & CSS
10. Nesting of selectors
Nesting selectors can specify properties to the selectors within other selectors.
<html>
<head>
<style>
#top {
background-color: lightgray;
padding: 1px; }
#top h1 {
color: yellow; }
#top p {
color: red;
font-weight: bold; }
</style>
</head>
<body>
<div id="top">
<h1>Chocolate</h1>
<p>I love chocolate</p>
<p>Its yummy</p>
</div>
</body>
</html>
Output:
P a g e 81 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Grouping Selector
You can apply a style to many selectors. Just separate selectors with a comma. As given in the
following example:
<html>
<head>
<style>
h1,h2,p { color: blue;
font-weight: normal;
text-transform: lowercase;}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
<h1>This is Heading 2</h1>
<p>This is Paragraph</p>
</body>
</html>
Output:
P a g e 82 | 118
Fundamentals of Web Design Technologies: HTML & CSS
CSS Properties
CSS properties are specified in the CSS standard. Each property has a set of possible values. Some
properties can affect any type of element, and others apply only to particular groups of elements.
CSS properties are the styles used on specified selectors. They are written before values in the
CSS ruleset and are separated from property values by a colon. Different HTML selectors and
elements have different properties. Some properties are universal and can be used on every
selector. Others work only on specific selectors and under particular conditions.
Types of CSS properties
1. Background properties
This property sets the background color of the content. The following CSS background
properties:
Property Description
Background-color To specifies the background color of an elements.
Background-image To specifies an image to use as the background of an element.
Background-repeat By default, the image is repeated so it covers the entire element.
Repeats an image both horizontally and vertically, depend on the size
Background-attachments of image that will cover the whole screen.
Value:
repeat-x: Image repeat horizontally
repeat-y: Image repeat vertically
no-repeat: Image appear once
To specifies whether the background image should scroll or be fixed.
Background- position To specify the position of the background image.
Background-color:
<html>
<head>
<style>
body {
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Light green background color!</p>
</body>
</html>
P a g e 83 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
Background-image
<html>
<head>
<style>
body {
background-image: url("abstract.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Image as background!</p>
</body>
</html
Output:
P a g e 84 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Background-repeat
<html>
<head>
<style>
body {
background-image: url("abstract.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Image as background! </p>
</body>
</html
Output:
body {
background-image: url("home.png");
background-repeat:repeat-x;
}
P a g e 85 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
body {
background-image: url("home.png");
background-repeat:repeat-y;
}
Output:
body {
background-image: url("home.png");
background-repeat:no-repeat;
}
P a g e 86 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
Background-attachments
The background image should be fixed:
body {
background-image: url("myhouse.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
The background image should be scroll:
body {
background-image: url("myhouse.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
P a g e 87 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Background- position
<html>
<head>
<style>
body {
background-image: url("myhouse.png");
background-repeat:no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>Hello World! </h1>
</body>
</html>
Output:
P a g e 88 | 118
Fundamentals of Web Design Technologies: HTML & CSS
b. Block properties
The properties define how the components (div, hyperlink, heading, etc.) are going to be placed
on the web page. This property is used as the default property of div. This property places the
div one after another vertically. The height and width of the div can be changed using the block
property if the width is not mentioned, then the div under block property will take up the width
of the container.
<html>
<head>
<style>
div.ex1 {display: none; border: 2px solid red;}
div.ex2 {display: inline; border: 2px solid red;}
div.ex3 {display: block; border: 2px solid red;}
div.ex4 {display: inline-block; border: 2px solid red;}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: none:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit.<div class="ex1"> Hello World
</div>Vestibulum volutpat tellus diam, consequat gravida
libero rhoncusut.</p>
<h2>display: inline:</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit.<div class="ex2"> Hello World
</div>Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut.</div>
<h2>display: block:</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit.<div class="ex3">
Hello World
</div>Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut.</div>
<h2>display: inline-block:</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit.<div class="ex4">
Hello World
</div>Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut. </div>
</body>
</html> P a g e 89 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
P a g e 90 | 118
Fundamentals of Web Design Technologies: HTML & CSS
c. Box model properties
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image below illustrates the box model:
Content Box Model
Padding
Border The content of the box, where text and images appear
Margin Clears an area around the content. The padding is transparent
A border that goes around the padding and content
Clears an area outside the border. The margin is transparent
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid blue;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<div>Web Design Technologies - Web development
technologies refer to the multitude of programming
languages and tools that are used to produce dynamic and
fully-featured websites and applications. </li>
</div>
</body>
</html>
P a g e 91 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
d. List properties
The CSS list properties allows to:
Property Description
List-style-type Specifies the type of list-item marker
Value: None-used to remove the markers/bullet
List-style-position Specifies the position of the list-item markers (bullet points)
List-style-image Specifies an image as the list-item marker
List-style Sets all the properties for a list in one declaration
P a g e 92 | 118
Fundamentals of Web Design Technologies: HTML & CSS
List-style-type: Output:
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ul>
<ul class="b">
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ol>
<ol class="d">
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ol>
</body>
</html>
P a g e 93 | 118
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
The Fundamentals of Web Design Technologies (Hypertext Markup Language and Cascading Style Sheet) covered in this book is designed as a reference or guideline for students. Besides, the book is to accommodate beginners about learning the concept of HTML and CSS programming. This book is the source of complete guidelines to the students to start creating the program using HTML and CSS. It is a complete blend of the basic concepts, programming syntax and example of code to obtain a firm grip on the topics needed to code HTML and CSS page. This educational book is one that you will enjoy picking up, reading, then referring back to. It will make you wish other technical topics were presented in such a simple, attractive and engaging way!
Discover the best professional documents and content resources in AnyFlip Document Base.
Search