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

Lo1 Web Page Creations Using Css and HTML

Uploaded by

Tamrat Gashaw
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Lo1 Web Page Creations Using Css and HTML

Uploaded by

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

UC5: Developing Cascading Style Sheets

LO1: WEB PAGE CREATIONS USING CSS AND HTML


This unit is developed to provide you the necessary information regarding the following content
coverage and topics:

 CSS Introduction
 Style elements of a web page
 Page layout creation with CSS
 Positioning document elements with CSS
 Style sheets application on multiple pages on a website
 Web pages creation for varied screen resolutions
 Application layering for the Desired Design
This unit will also assist you to attain the learning outcomes stated in the cover page.
Specifically, upon completion of this learning guide, you will be able to:
 Understand the fundamentals of CSS and essential design principles
 Understand how to gather user preferences and requirements for effective styling
 Apply learned principles to develop CSS that aligns with user preferences
 follow principles of layout design using CSS
 apply methods of positioning and arrange document elements
 explain concept of style sheets and their application across multiple pages
 solve challenges of designing for different screen sizes
 Explore techniques for handling browser-specific styling challenges
 Emphasize the importance of adhering to industry standards in CSS
 Address browser-specific differences to enhance website accessibility

Page | 1
CSS Introduction
CSS is the language we use to style a Web page.

What is CSS?
 CSS stands for Cascading Style Sheets

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

media

 CSS saves a lot of work. It can control the layout of multiple web pages all at once

 External stylesheets are stored in CSS files

1.1. Style elements of a web page


 CSS Syntax
A CSS comprises of style rules:

 That are interpreted by the browser and

 Then applied to the corresponding elements in your document.

A style rule is made of three parts

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


Example: <h1> or <table> etc.

Page | 2
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.
Property − A property is a type of attribute of HTML tag.

Put simply, all the HTML attributes are converted into CSS properties.

They could be color, border etc.

Value − Values are assigned to properties.

For example, color property can have value either red or #F1F1F1 etc.

Fig: 2.1. Some CSS styles

 Add CSS to a Webpage


There are four ways to associate styles with your HTML document. Most commonly used methods are

inline CSS and External CSS.

A) Inline CSS - The style Attribute


You can use style attribute of any HTML element to define style rules. These rules will be

applied to that element only.

<element style = "...style rules....">

<html>

<head>

Page | 3
</head>

<body>

<h1 style = "color:#36C;">

This is inline CSS

</h1>

</body>

</html>

B) Embedded CSS(Internal) - The <style>


Element
You can put your CSS rules into an HTML document using the <style> element. This tag is

placed inside the <head>...</head> tags.

<html>

<head>

<style type = "text/css" media = "all">

body { background-color: linen;}

</style>

</head>

<body>

</body>

</html>

Page | 4
C) External CSS - The <link> Element
An external style sheet is a separate text file with .css extension. You define all the Style rules

within this text file and then you can include this file in any HTML document using <link>

element.

<head>

<link type = "text/css" href = "..." media = "..." />

</head>

D) Imported CSS - @import Rule


@import is used to import an external stylesheet in a manner similar to the <link> element.

Here is the generic syntax of @import rule.

<head>

@import "URL";

@import url("URL");

</head>

CSS Rules Overriding


We have discussed four ways to include style sheet rules in an HTML document.

Here is the rule to override any Style Sheet Rule.

Any inline style sheet takes highest priority.

So, it will override any rule defined in <style>...</style> tags or rules defined in any external

style sheet file.

Page | 5
Any rule defined in <style>...</style> tags will override rules defined in any external style sheet

file.

Any rule defined in external style sheet file takes lowest priority, and rules defined in this file

will be applied only when above two rules are not applicable.

Fig: 2.2. Cascading Order (Precedence)

 CSS Comments
Many times, you may need to put additional comments in your stylesheet blocks. So, it is very

easy to comment any part in style sheet.

You can simple put your comments inside /*.....this is a comment in style sheet.....*/.

/* This is a single-line comment */

/* This is a

multi-line

comment */

Page | 6
 The Type Selectors
 The Element Selectors
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text
color:

p {
text-align: center;
color: red;
}
 The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having

that id will be formatted according to the defined rule.

#black {color: #000000; }

 The Class Selectors


You can define style rules based on the class attribute of the elements.

All the elements having that class will be formatted according to the defined rule.

