Scribd
Upload
7 views

HTML and Css

The document is a course outline for a semester on HTML and CSS at Beder International University, detailing various chapters covering topics such as structure, text formatting, lists, links, and multimedia elements. It provides foundational knowledge on HTML elements, their usage, and how to create web pages. The content is structured into chapters, each focusing on different aspects of web development using HTML and CSS.

Uploaded by

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

HTML and Css

The document is a course outline for a semester on HTML and CSS at Beder International University, detailing various chapters covering topics such as structure, text formatting, lists, links, and multimedia elements. It provides foundational knowledge on HTML elements, their usage, and how to create web pages. The content is structured into chapters, each focusing on different aspects of web development using HTML and CSS.

Uploaded by

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

Beder international university

Faculty of Information and Communication


Technology
Htmland
Cascading Style Sheets
Semester: two

Academic Year: 2024/2025

1
Table of Content

1. Chapter Structure .......................................................... 3

2. Chapter text .................................................................... 7

3. Chapter lists .................................................................... 12

4. Chapter links ................................................................. 15

5. Chapter Image, Audio and videos ................................... 18

6. Chapter Table .................................................................. 24

7. Chapter Forms ................................................................. 28

8. Chapter Introduction to css ..............................................33

9. Chapter Types of style sheet ........................................... 35

10. Chapter Formatting and Layout ..................................... 38

11. Chapter Positioning ........................................................43

2
Chapter 1
Structure
Hypertext Markup Language (HTML) is the standard markup language for
creating web pages and web applications. With Cascading Style Sheets (CSS) .
Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of a
web page.
HTML can embed programs written in a scripting language such as JavaScript, which
affects the behavior and content of web pages. Inclusion of CSS defines the look and
layout of content. The World Wide Web Consortium (W3C), maintainer of both the
HTML and the CSS standards, has encouraged the use of CSS over explicit
presentational HTML since 1997.

HTML Elements and Tags


A tag is always enclosed in angle bracket
<>like <HTML>
HTML tags normally come in pairs like
<HTML> and </HTML> i.e.
Start tag (Opening Tag) = <HTML>
End tag (Close Tag) =</HTML>
Start and end tags are also called opening tags and closing tags
Opening Tag
Character

< P >
left-angle bracket
(less-than sign)
RIGHT -angle bracket
(MORE -than sign)

3
Body, Head & Title
<!DOCTYPE html>

The doctype is not actually a tag, but a declaration, telling the browser what
kind of html you are using. The doctype above declares HTML 5.

<html></html>

The <html> element defines the whole HTML document.

<head></head>

The <head> element contains special elements that instruct the browser
where to find stylesheets, provide meta info, and more.

<title></title>
The contents of the <title> element are either shown in the
top of the browser, above where you usually type in the URL of
the page you want to visit, or on the tab for that page (if your
browser uses tabs to allow you to view multiple pages at the same time).

<body></body>

The <body> element contains the document content (what is shown inside
the browser window).

4
HOW TO START

Write html code in notepad. Visual code &dream viewer


Save the file with (.Html)/(.Htm) extension.
View the page in any web browser viz. INTERNET EXPLORER,
NETSCAPE NAVIGATOR etc.
The purpose of a web browser (like internet explorer Google Chrome or
Firefox) is to read html documents and display them as web pages.
 Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
 Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

5
 Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm“ or "index.html“ ).

 Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the
file, or right-click - and choose "Open with").

The result will look much like this:

6
Chapter 2
Text
1. The Heading Element
HTML has six "levels" of headings:
<h1><h2><h3><h4><h5><h6>.
<h1> is used for main headings <h2> is used for subheadings
If there are further sections under the subheadings then the
<h3> element is used, and soon...

Browsers display the contents of headings at different sizes. The


contents of an <h1> element is the largest, and the contents of
an <h6> element is the smallest. The exact size at which each
browser shows the headings can vary slightly. Users can also
adjust the size of text in their browser. You will see how to
control the size of text, its color, and the fonts used when we
come to look at CSS.

Html Results

<h1>This is a Main Heading</h1>


<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>

7
1. Paragraphs
<p>
To create a paragraph, surround the words that make up the
paragraph with an opening <p> tag and closing </p> tag.
By default, a browser will show each paragraph on a new line
with some space between it and any subsequent paragraphs.

Html Result
<p>A paragraph consists of
one or more sentences that
form a self-contained unit of
discourse. The start of a
paragraph is indicated by a new
line. </p>
<p>Text is easier to understand
when it is split up into units of text.
For example, a book may have
chapters. Chapters can have
subheadings. Under each heading
there will be one or more
paragraphs. </p>

2. Bold text Format


By enclosing words in the tags <b> and </b>
we can make characters appear bold text.

Html Result
<b>This text is Bold</b>

3. Big text Format


By enclosing words in the tags <big> and </big>
we can make characters appear big text.

Html Result
<big>This text is big</big>
8
4. Emphasized text format
By enclosing words in the tags <em> and </em>
we can make characters appear Emphasized text.

Html Result
<em>This text is Emphasized</em>

5. Italic text Format


By enclosing words in the tags <italic> and </italic>
we can make characters appear italic text.

Html Result
<i>This text is Italic</i>

6. Small text format


By enclosing words in the tags <small> and </small>
we can make characters appear small text.

Html Result
<small>This text is Small</small>

9
8. Strong text format
By enclosing words in the tags <strong> and </strong>
we can make characters appear strong text.

Html Result
<strong>This text is Strong</strong>

9. Subscripted text format


By enclosing words in the tags <sub> and <sub>
we can make characters appear subscripted text.

Html Result
This is<sub> Subscript</sub>

7. Superscripted text format


By enclosing words in the tags <super> and </super>
we can make characters appear superscripted text.

Html Result
This is <sup>Superscript</sup>

10
8. Underline text format
By enclosing words in the tags <u> and </u>
we can make characters appear underlined text.

Html Result
<u>This text is Underline</u>

9. Strike text format


By enclosing words in the tags <strike> and </strike>
we can make characters appear strike text.
Html Result
<strike>This text is Strike</strike>

10. Line Break element


<br>
Stand-alone tag Called a void element in HTML5
Causes the next element or text to display on a new line.

11. Horizontal Rule element


<hr >
Stand-alone tag, Configures a horizontal line on the page
In HTML5, it should be used to indicate a thematic break at the paragraph
level.

11
Chapter 3
Lists

Lists provide methods to show item or element sequences in document content.


There are three main types of lists:-

1. Unordered lists: - unordered lists are bulleted.


2. Ordered lists: - Ordered lists are numbered.
3. Definition lists: - Used to create a definition list

1. Unordered lists
<ul>
The unordered list is created with the <ul> element.

<li>
Each item in the list is placed between an opening <li> tag and a closing </li>
tag. (The li stands for list item.)

Html Result
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Jones</li>
<li>Simth</li>
<li>Hayes</li>
<li>Jackson</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Jones</li>
<li>Smith</li>
<li>Hayes</li>

12
<li>Jackson</li>
</ul>
2. Ordered List
<ol>
Contains the ordered list type attribute determines numbering scheme of list
default is numerals.

<li>
Each item in the list is placed between an opening <li> tag and a closing </li>
tag. (The li stands for list item.)

• The TYPE attribute has the following value like:-


– TYPE = "1" (Arabic numbers)
– TYPE = "a" (Lowercase alphanumeric)
– TYPE = "A" (Uppercase alphanumeric)
– TYPE = "i" (Lowercase Roman numbers)
– TYPE = "I" (Uppercase Roman numbers)

Html Result
<h4>Numbered list:</h4>
<ol>
<li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Jones</li>
<li>Smith</li>
<li>Hayes</li>

13
<li>Jackson</li></ol>

3. Definition lists
⚫ Uses:
⚫ Display a list of terms and descriptions
⚫ Display a list of FAQ and answers
⚫ The Description List element
⚫ <dl>
The definition list is created with he <dl> element and usually consists
of a series of terms and their definitions. Inside the <dl> element you
will usually see pairs of <dt> and <dd> elements.

⚫ <dt>
This is used to contain the term being defined (the definition term).
⚫ <dd>
This is used to contain the definition. Sometimes you might see a list
where there are two terms used for the same definition or two different
definitions for the same term.
Html Result
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission
Control Protocol</dd>
</dl>

14
Chapter 4
Links