.black {color: #000000; }

 Grouping Selectors
The grouping selector selects all the HTML elements with the same style definitions.

Example
In this example we have grouped the selectors from the code above:

Page | 7
h1, h2, p {
text-align: center;
color: red;
}
 The Universal Selectors
Is used to select and apply styles to all elements on a web page.

* { color: #000000; }

 The Descendant Selectors


Suppose you want to apply a style rule to a particular element only when it lies inside a

particular element.

ul em {color: #000000;}

 The Child Selectors(>)


You have seen the descendant selectors. There is one more type of selector, which is very similar

to descendants but have different functionality. Consider the following example −

body > p {color: #000000; }

 General Sibling Selector (~)


The general sibling selector selects all elements that are next siblings of a specified element.

<section>~ p {color: #000000; }

 Adjacent Sibling Selector (+)


The adjacent sibling selector is used to select an element that is directly after another specific

element.

H2+P {color: #ff0000; }

Page | 8
 CSS – Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the

foreground of an element (i.e. its text) or else for the background of the element. They can also

be used to affect the color of borders and other decorative effects.

Named Colors
A CSS named color is the name of a color, such as red, blue, black, or light-green.

RGB Hexadecimal Colors


A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red

value, the next two are a green value (GG), and the last are the blue value (BB).

Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples

of hexadecimal notation.

border: 1px solid #ff0099;

RGB Values
This color value is specified using the rgb( ) property.

It takes three values, one each for red, green, and blue.

The value can be an integer between 0 and 255 or a percentage.

Color:RGB(20,50,255)

Page | 9
 HSL Values
This color value is specified using the HSL() function.

HSL stands for hue, saturation and lightness.

Hue is represented in degrees (0-360), saturation and lightness are represented as

percentages (0% - 100%).

Color:hsl(0,0%,50%)

 CSS – Backgrounds
This section teaches you how to set backgrounds of various HTML elements. You can set the

following background properties of an element

The background-color property is used to set the background color of an element.

The background-image property is used to set the background image of an element.

The background-repeat property is used to control the repetition of an image in the

background.

The background-position property is used to control the position of an image in the

background.

The background-attachment property is used to control the scrolling of an image in the

background.

The background property is used as a shorthand to specify a number of other background

properties.

Page | 10
 CSS – Fonts
The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique.

The font-variant property is used to create a small-caps effect.

The font-weight property is used to increase or decrease how bold or light a font appears.

The font-size property is used to increase or decrease the size of a font.

The font property is used as shorthand to specify a number of other font properties.

 HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for

processingThe

<form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>

/*

form elements

*/

</form>

The <form> element is a container for different types of input elements, such as: text fields,

checkboxes, radio buttons, submit buttons, etc.

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.

Page | 11
examples:

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 choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

 Text Fields

The <input type="text"> defines a single-line input field for text input.

Example

A form with input fields for text:

<html>

<body>

<h2>Text input fields</h2>

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

</body>

</html>

Page | 12
 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 focuses on the input element.

 Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

Page | 13
<label for="javascript">JavaScript</label>

</form>

</body>

</html>

 Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

A form with checkboxes:

<!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">

Page | 14
</form>

</body>

</html>

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

Example

A form with a submit button:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">

<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"><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>

Page | 15
</body>

</html>

 CSS – Units
Values and units, in CSS, are significant as they determine the size, proportions, and positioning

A) Absolute Length Units


These units are categorized as fixed-length units, which means that lengths specified with

absolute units maintain an exact, unchanged size on the screen.

Example:

Unit Description Equivalent value Example

px Pixels 1px = 1/96th of 1in font-size: 15px;

B) Relative Length Units


Are relative to something else, perhaps the size of the parent element's font, or the size of the

viewport.

Table:2.1. Relative Length Units

Unit Description Example

rem Relative to font-size of the root element. font-size:

2rem;

vh It is relative to the height of the viewport. 1vh = font-size:

Page | 16
1% or 1/100 of the height of the viewport. 4vh;

vw It is relative to the width of the viewport. 1vw = width:

1% or 1/100 of the width of viewport. 4vw;

vmin It is relative to the smaller dimension of the width:

viewport. 1vmin = 1% or 1/100 of the viewport's 4vmin;

smaller dimension.

 HTML Div Element


The <div> element is used as a container for other HTML elements.

The <div> element is by default a block element, meaning that it takes all available

width, and comes with line breaks before and after.

Example

A <div> element takes up all available width:

<!DOCTYPE html>

<html>

<style>

div { background-color: #FFF4A3;}

</style>

<body>

<h1>HTML DIV Example</h1>

Lorem Ipsum <div>I am a div</div> dolor sitamet.

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>
Page | 17
</html>

Example2

<!DOCTYPE html>

<html>

<style>

div { background-color: #FFF4A3;}

</style>

<body>

<h1>HTML DIV Example</h1>

<div>

<h2>London</h2>

<p>London is the capital city of England.</p>

<p>London has over 13 million inhabitants.</p>

</div>

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>

</html>

 Center align a <div> element


If you have a <div> element that is not 100% wide, and you want to center-align it, set

the CSS margin property to auto.

<style>

div {width:300px; margin:auto;}

</style>

Page | 18
 Multiple <div> elements
You can have many <div> containers on the same page.

 Aligning <div> elements side by side


When building web pages, you often want to have two or more <div> elements side by

side, like this:

There are different methods for aligning elements side by side, all include some CSS

styling. We will look at the most common methods:

Float: The CSS float property is used for positioning and formatting content and allow

elements float next to each other instead of on top of each other.

Inline-block: If you change the <div> element's display property from block to inline-

block, the <div> elements will no longer add a line break before and after, and will be

displayed side by side instead of on top of each other.

Flex: The CSS Flexbox Layout Module was introduced to make it easier to design

flexible responsive layout structure without using float or positioning.

To make the CSS flex method work, surround the <div> elements with

another <div> element and give it the status as a flex container.

Grid: The CSS Grid Layout Module offers a grid-based layout system, with rows and

columns, making it easier to design web pages without having to use floats and

positioning.

Sounds almost the same as flex, but has the ability to define more than one row and

position each row individually.

Page | 19
The CSS grid method requires that you surround the <div> elements with

another <div> element and give the status as a grid container, and you must specify the

width of each column.

 HTML <fieldset> and <legend>Tag


The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

Example

Use CSS to style <fieldset> and <legend>:

<!DOCTYPE html>

<html>

<head>

<style>

fieldset { background-color: #eeeeee;}

legend { background-color: gray; color: white; padding: 5px 10px;}

input { margin: 5px;}

</style>

</head>

<body>

<h1>The fieldset element + CSS</h1>

<form action="/action_page.php">

<fieldset>

<legend>Personal-info:</legend>

<label for="fname">First name:</label>

Page | 20
<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"><br><br>

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday"><br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</body>

</html>

Output:

Page | 21
 CSS – Text
A text refers to a piece of written or printed information in the form of words or characters that

can be read and understood. Texts can include content such as books, articles, emails, messages,

web pages, etc.

 Text Color
Altering the color of the text can add visual interest or align with a specific design scheme.

The CSS color property is used to set the color of the text. The possible values for this property

are as follows:

 Text Alignment
The position or placement of text on a page is called its alignment. The text is aligned based on

the left and right margins of the page.

 Left: Aligned with the left-margin.

 Right: Aligned with the right-margin.

 Center: Aligned at the center of the page.

 Justify: Aligned with both the margins.

 Justify-all: Same as justify, making the last line justified as well.

 Text Direction

Page | 22
Text direction refers to the orientation of text characters within a document or element. It

determines whether text should be displayed from left to right (LTR) or right to left (RTL) based

on the writing system used.

 Text Decoration
The CSS text-decoration property helps in adding extra decoration to the text, such as, adding a

line (underline, strikethrough, overline) and color, style and thickness to the line.

 Text-decoration-line: Sets the type of decoration line (underline, strikethrough or

overline).

 Text-decoration-color: Sets the color to the text decoration.

 Text-decoration-style: Sets the style to the text decoration (dotted, dashed, solid,

wavy, double, etc.)

 Text-decoration-thickness: Sets the thickness to the text decoration.

 Text Emphasis
CSS provides a property to apply emphasis marks on a block of text using the property text-

emphasis.

These marks are typically used to highlight specific content or to indicate pronunciation or stress

in certain languages.

It allows the designer to apply emphasis to individual characters or phrase within a block of text.

It is a shorthand for text-emphasis-style and text-emphasis-color.

Page | 23
 Text Indentation
Indentation is the space between the margin and the first line of text. Proper indentation enhances

the readability and clarity of text on a page.

CSS also provides a property to set the text indentation and that is text-indent. The following

values can be passed to this property:

 Length: Any specific length {pixels (px), points (pt), ems (em), etc}. Default value is 0.

 Percentage (%): The value passed is in relation to the percentage of the width of the

parent element.

 Each-line: Affects the first line of a block of text along with each line after a forced line

break.

 Hanging: Indentation is inverted, except for the first line.

 Initial: Sets the text-indent to its default value.

 Inherit: Allows to inherit the text-indent value from its parent element.

 Text Letter Spacing


The CSS property letter-spacing is used to adjust the space between the letters of a text.

Following are the possible values that this property can have:

 Normal: Default value and represents the normal amount of space between letters.

 Length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.

 Initial: Sets the letter-spacing to its default value.

 Inherit: Allows to inherit the letter-spacing value from its parent element.

Page | 24
 Text Word Spacing
CSS provides property to adjust the spacing between the words in a piece of text, just like letter

spacing. The property to adjust the space between words is word-spacing.

This property can take any of the following values:

 Normal: Default value and represents the normal amount of space between words.

 Length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.

 Initial: Sets the word-spacing to its default value.

 Inherit: Allows to inherit the word-spacing value from its parent element.

 Text Shadow
The text-shadow property is used to add a shadow effect to text. It allows you to specify the

color, offset, blur-radius, and spread-radius of the shadow. Following is the syntax of text-

shadow:

/* offset-x | offset-y | blur-radius | color */

text-shadow: 1px 1px 2px black;

 Text Line Break


CSS provides property line-break that is useful in determining how to break lines in a block of

text.

 Text Word Break


The CSS word-break property in CSS is used to specify how words should be broken or

wrapped in case they exceed the available width of an element.

Page | 25
 Images
Images play an important role in any webpage. Though it is not recommended to include a lot of

images, but it is still important to use good images wherever required.

CSS plays a good role to control image display. You can set the following image properties

using CSS.

The border property is used to set the width of an image border.

The height property is used to set the height of an image.

The width property is used to set the width of an image.

The -moz-opacity property is used to set the opacity of an image.

 Links
In web development, a "link" generally refers to an HTML element that allows the user to

navigate from one web page to another or to another resource, such as a style sheet, an image, or

a script. The HTML <a> (anchor) element is the most common way to create links.

The :link signifies unvisited hyperlinks.

The :visited signifies visited hyperlinks.

The :hover signifies an element that currently has the user's mouse pointer hovering over it.

The :active signifies an element on which the user is currently clicking.

Usually, all these properties are kept in the header part of the HTML document.

Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be

effective. Also, a:active MUST come after a:hover

 Tables
Page | 26
A table is an HTML element used to display data in a structured format with rows and columns.

It is created using the <table> tag in HTML and can be styled using CSS properties.

Following is a simple HTML table which has been styled using CSS :

<html>

<head>

<style>

table {font-family: Arial, Helvetica, sans-serif;border-collapse: collapse; width:

100%;}

td, th {border: 1px solid #ddd; padding: 8px;}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {padding-top: 12px; padding-bottom: 12px;text-align: left; background-color:

#40a944; color: white;

</style>

</head>

<body>

<h1>CSS Styled Table</h1>

<table>

<tr>

<th>Name</th>

<th>Address</th>

Page | 27
<th>Country</th>

</tr>

<tr>

<td>Nuha Ali</td>

<td>My Home Bhooja</td>

<td>India</td>

</tr>

<tr>

<td>Zara Ali</td>

<td>Students Roosters</td>

<td>England</td>

</tr>

</table>

</body>

</html>

 Properties of a Table
You can set the following CSS properties of a table

The border-collapse specifies whether the browser should control the appearance of the

adjacent borders that touch each other or whether each cell should maintain its style.

The border-spacing specifies the width that should appear between table cells.

The caption-side specifies where the table caption should be displayed (top or bottom).

Page | 28
The empty-cells specifies whether the border should be shown if a cell is empty.

The table-layout allows browsers to speed up layout of a table by using the first width

properties it comes across for the rest of a column rather than having to load the whole table

before rendering it.

The width and height properties set the height and width of a table.

The text-align property sets the horizontal alignment of the text content within table cells.

The border property can be used to set border to table and its cells.

The background-color property can be applied to the table itself, the table cells, or table

rows.

The font-size, font-family, font-weight, font-color etc style the table font.

Collapse Table Border using CSS

The property border-collapse ensures that borders between table cells collapse into a single

border, creating a cleaner look. Property border-collapse can have values collapse or separate

(default).

 Borders
The border of an HTML element is simply one or more lines that surround the content and

padding of an element. Every border has three aspects: its width, or thickness; its style, or

appearance; and its color.

The CSS border properties allow you to specify how the border of the box representing an

element should look. There are three properties of a border

border-style - Specifies whether a border should be solid, dashed line, double line, or one of the

other possible values.

Page | 29
border-color - Specifies the color of a border. The default value is the foreground color of the

element and if element is blank, then color of the parent element

border-width - Specifies the width of a border. The default value is medium.

Example:
<p style="border-style: none;">No border.</p>

<p style="border-style: hidden;">Hidden border.</p>

<p style="border-style: dotted;">Dotted border.</p>

Rounded Borders
We can use border-radius property to add rounded borders to an element.

Syntax

P{ border: 2px solid #40a944; border-radius: 5px;}

Margins
The margin property is used to set the margin space around an element. Margins are the space

outside the border of an element. The margin property can be set for individual sides (top, right,

bottom, left) or as a shorthand property for all sides at once.

Margins - Single-Side Properties


CSS provides four separate properties to set margins for left, right, top and bottom for an

element.

margin-bottom, margin-top, margin-left and margin-right

Following example demonstrates how we can set different margins around h1 elements:

h1 {margin-top: 20px; margin-right:40px; margin-bottom:10px;margin-left:0px; background-

color: #eee;}

Page | 30
Margins - Set Three Values
We can set margin at three values as margin: 20px 40px 10px, in this case top margin will be

20px, right and left margins will be 40px and bottom margin will be 10px. Following is the

example. You should try to compare the output with previous example:

h1 {margin: 20px 40px 10px; background-color: #eee;}

Margins - Set Two Values:


We can set margin at two values as margin: 20px 40px, in this case top and bottom margins will

be 20px, right and left margins will be 40px.

h1 {margin: 20px 40px; background-color: #eee;}

We have seen that setting a single value for margin, applies margin equally to all the sides - top,

right, bottom and left. You can check very first example to understand this case.

Margins - Mix up Units


CSS allows to mix up the types of length value you use while specifying different margins in a

shorthand property.

CSS Negative Margins


CSS allows to specify negative margins for an element. This will cause the element’s box to

stick out of its parent or to overlap other elements.

Margins - Percentages
It is very much possible to set percentage values for the margins of an element. Percentage

margins values are computed in relation to the width of the parent element’s content area, so they

can change if the parent element’s width changes.

Page | 31
Margins - Inline Elements
Margins can also be applied to inline elements but top and bottom margins do not have

any effect on the line height of these nonreplaced elements and these margins are always

transparent.

Margins - Auto Value


In order to center an element inside its parent, use margin: 0 auto as shown in the following

example:

<style>

div {width:600px; border:1px dotted;}

h1 {margin:0 auto;}

</style>

 Lists
Lists are useful as they present the information in a structured and organized manner. Lists

improve the readability and comprehension of content on a web page. So, if the content is listed,

it is easy to follow.

Lists are commonly used to display items, steps, options, or any other type of related information

that should be presented sequentially or in a group.

Ordered List
Ordered lists are used when the items need to be presented in a specific order marked with

numbers or letters. Following is the syntax to create HTML ordered lists:

<ol>
Page | 32
<li>First</li>

<li>Second</li>

<li>Third</li>

</ol>

Unordered List
Unordered lists are used when the items need to be presented in a specific order marked with

simple bullets.

 CSS Lists - Properties


CSS provides a set of properties that can be applied to any list, which are as follows:

The list-style-type allows you to control the shape or appearance of the list markers (bullet

points).

The list-style-position allows to specify the position of the list-item markers.

The list-style-image specifies an image for the marker rather than a bullet point or number.

The list-style serves as shorthand property for to manage the markers.

CSS Lists - Marker Types


CSS allows you to control the shape of the list markers (bullet points).

The following example shows how CSS property list-style-type sets different markers for the

ordered and unordered lists.

The same property can be used for both ordered and unordered lists.

You can check CSS property list-style-type detail to check all the possible marker's types for the

lists.

Page | 33
CSS Lists - Image Marker
You might prefer to use an image as an item list marker. The CSS list-style-image property can

be used to to specify an image as an item list marker.

You can use your own bullet style. If no image is found, then default bullets are printed.

Following is an example to show the usage of list-style-image property.

ul {list-style-image: url('/images/icon-bullet.png');}

CSS Lists - Marker Position


The CSS list-style-position property indicates whether the marker should appear inside or

outside of the box containing the bullet points. It can have one of the following values −

none- No marker is displayed, and the list items are without any bullet points or numbers.

Inside- The marker is positioned inside the content flow, meaning it appears within the content

box of the list item.

Outside- The default value. The marker is positioned outside the content flow, appearing to the

left of the content box of the list item.

Inherit- is used to inherit the list-style-position value from its parent element.

Following is an example to show the usage of list-style-position property.

<style>

ul.a {list-style-position: outside;}

ul.b {list-style-position: inside;}

</style>

Lists - Controlled Counting

Page | 34
Some time we might want to count differently on an ordered list — e.g., starting from a number

other than 1, or counting backwards, or counting in steps of more than 1.

There are following three CSS attributes which helps in controlling the list numbering.

<start> - allows you to start the list counting from a number other than 1.

<reversed> - starts the list counting reverse or down instead of up.

Example:

<html>

<body>

<h2>CSS Lists - Controlled Counting</h2>

<h3>start attribute</h3>

<ol start="4">

<li>Java.</li>

<li>HTML.</li>

<li>CSS.</li>

<li>React.</li>

</ol>

<h3>reverse attribute</h3>

<ol reversed>

<li>Java.</li>

<li>HTML.</li>

<li>CSS.</li>

Page | 35
<li>React.</li>

</ol>

</body>

</html>

Lists - Colors
We can make lists look more stylish and colorful using CSS styling as demonstrated in the

following example. As we see any styling added to the <ul> or <ol> tag will affect the entire list,

whereas the addition to the individual <li> tag will affect only the items of the corresponding list.

Example:

ul li {background: olive; color:white; padding:10px; font-size:20px; margin:10px;}

 Paddings
The CSS padding property is used to specify the space between the content of an element and its

borders. This article will teach you CSS padding property and its constituent properties.

The value of CSS padding should be either a length, a percentage, or the word inherit. A padding

property does not allow negative values. If the value is inherit, it will have the same padding as

its parent element.

Example: h2{padding: 5px; background-color: #eee;}

CSS Paddings - Single-side Properties


CSS provides four separate properties to set padding for top, right, bottom, and left for an

element. These properties are:

padding-top,padding-right,padding-bottom and padding-left

Page | 36
Following example shows how different padding properties can be set around an h2 element.

h2 {padding-top: 20px; padding-right:40px;padding-bottom:10px; padding-left:0px;

background-color: #eee;

 Cursor
The CSS cursor property determines the appearance of the mouse cursor when hovering over an

element to which this property is applied. This property is only applicable in environments with

mouse and cursor functionality. It's main purpose is to improve usability by visually representing

certain functions.

Possible Cursor Values


The cursor property can have following values:

<url>: (optional) You have the flexibility to use a series of url() values separated by commas,

with each url() pointing to an image file.

<x> <y>: (optional) You have the option to specify x and y coordinates that define the hotspot of

the cursor and specify the exact position within the cursor image that the cursor points to.

<Keyword>:A keyword value is required that specifies either the cursor type to use or the

alternate cursor to use if none of the specified symbols can be loaded.

Keyword Based Cursor Values

The following table lists the available keywords.

Keyword Example Description

Auto The displayed cursor is determined by the user agent based

on the current context. This is the default property that the

browser uses to define the cursor.

Page | 37
default The default cursor, which varies depending on the

platform, is usually displayed as an arrow.

pointer The displayed cursor is pointer cursor, showing the cursor

serves as an indicator pointing to a hyperlink.

 Outlines
CSS defines a special sort of element decoration called an outline which is drawn outside the

element's border. CSS outlines are very similar to borders, but there are few major differences as

well

An outline does not take up space.

Outlines do not have to be rectangular.

Example: Following is rectangle having a black border of 5px and green outline of 30px.

This tutorial will teach us how to set different properties associated with outlines. CSS alows us

to control an outline width, its color, style etc.

Outline Color
The outline-color property is used to specify the color of the outline. Its value should either be a

color name, a hex color, or an RGB value, as with the color and border-color properties.

Name - Example red, blue or green

HEX - Example #ff0000

Page | 38
RGB - Example rgb(255,0,0)

HSL - Example hsl(0, 100%, 50%)

Example:

<p style = "outline-width:thick; outline-style:solid; outline-color:rgb(255,200,0);

padding:5px;">Outline color set with RGB code "rgb(255,200,0)".</p>

Outline Offset
The outline-offset property is used to specify the space between an outline and the border edge

of an element. The space between the outline and the element is transparent.

The following example show an outline 20px outside the border of the element:

The above example shows that the space between an element's border and its outline is

transparent.

Example:

<p style = "border:1px solid #000; outline:1px solid red; outline-

offset:20px;margin:25px">Outline offset 20px;</p>

 Outline Vs Border
The two obvious differences are that outlines cannot have a hidden style where as a borders can

be hidden second an outline can have auto style whereas border can't have it. Following table

illustrates more differences between outline and border:

Table: 2.2 outline and border comparison

Outline Border

Page | 39
Outline is a non-rectangular shape Border is a rectangular shape that is drawn

that surrounds an element, usually around the content of an element, can be solid,

with a solid color. dashed, or dotted, and can have different colors

and sizes.

It does not take up any space in the It affects the size and position of the element,

layout and does not affect the size or as it adds width to the element.

position of the element.

It is typically used to highlight or It can be used for various purposes, such as

emphasize an element, such as when separating elements, creating boxes, and

an element is focused or activated. adding visual emphasis.

It can be created using It can be created using the border property in

the outline property in CSS. CSS.

 The CSS Box Model


All HTML elements can be considered as boxes. In CSS, the term "box model" is used when

talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:

margins, borders, padding, and the actual content.

Fig: 2.2. Box model

Page | 40
 Height & Width (Dimension)
The dimensions of HTML elements is often specified with CSS width and height properties and

we can use these properties to set the dimension of the elements.

CSS also provides properties like max-width, min-width, max-height and min-height to set the

maximum/minimum width and height of an element.

The height and width properties allow you to set the height and width of an element. These

properties can hold following values:

length: The height and width of an element can be of any unit of length (px, pt, em, in, etc.)

percentage (%): The value can be passed as a percentage value, which is in percent of the

containing block.

auto: Browser calculates the height and width of the element. It is the default value.

initial: Sets the value of height and width to its default value.

inherit: The value of height and width is inherited from its parent value.

The height and width properties do not add anything to the layout of the element i.e they do not

include padding, margin or borders. They set the height and width of the area inside the padding,

border, and margin of the element.

Max-Height
CSS can limit the maximum height of an element using max-height property. This property

allows to specify maximum height of an element. The value of the max-height property can be:

none: No maximum height value is set. This is the default value.

length: Sets the maximum height in terms of length units (px, pt, em, in, etc.)

percentage (%): The value is relative to the percent of containing block.

Page | 41
initial: Sets the value of height and width to its default value.

inherit: The value is inherited from its parent value.

Min-height
CSS can limit the minimum height of an element using min-height property. This property

allows to specify minimum height of an element. It specifies the smallest height that an element

can have, ensuring that it will never shrink below that value. The value of the min-

height property can be:

length: Sets the minimum height in terms of length units (px, pt, em, in, etc.)

percentage (%): The value is relative to the percent of containing block.

initial: Sets the value of height and width to its default value.

inherit: The value is inherited from its parent value.

The minimum height will be applied, when the content is smaller than the minimum height. And

when the content is larger than the minimum height, the value of min-height has no effect on the

element.

Max-width
CSS can limit the maximum width of an element using max-width property. This property

allows to specify maximum width of an element. The value of the max-width property can be:

none: No maximum width value is set. This is the default value.

length: Sets the maximum width in terms of length units (px, pt, em, in, etc.)

percentage (%): The value is relative to the percent of containing block.

initial: Sets the value of height and width to its default value.

inherit: The value is inherited from its parent value.

Page | 42
The max-width value overrides the value of width property. If the content within the element is

larger than the specified max-width, it will automatically adjust the height of the element to

accommodate the content within the element. If the content within the element is smaller than the

specified max-width, the max-width property has no effect.

Min-width
CSS can limit the minimum width of an element using min-width property. This property allows

to specify minimum width of an element. It specifies the smallest width that an element can

have, ensuring that it will never shrink below that value. The value of the min-width property can

be:

 Length: Sets the minimum width in terms of length units (px, pt, em, in, etc.)

 Percentage (%): The value is relative to the percent of containing block.

 Initial: Sets the value of height and width to its default value.

 Inherit: The value is inherited from its parent value.

If the content with the element is larger than the min-width, the min-width property has no effect

but if the content with the element is smaller than the specified min-width, the minimum width

will be applied.

 Scrollbars
There may be a case when an element's content might be larger than the amount of space

allocated to it. For example, given width and height properties do not allow enough room to

accommodate the content of the element.

Page | 43
Table: 2.3. Scrol1bar values

Sr.No. Value & Description

1 Visible:Allows the content to overflow the borders of its containing element.

2 Hidden:The content of the nested element is simply cut off at the border of the

containing element and no scrollbars is visible.

3 Scroll: The size of the containing element does not change, but the scrollbars

are added to allow the user to scroll to see the content.

 Display
 Display:Inline
An element with a display property set to inline will not start on a new line and it will take up

the remaining/available screen width. It just takes up the space such an element would

normally take.Because of this, you can't set the width and height of an element that has a

display of inline, becuase it does not take up the whole screen width.

Some elements are inline by default, like <span>, <a>, <i>, and <img>.

 Display: block
An element that has the display property set to block starts on a new line and takes up the

available screen width.

You can specify the width and height properties for such elements. Examples of elements

that are at block-level by default are <div>, <section>, <p>, and lots more.

Inline Vs block Vs inline-block


Page | 44
Difference between display: inline, display: block and display: inline-block:

Table: 2.3. Inline Block and inline-block comparison

Inline block inline-block

The element is displayed on The element is displayed The element is displayed on

the same line. on a new line. the same line.

It does not take up the full It takes up the full width It does not take up the full

width of the container. of the container. width of the container.

It does not have a margin or It has a margin and It has a margin and padding

padding by default. padding by default. by default.

Following diagram shows the different layout behavior of inline, block, and inline-

block elements:

 Navigation Links Using Inline Block


The inline-block property is used to create horizontal navigation menus or lists, where each

navigation item is displayed as a block-level element, but remains inline with other items.

 Images And Text Using Inline Block


Page | 45
The inline-block property causes the image and span to be displayed on the same line, allowing

them to be aligned horizontally within the block.

Visibility
The CSS visibility property allows you to show or hide an element without changing the layout

of a document, while hidden elements take up space.

The visibility property can take any of the following values:

Visible − The element is visible.

Hidden − The element is hidden, but it still takes up space on the page.

Collapse − Remove table rows, columns, column groups, and row groups from a

table. collapse has the same meaning as hidden if it is used on non-table elements.

Initial − Sets the visibility of an element to its default value.

Inherit − Inherits the visibility property from its parent element

 Overflow
The overflow property determines how content which overflows its element's content area

should be handled.

Possible Values

Visible − Overflowing content should be displayed.

Hidden − Overflowing content should not be displayed.

Scroll − Overflowing content should not be displayed, but the user agent should provide

some means of accessing the hidden content (e.g., a set of scrollbars).

Page | 46
Auto − The behavior caused by this value is dependent on the browser.

 Resize Elements
CSS resize is a property that allows users to adjust the size of an element, either vertically,

horizontally, both, or none, based on the specified value.

Resize property adds a handle at the bottom-right corner of an element on a webpage. This

handle allows users to click and drag to change the size of an elements, making it larger or

smaller according to their preference.

None − No user-controllable method for resizing an element is possible. This is default

value.

Vertical − User can resize an element in the vertical direction.

Horizontal − User can resize an element in the horizontal direction.

Both − User can resize an element both horizontally and vertically.

Block − User can resize an element in the block direction (either horizontally or vertically,

depending on the writing-mode and direction value).

Inline − User can resize an element in the inline direction (either horizontally or vertically,

depending on the writing-mode and direction value).

 Quotes
The CSS quotes property sets how the browser should render quotation marks that are

automatically added to the HTML <q> element

Page | 47
 Hover
The CSS: hover pseudo-class is used to target an element when the user hovers over it with the

mouse cursor.

CSS Syntax

:hover{…}

 CSS Hover - Link Color Change


Following is an example of changing the background color of a link when mouse cursor comes

over it.

 Hover - Background Color Change


Here is an example of changing the background color of a button when mouse cursor comes over

it:

 Hover - Change Cursor Shape


Here is an example of changing the cursor shape when mouse cursor comes over the button:

 Hover - Change Border Shape


Here is an example, where border of the link is changing on hover:

 CSS - Opacity
The CSS opacity property controls the transparency of an element. Opacity determines how

much of a hidden element's content is visible.

Number − It represented as a decimal number from 0 to 1.


Page | 48
Percentage − It represented as a percentage from 0% to 100%.

Following table showing the different opacity values:

Table: 2.4. Opacity value

Value Description

0 The element is fully transparent and not visible.

0.5 The element is half transparent.

1 The element is fully opaque and visible.

 Navigation bar
A navigation bar is a section of a graphical user interface (GUI) that helps users navigate through

a website, app, or other software. It is essential for users to quickly and easily navigate to the

content they are looking for.

The navigation bar can be horizontal or vertical, that contains links to important pages or

features. Navbars can also contain other elements, such as the logo of the website or app, search

bar, or social media icons. Navbars can be styled using CSS to change their appearance.

 CSS Horizontal Navbar


Following example shows a horizontal navigation bar, which is the most common type of

navigation bar displayed across the top of a web page as shown below

<html>

<head>

<style>

Page | 49
ul {

background-color: #28bf17;

overflow: hidden;

list-style-type: none;

margin: 0;

padding: 0;

li {

float: left;

li a {

display: block;color: #f2f2f2;text-align: center;padding: 10px;text-decoration:

none;font-size: 17px;}

li a:hover {background-color: #dd9ede;color: black;}

.active-link {background-color: #f53319;color: white;}

</style>

</head>

<body>

<ul>

<li><a href="#" class="active-link">Tutorialspoint</a></li>

<li><a href="#">Home</a></li>

Page | 50
<li><a href="#">Articles</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">eBook</a></li>

</ul>

<h1>Welcome to TutorialsPoint</h1>

<h3>Simple Easy Learning at your fingertips</h3>

</body>

</html>

 CSS Vertical Navbar


A vertical navigation bar is also known as a sidebar menu. It is typically positioned on the left or

right side of the screen.

Example

<html>

<head>

<style>

ul {background-color: #28bf17;list-style-type: none;margin: 0;padding: 0;width:

200px;}

li {text-align: center;}

li a {display: block;color: #f2f2f2;text-align: center;padding: 10px;text-decoration:

none;font-size: 17px;}

Page | 51
li a:hover {background-color: #dd9ede;color: black;}

.active-link {background-color: #f53319;color: white;}

</style>

</head>

<body>

<ul>

<li><a href="#" class="active-link">Tutorialspoint</a></li>

<li><a href="#">Home</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">eBook</a></li>

</ul>

</body>

</html>

 CSS Dropdown Navbar


A dropdown navbar is a navigation bar with a drop-down menu that appears when a user hovers

over a link. Dropdown menus are a way to show a list of related items in a small space.

Example

<html>

Page | 52
<head>

<style>

.navbar {background-color: #28bf17;overflow: hidden;}

.navbar a {display: block;float: left;color: #f2f2f2;text-align: center;padding: 10px;

text-decoration: none;font-size: 15px;}

.navbar a:hover {background-color: #dd9ede;color: black;}

.active-link {background-color: #f53319;color: white;}

.dropdown {float: left;}

.dropdown .dropbtn {border: none;color: #f2f2f2;padding: 10px;background-color:

#28bf17;}

.dropdown-content {display: none;position: absolute;background-color: #c7385a;

min-width: 120px;}

.dropdown-content a {float: none;color: #f2f2f2;padding: 10px;display: block;

text-align: left;}

.dropdown-content a:hover {background-color: #dd9ede;color: black;}

.dropdown:hover .dropdown-content {display: block;}

</style>

</head>

<body>

<nav class="navbar">

<a href="#" class="active-link">Tutorialspoint</a>

Page | 53
<a href="#">Home</a>

<div class="dropdown">

<button class="dropbtn">Articles</button>

<div class="dropdown-content">

<a href="#">HTML</a>

<a href="#">CSS</a>

<a href="#">Bootstrap</a>

</div>

</div>

<a href="#">Courses</a>

<a href="#">eBook</a>

</nav>

<h1>Welcome to TutorialsPoint</h1>

<h3>Simple Easy Learning at your fingertips</h3>

</body>

</html>

 CSS Fixed Navbar


A fixed navbar is a navigation bar that sticks to the top of the screen when the user scrolls down

the page. To make a navbar fixed, you can use the position: fixed property.

Fixed Vertical Navbar

Page | 54
The following example demonstrates how the position: fixed property can be used to create a

fixed vertical navbar, which ensures that the navbar stays on the left side of the screen, even

when the user scrolls down the page.

<html>

<head>

<style>

ul {position: fixed;background-color: #28bf17;list-style-type: none;margin: 0;

padding: 0;width: 200px;height: 100%;}

li {text-align: center;border-bottom: 2px solid #f013c8;}

li a {display: block;color: #f2f2f2;text-align: center;padding: 10px;

text-decoration: none;font-size: 17px;}

li a:hover {background-color: #dd9ede;color: black;}

.active-link {background-color: #f53319;color: white;}

.heading {padding-top: 170px;text-align: center;background-color: #e6e451;

padding-bottom: 300px}

</style>

</head>

<body>

<ul>

<li><a href="#" class="active-link">Tutorialspoint</a></li>

<li><a href="#">Home</a></li>

Page | 55
<li><a href="#">Articles</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">eBook</a></li>

</ul>

<div class="heading">

<h1>Welcome to TutorialsPoint</h1>

<h2>Tutorialspoint CSS Fixed Vertical Navbar</h2>

<h3>Simple Easy Learning at your fingertips</h3>

</div>

</body>

</html>

 Image Gallery
CSS image gallery is a collection of images that is displayed using CSS. CSS can be used to

control the layout of the images, their size, spacing, and other visual properties.

CSS image galleries are commonly used on websites to display products, portfolios, or other

visual content in a visually appealing way.

The following example shows a simple image gallery layout that is displayed in a row −

<html>

<head>

<style>

Page | 56
.image-gallery {display: flex;flex-flow: row wrap;justify-content: space-between;

align-items: center;}

.image-gallery img {width: 25%;height: 250px;}

</style>

</head>

<body>

<div class="image-gallery">

<img src="images/red-flower.jpg" alt="Red Flower">

<img src="images/white-flower.jpg" alt="White Flower">

<img src="images/orange-flower.jpg" alt="Orange Flower">

</div>

</body>

</html>

 Multi Background
CSS Multi background property is used to add one or more images at a time without HTML

code, We can add images as per our requirement. A sample syntax of multi background images

is as follows.

#multibackground {

Page | 57
background-image: url(/css/images/logo.png), url(/css/images/border.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;

Table: 2.5. Background property values

Sr.No. Value & Description

1 Background:Used to setting all the background image properties in one

section

2 background-clip:Used to declare the painting area of the background

3 background-image:Used to specify the background image

4 background-origin:Used to specify position of the background images

5 background-size:Used to specify size of the background images

Example:

<html>

<head>

<style>

#multibackground {background-image: url(/css/images/logo.png),

url(/css/images/border.png);

background-position: left top, left top;

background-repeat: no-repeat, repeat;

Page | 58
padding: 75px;

</style>

</head>

<body>

<div id = "multibackground">

<h1>www.tmptc.com</h1>

<p>

Entoto Polytechnic College (EPTC) the former Taferi Mekonen School was

established in 1917 E.C as a primary school and worked as complementary school.

The college has today’s name and task starting from 1994 E.C. The college provides

vocational training in 11 occupational sectors namely: fine arts and aesthetic,

automotive, manufacturing, construction, electrical electronics, information and

communication technology, textile leather and garment, woodwork, business,

surveying, drafting, and urban and land, business, and urban agriculture. </p>

</div>

</body>

</html>

 Size of Multi background

Page | 59
Multi background property is accepted to add different sizes for different images.A sample

syntax is as shown below −

#multibackground {

background: url(/css/imalges/logo.png) left top no-repeat,

url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top

repeat;

background-size: 50px, 130px, auto;

As shown above an example, each image is having specific sizes as 50px, 130px and auto size.

Gradients
What is Gradients?

Gradients displays the combination of two or more colors.

Types of gradients

Linear Gradients(down/up/left/right/diagonally)

Radial Gradients

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.

Top to bottom

<html>

<head>

<style>

#grad1 {

Page | 60
height: 100px;

background: -webkit-linear-gradient(pink,green);

background: -o-linear-gradient(pink,green);

background: -moz-linear-gradient(pink,green);

background: linear-gradient(pink,green);

</style>

</head>

<body>

<div id = "grad1"></div>

</body>

</html>

Output:

Left to right-example

background: linear-gradient(to right, red , blue);

Page | 61
Diagonal:example

Diagonal starts at top left and right button.

background: -webkit-linear-gradient(left top, red , blue);

background: -o-linear-gradient(bottom right, red, blue);

Multi color

background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);

2.2. Page layout creation with CSS

2.2.1. CSS Website Layout


A website is often divided into headers, menus, content and a footer:

Page | 62
There are tons of different layout designs to choose from. However, the structure above, is one of

the most common, and we will take a closer look at it in this tutorial.

 Header
A header is usually located at the top of the website (or right below a top navigation menu). It

often contains a logo or the website name:

 Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:

The layout in this section, often depends on the target users. The most common layout is one (or

combining them) of the following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)

3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Page | 63
 Unequal Columns
The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main

content. The side content (if any) is often used as an alternative navigation or to specify

information relevant to the main content.

 Footer
The footer is placed at the bottom of your page. It often contains information like copyright and

contact info:

2.3. Positioning document elements with CSS

I. position: static
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned

according to the normal flow of the page:

Example

Page | 64
div. Static {

position: static;

border: 3px solid #73AD21;

II. Relative Positioning


An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it

to be adjusted away from its normal position. Other content will not be adjusted to fit into any

gap left by the element.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

Example

<html>

<head>

</head>

<body>

<div style = "position:relative; left:80px; top:2px; background-color:yellow;">

This div has relative positioning.

Page | 65
</div>

</body>

</html>

III. Absolute Positioning


An element with position: absolute; is positioned relative to the nearest positioned ancestor

(instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document

body, and moves along with page scrolling.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

NOTE − You can use bottom or right values as well in the same way as top and left.

Example

<html>

<head>

</head>

<body>

<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">

This div has absolute positioning.

</div>

Page | 66
</body>

</html>

IV. Fixed Positioning


An element with position: fixed; is positioned relative to the viewport, which means it always

stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are

used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

NOTE − you can use bottom or right values as well in the same way as top and left.

Example

<html>

<head>

</head>

<body>

<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">

This div has fixed positioning.

</div>

Page | 67
</body>

</html>

2.4. Style sheets application on multiple pages on a website

The <link> element can be used to include an external stylesheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You define all the Style rules

within this text file and then you can include this file in any HTML document using <link>

element.

Here is the generic syntax of including external CSS file

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

Imported CSS - @import Rule

@import is used to import an external stylesheet in a manner similar to the <link> element. Here

is the generic syntax of @import rule.

<head>

@import "URL";

</head>

Here URL is the URL of the style sheet file having style rules. You can use another syntax as

well –

<head>

@import url("URL");

</head>

Page | 68
Example

Following is the example showing you how to import a style sheet file into HTML document −

<head>

@import "mystyle.css";

</head>

2.5. Web pages creation for varied screen resolutions

2.5.1.Responsive Web Design

Responsive web design provides an optimal experience, easy reading and easy navigation with a

minimum of resizing on different devices such as desktops, mobiles and tabs).

Below image shows the responsive structure of web pages.

Fig: 2.3 Responsive Web Design

Page | 69
Flexible Grid

<html>

<head>

<style>

body {

font: 600 14px/24px "Open Sans",

"HelveticaNeue-Light",

"Helvetica Neue Light",

"Helvetica Neue",

Helvetica, Arial,

"Lucida Grande",

Sans-Serif;

h1 {

color: #9799a7;

font-size: 14px;

font-weight: bold;

margin-bottom: 6px;

.container:before, .container:after {

content: "";

Page | 70
display: table;

.container:after {

clear: both;

.container {

background: #eaeaed;

margin-bottom: 24px;

*zoom: 1;

.container-75 {

width: 75%;

.container-50 {

margin-bottom: 0;

width: 50%;

.container, section, aside {

border-radius: 6px;

section, aside {

Page | 71
background: #2db34a;

color: #fff;

margin: 1.858736059%;

padding: 20px 0;

text-align: center;

section {

float: left;

width: 63.197026%;

aside {

float: right;

width: 29.3680297%;

</style>

</head>

<body>

<h1>100% Wide Container</h1>

<div class = "container">

<section>Section</section>

<aside>Aside</aside>

Page | 72
</div>

<h1>75% Wide Container</h1>

<div class = "container container-75">

<section>Section</section>

<aside>Aside</aside>

</div>

<h1>50% Wide Container</h1>

<div class = "container container-50">

<section>Section</section>

<aside>Aside</aside>

</div>

</body>

</html>

Output:

Page | 73
 Media queries
Media queries is for different style rules for different size devices such as mobiles, desktops, etc.,

<html>

<head>

<style>

body {

background-color: lightpink;

@media screen and (max-width: 420px) {

body {background-color: lightblue;}}

</style>

</head>

<body>

<p>

Page | 74
If screen size is less than 420px, then it will show lightblue

color, or else it will show light pink color

</p>

</body>

</html>

2.6. Application layering for the Desired Design


Application layering in the context of web development refers to the organized and structured

application of different layers of design elements, styles, and functionality to achieve a desired

overall design for a website. This approach helps in creating a modular and maintainable design

system. In CSS, the z-index property is used for controlling the stacking order of positioned

elements

Page | 75

You might also like