Links are created using the <a> element. Users can click on anything
between the opening <a> tag and the closing </a> tag. You specify which
page you want to link to using the href attribute.

You will commonly come across the following types of links:


 Links from one website to another
 Links from one page to another on the same website
 Links from one part of a web page to another part of the same page
 Links that open in a new browser window
 Links that start up your email program and address a new email to
someone.

This is the page the This is the text the


link takes you to user clicks on

<a href="http://www.Horseedmedia.net">Horseed</a>

Opening link tag Closing link tag

The text between the opening <a> tag and closing </a> tag
is known as link text. Where possible, your link text should
explain where visitors will be taken if they click on it (rather
than just saying "click here"). Below you can see the link to
Horseed that was created on the previous lesson.

15
• More on links
 Absolute link
– Link to other websites
<a href="http://yahoo.com">Yahoo</a>
 Relative link
– Link to pages on your own site
– Relative to the current page
<a href="index.html">Home</a>

HTML <link> target Attribute


• The target attribute on the anchor element opens a link in a new
browser window or new browser tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>

Value Description

_blank Load in a new window

_self Load in the same frame as it was clicked

_parent Load in the parent frameset

_top Load in the full body of the window

If you want a link to open in a new window, you can use the target attribute
on the opening <a> tag. The value of this attribute should be _blank.
Html Result

<a href="http://www.horseedmedia.net" target="_blank">

Somali news Website</a> (opens in new window)

16
Email Links

mailto:
To create a link that starts up the user's email program and
addresses an email to a specified email address, you use the <a>
element. However, this time the value of the href attribute starts
with mailto: and is followed by the email address you want the
email to be sent to.

Html Result
<a href="mailto:[email protected]">
Linking to Fragment Identifiers

⚫ A link to a part of a web page


⚫ Also called named fragments, fragment ids
Two components:
1. The element that identifies the named fragment of a Web page.
This requires the id attribute.
<div id="top"> ….. </div>
2. The anchor tag that links to the named fragment of a Web
page. This uses the href attribute.
<a href="#top">Back to Top</a>

17
Chapter 5
Images, Audio and Videos

1. Image
• To display an image on a page, you need to use the src attribute.
• src stands for "source". The value of the src attribute is the URL of the
image you want to display on your page.
• It is empty tag.
<IMG SRC ="url">
<IMG SRC="picture.gif">
<IMG SRC="picture.gif" Height="30" width="50">

Image attributes - <img> tag

Defines an image
<img>
<Src> display an image on a page, Src stands for "source".
<Alt> Define "alternate text" for an image
<Width> Defines the width of the image
<Height>
Defines the height of the image
<Border>
Defines border
<Align>
Align an image within the text
<background>
Image use background of site.

18
Code & Result of the Image
Align an image
Html Result
<p><img src="after/wagad.jpg" align="left"
width="48" height="48"> </p>
<p><img src="after/wagad2.jpg" align="right"
width="48" height="48"></p>

Image size
Html Result
<html><body>
<p><img src="after/wagad.jpg "
align="bottom" width="20" height="20"> </p>
<p><img src =" after/wagad.jpg"
align="middle" width="40" height="40"></p>
<p><img src ="after/wagad.jpg "
align="top" width="60" height="60"></p>
<p><img src =" after/wagad.jpg "
width="80" height="80"> </p>
<p><img src =" after/wagad.jpg"
width="100" height="100"> </p></body></html>

19
Image with text
Html Result
<html>
<body>
<p>An image
<img src="after/wagad2.jpg" align="bottom"
width="48" height="48"> in the text</p>
<p>An image
<img src ="after/wagad2.jpg" align="middle"
width="48" height="48"> in the text</p>
<p>An image
<img src ="after/wagad2.jpg" align="top"
width="48" height="48"> in the text</p>
<p>Note that bottom alignment is the default alignment</p>
<p><img src ="after/wagad2.jpg" width="48" height="48">
An image before the text</p>
<p>An image after the text
<img src ="after/wagad2.jpg" width="48" height="48"> </p>
</body></html>

Background Image
Html Result
<HTML>
<body background="after/wagad2.jpg" text="white">
<br><br><br>
<h2> Background Image!</h2>
</body></HTML>

20
2. Audio

HTML5 introduced the <audio> element to include audio files in your pages.
As with HTML5 video, browsers expect different formats for the audio. The
<audio> element has a number of attributes which allow you to control audio
playback:

Src
This attribute specifies the path to the audio file.

Controls
This attribute indicates whether the player should display controls. If you do
not use this attribute, no controls will be shown by default.

Autoplay
The presence of this attribute indicates that the audio should start playing
automatically. (It is considered better practice to let visitors choose to play
audio.)
Html Result
<html>
<body>
<audio controls>
<source src="gabay.mp3" type="audio/mpeg">
</audio>
</body></html>

21
3. Videos

<video>
The <video> element has a number of attributes which allow you to control
video playback:

<source>
To specify the location of the file to be played, you can use the <source>
element inside the <video> element. (This should replace the src attribute on
the opening <video> tag.)

Src
This attribute specifies the path to the video

Poster
This attribute allows you to specify an image to show while the video is
downloading or until the user tells the video to play.

Width, height
These attributes specify the size of the player in pixels.

Controls
When used, this attribute indicates that the browser should supply its own
controls for playback.

Autoplay
When used, this attribute specifies that the file should play automatically.

22
The HTML <video> Element
To show a video in HTML, use the <video> element:
Html Result
<html>
<body>
<video width="320" height="240" controls>
<source src="cashar.mp4" type="video/mp4">
<source src="cashar.ogg" type="video/ogg">
</video>
</body>
</html>

HTML YouTube Videos


Html Result
<html>
<body>
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tkF4b-2EYuE">
</iframe>
</body>
</html>

23
Chapter 6
Table
<table>

The <table> element is used to create a table. The contents of the table are
written out row by row.

<tr>
You indicate the start of each row using the opening <tr> tag. (The tr stands
for table row.) It is followed by one or more <td> elements (one for each cell
in that row). At the end of the row you use a closing </tr> tag.

<th>
The <th> element is used just like the <td> element but its purpose is to
represent the heading for either a column or a row. (The th stands for table
heading.)
<td>
Each cell of a table is represented using a <td> element. (The td stands for
table data.) At the end of each cell you use a closing </td> tag.

HTML Table Tag

<table> used to create table table is divided into rows


<tr> each row is divided into data cells
<td> Headings in a table
<th> caption to the table
<Caption>
Defines groups of table columns
<colgroup>
Defines the attribute values for one or more columns
<col>
in a table
<thead>
Defines a table head
<tbody>
<tfoot> Defines a table body
24
D
e
f
i
n
e
s

t
a
b
l
e

f
o
o
t
e
r

25
<Cellspacing> amount of space between table cells.
<Cellpadding> space around the edges of each cell No of
<Colspan> column working with will span
<rowspan> No of rows working with will span
<Border> attribute takes a number

Code & Result of the Table

Html Result

<html>
<body>
<h3>Table without border</h3>
<table>
<tr> <td>MILK</td>
<td>TEA</td>
<td>COFFEE</td> </tr>
<tr> <td>400</td>
<td>500</td>
<td>600</td> </tr>
</table>
</body>
</html>

Horizontal Header
Html Result
<html><body>
<h4>Horizontal Header:</h4>
<table border="1">
<tr> <th>Name</th>
<th>Loan No</th>
<th>Amount</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>5000</td></tr> </table>
</body></html>

26
Vertical Header
Html Result
< html><body>
<h4>Vertical Header:</h4>
<table border="5">
<tr> <th>Name</th>
<td>Jones</td> </tr>
<tr> <th>Loan No</th>
<td>L-1</td> </tr>
<tr> <th>Amount</th>
<td>5000</td></tr> </table>
</body></html>

Table Code with Colspan & Rowspan


Html Result
Rowspan
<html><body>
<h4>Cell that spans two columns:</h4>
<table border="4">
<tr> <th>Name</th>
<th colspan="2">Loan No</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>L-2</td> </tr> </table>
<h4>Cell that spans two rows:</h4>
<table border="8">
<tr> <th>Name</th>
<td>Jones</td></tr><tr>
<th rowspan="2">Loan No</th>
<td>L-1</td></tr><tr>
<td>L-2</td></tr></table>
</body></html>

27
Table Code with Caption & ColSpacing
Html Result
<html>
<body>
<table border="1">
<caption>My Caption</caption>
<tr> <td>Milk</td>
<td>Tea</td></tr>
<tr> <td></td>
<td>Coffee</td> </tr></table>
</body></html>
Cellpadding,Image & Backcolor Code
Html Result
<html><body>
<h3>Without cellpadding:</h3>
<table border="2" bgcolor="green">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
<h4>With cellpadding:</h4>
<table border="8"cellpadding="10"
background="wagad1.jpg ">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
</body></html>

28
Chapter 7
Forms
1. <form>
Form controls live inside a <form> element. This element should always carry
the action attribute and will usually have a method and id attribute.

action
Every <form> element requires an action attribute. Its value is the URL for the
page on the server that will receive the information in the form when it
is submitted.
method
Forms can be sent using one of two methods: get or post.

2. <input>
The <input> element is used to create several different form
controls. The value of the type attribute determines what kind
of input they will be creating.

Name
When users enter information into a form, the server needs to know which form
control each piece of data was entered into. (For example, in a login form, the
server needs to know what has been entered as the username and what has been
given as the password.) Therefore, each form control requires a name attribute.
The value of this attribute identifies the form control and is
sent along with the information they enter to the server
Checked
The checked attribute can be used to indicate which value (if any) should be
selected when the page loads. The value of this attribute is checked.
.
Type="password"
When the type attribute has a value of password it creates a text box that acts
just like a single-line text input, except the characters are blocked out. They are
hidden in this way so that if someone is looking over the user's shoulder, they
cannot see sensitive data such as passwords.

29
Type="text"
When the type attribute has a value of text, it creates a single-line text input.

Type="radio"
Radio buttons allow users to pick just one of a number of options.

Type="checkbox"
Checkboxes allow users to select (and unselect) one or more options in
answer to a question.

Type="file"
This type of input creates a box that looks like a text input followed by
a browse button. When the user clicks on the browse button, a window opens
up that allows them to select a file from their computer to be uploaded to the
website.

Type="submit"
The submit button is used to send a form to the server.

Type=”Email”
When the type attribute has a value of email, it creates a single line text
input.

3. <textarea>
The <textarea> element is used to create a mutli-line text input. Unlike other
input elements this is not an empty element. It should therefore have an
opening and a closing tag. Any text that appears between the opening
<textarea> and closing </textarea> tags will appear in the text box when the
page loads.

4. <select>
A drop down list box (also known as a select box) allows users to select one
option from a drop down list. The <select> element is used to create a drop
down list box. It contains two or more <option> elements.

30
Form Structure
There are several types of form controls that you can use to collect information
from visitors to your site.

ADDING TEXT:
Password input Text area (multi-line)
Text input (single-line) For longer areas of text,
Used for a single line of text Like a single line text box
but it masks the characters such as messages and
such as email addresses and
entered. comments.
names.

Making Choices:

Radio buttons Checkboxes Drop-down boxes


For use when a user must select When a user can select and When a user must pick
one of a number of options. unselect one or more options. one of a number of options
from a list.

Submitting Forms: Uploading Files:

Submit buttons Image buttons File upload


Similar to submit buttons Allows users to upload files
To submit data from your form
But they allow you to use (e.g. images) to a website.
to another web page
an image.

31
Code of the HTML Form
Html
<html><body><form>
<h1>Create a Internet Mail Account</h1>
First Name <input type="text" name="fname" size="30"><br><br>
Last Name <input type="text" name="lname" size="30"><br><br>
Email @mail.com<input type="email" name="email" size="20"><br><br>
Password <input type="password" name="password" size="20"><br><br>
<input type="radio" checked="checked" name="sex" value="male" /> Male<br><br>
<input type="radio" name="sex" value="female" /> Female
<p>Birthday <input type="text" name="birth" size="05">
<select size="1" name="select"> <option>-Select One-</option> <option>January</option>
<option>February</option> <option>March</option> </select>
<input type="text" name="year" size="10"></p> TypeYourself
<textarea rows="4" name="textarea" cols="20"></textarea>
<br><input type="submit" value="Sign Up" name="signup"> </form></body></html>

Result

32
<fieldset>
You can group related form controls together inside the <fieldset> element.
This is particularly helpful for longer forms. Most browsers will show the
fieldset with a line around the edge to show how they are related. The
appearance of these lines can be adjusted using CSS.

<legend>
The <legend> element can come directly after the opening <fieldset> tag and
contains a caption which helps identify the purpose of that group of form
controls.

Html Result
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" />
</label><br />
<label>Mobile:<br />
<input type="text" name="mobile" />
</label><br /> <label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
You have probably seen forms on the web that give users messages if the form
control has not been filled in correctly; this is known as form validation.

Html Result
<form action="http://www.example.com/login/"
method="post"> <label for="username">Username:</label>
<input type="text" name="username"
required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password"
required="required" /><input type="submit" value="Submit" /></form>

33
Chapter 8
Introduction to CSS
What Is CSS?

CSS stands for Cascading Style Sheets


were developed in 1994 as a way to separate style and formatting information from
the raw content of HTML pages. This provided developers with a new set of tools
that allowed them to have greater control over how their HTML documents were
formatted. It also gave them the ability to centralize where certain formatting
instructions are kept, giving them better maintainability of a large Web site.

CSS Syntax
selector/element {property: value;}
A CSS rule has two main parts: a selector, and one or more declarations (property
and value) as shown in the following diagram.

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.

34
CSS Selectors
1) Type selector 2) Id selector
3) Class selector 4) Group selector

Type Selector
It is used to apply the style using tag name. The type selector selects an element by
its type, it represents the element or HTML tag to style.
 Html tag
<p This is my introduction text</p>

 Css
H1 {font-size: 18px;}
P {color: blue;}
Id Selector
Matches an element whose id attribute has a value that matches the one specified
after the pound or hash symbol.
 Html
<p id=“intro”> This is my introduction text</p>
 Css
#intro {border-bottom: 2px dashed #fff;}

Class Selector
Matches an element whose class attribute has a value that matches the one
specified after the period (or full stop) symbol.

 Html

<p class="intro">This is my introduction text</p>

 Css
. intro {font-family: verdana, sans-serif; margin: 10px;}

Group Selector
• Multiple selectors can be grouped in a single style declaration by using,
h1, h2, h3, h4, h5, h6 {font-family: sans-serif;}

35
Chapter 9
Types of Style Sheets
There are three ways of inserting a style sheet:
1. In-line styles
2. Internal style sheets (embedded)
3. External style sheets (linked)

1. In-Line Styles
An in-line style is included with the tag it affects. The formatting or layout
instruction used is then limited to the contents of just that individual tag. To create
an in-line style, simply add the STYLE attribute right into the attribute list of the
tag. For example, take the following HTML document:

Example inline style:


<h1 style = "font-family: Arial; font-size: 24px; font-style : italic; text-align :
center;">
Inline style sheet</h1>

2. Internal Style Sheets


With internal style sheets all the formatting instructions are collected and placed at
the top of the HTML document. All instructions must be enclosed within the
<STYLE> tag.
• Syntax
Selector {style1: value1; style2: value2; etc.}
Example:
<style>
H1 {font-family: Arial; font-size: 24pt; font-style: italic; text-align: center;}
</style>

36
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.

Html
<html>
<head><title> Internal Style Sheets</title></head>
<style>
H1 { font-family : Arial; font-size : 24px; font-style : italic; text-align : center; }
P { font-family : Tahoma; font-size : 16px; }
LI { font-family : Tahoma; font-size : 16px; font-weight : bold; }
</style><body>
<h1>Internet style sheet</h1>
<p>Subjects:</p>
<ul><li>HTML</li>
<li style = "font-weight : normal;">CSS</li>
<li>BOOTSTRAP</li>
<li style = "font-weight : normal;">PHP</li></ul>
</body></html>

Result

37
3. External Style Sheets

Converting from an internal style sheet to an external style sheet is really a


simple task.
The term external comes from the fact that the information that is
normally between the opening and closing <STYLE> tags is now stored in
an external text file.
Cutting out all the text between the <STYLE> tags and pasting it into a
separate file is all that is needed to create the external file.
External Style Sheet should have extension .css
and it is linked with the web documents.
<LINK> tag inside the <HEAD> tag.
Syntax:

<LINK rel = "stylesheet" href = "location" type = "text/css">

Html Result
<html>
<head><title> Internal Style Sheets</title>
<link rel = "stylesheet"
href = "style.css" type = "text/css">
</head>
<style>
</style><body>
<h1>Internet style sheet</h1>
<p>Subjects:</p>
<ul><li>HTML</li>
<li style = "font-weight: normal;">CSS</li>
<li>BOOTSTRAP</li>
<li style = "font-weight: normal;">PHP</li></ul>
</body></html>

38
Chapter 10
Formatting and Layout
In this chapter you will be introduced to many of the properties (attributes) that
apply to the formatting and layout of your HTML document.
The properties have been broken down into the following categories:
 Font attributes
 Color attributes
 Links attributes
 Background attributes
 Margins and Alignment

1. Font attributes
CSS offers many attributes to replace and extend many of the font and text
formatting tags that exist within the HTML markup language. Listed below are
some most common font-formatting attributes of CSS:

• font-family e.g. H1 { font-family : Comic Sans MS; }


• font-style e.g. P { font-style : italic; }
• font-weight e.g. LI { font-weight : bold; }
• font-size e.g. P { font-size : large; }
• text-align e.g. H1{ text-align: center; } H2{ text-align: right; } H3{
text-align: left; } P{ text-align: justify; }
• letter-spacing e.g. P { letter-spacing: 10px; }
• text-decoration e.g. LI { text-decoration : none; }
• text-transform e.g. P { text-transform: uppercase;}
• first-letter e.g. P:first-letter {font-size: 18pt; color: #ff0000;}

39
2. Color Attributes

Attribute Description

Color Sets the foreground color for the content of


a tag.
background-color Sets the background color for the content of
a tag.

border-color Sets the border color for the content of a


tag.

Colors
Aqua Gray Navy Silver
Black Green Olive Teal
Blue Lime Purple White

Fuchsia Maroon Red Yellow

Example: BODY { background-color : gray; color : white;}

40
Hexadecimal color
Color Hexadecimal Value
Red #FF0000
Green #00FF00
Blue #0000FF
Gray #808080
Yellow #FFFF00
Fuchsia #FF00FF
Cyan #00FFFF
Black #000000
White #FFFFFF

Example: BODY { background-color : #00FFFF; }

RGB Colors

rgb(255, 0, 0) red
rgb(0, 255, 0) green
rgb(0, 0, 255) blue
Example
body{
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
}

41
4. Link attributes

The four links states are:


 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user moves the mouse pointer over it
 a:active - a link the moment it is clicked.

Example of css link style

a:link {
color: blue; background-color: blue; text-decoration: none;
}
a:visited {
color: white; background-color: red; text-decoration: none;
}
a:hover {
background-color:green; text-decoration: underline;
}
a:active {
color: yellow; background-color: transparent;
}

4. Background attributes

Background Color
Sets the background color for the element.
Example

Body { background-color: #b0c4de; }


H1 { background-color: #6495ed; }
P { background-color: #e0ffff; border-style: solid;
border-color: darkred; }
TABLE { background-color: #b0c4de; }

42
Background Image

BODY { background-image: url(“wagad.jpg"); }

Background repeater

BODY {
background-image: url(“wagad.jpg");
background-repeat: repeat-x;
/* repeat-y; or no-repeat; */
}

5. Alignment

H1 { text-align: center; }
H2 { text-align: right; }
H3 { text-align: left; }
P { text-align: justify; }

43
Chapter 11
Positioning
The CSS positioning properties allow you to position an element. It can also
place an element behind another, and specify what should happen when an
element's content is too big. Elements can be positioned using the top,
bottom, left, and right properties. However, these properties will not work
unless the position property is set first. They also work differently depending
on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element
is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right
properties.

Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:
Example

P . pos_fixed {position: fixed; top:30px; right:5px;}

44
Relative Positioning
A relative positioned element is positioned relative to its normal position.
Example

h2.pos_left { position: relative; left:-20px; } h2.pos_right {


position: relative; left:20px; }

Absolute Positioning
An absolute position element is positioned relative to the first parent element
that has a position other than static. If no such element is found, the
containing block is :
Example

h2 { position: absolute; left:100px; top:150px; }

References
1. http://www.w3c.org
2. http://www.w3schools.com.
3. John Wiley & Sons, 2011, HTML & CSS Design and build Websites

45

You might also like