Fundamentals of Web Design Technologies: HTML & CSS
List-style-type: none
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: none;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ul>
<ul class="b">
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ul>
</body>
</html>
Output:
P a g e 94 | 118
Fundamentals of Web Design Technologies: HTML & CSS
List-style-position:
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Data Structure - Data structure is a specialized format for
organizing, processing, retrieving and storing data. There are several
basic and advanced types of data structures, all designed to arrange
data to suit a specific purpose</li>
<li>Web Design Technologies - Web development technologies refer to
the multitude of programming languages and tools that are used to
produce dynamic and fully-featured websites and applications. </li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Data Structure - Data structure is a specialized format for
organizing, processing, retrieving and storing data. There are several
basic and advanced types of data structures, all designed to arrange
data to suit a specific purpose</li>
<li>Web Design Technologies - Web development technologies refer to
the multitude of programming languages and tools that are used to
produce dynamic and fully-featured websites and applications. </li>
</ul>
</body>
</html>
P a g e 95 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
List-style-image:
<html>
<head>
<style>
ul {
list-style-image: url("bullet.jpg");
margin-left:10;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul>
<li>Car</li>
<li>Motorcycle</li>
<li>Bicycle</li>
</ul>
</body>
</html>
P a g e 96 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
e. Border properties
The CSS border properties allow you to specify the style, width, and color of an element's border.
The border will be invisible if its style is not defined. This is because the style defaults to none.
The CSS border properties are used to specify the style, color and size of the border of an
element.
Property Description
border-style To specifies what kind of border to display
border-width To specifies the width of the four borders.
border-color To set the color of the four borders.
Border Sided To specifying each of the borders (top, right, bottom, and
left):
P a g e 97 | 118
Fundamentals of Web Design Technologies: HTML & CSS
border-style:
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p class="dotted">A dotted border. </p>
<p class="dashed">A dashed border. </p>
<p class="solid">A solid border. </p>
<p class="double">A double border. </p>
<p class="groove">A groove border. </p>
<p class="ridge">A ridge border. </p>
<p class="inset">An inset border. </p>
<p class="outset">An outset border. </p>
<p class="none">No border. </p>
<p class="hidden">A hidden border. </p>
<p class="mix">A mixed border. </p>
</body>
</html>
P a g e 98 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
border-width P a g e 99 | 118
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="one">Some text. </p>
<p class="two">Some text. </p>
<p class="three">Some text. </p>
</body>
</html>
Fundamentals of Web Design Technologies: HTML & CSS
Output:
border-color
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
border-color: red;
}
p.two {
border-style: solid;
border-width: medium;
border-color: green;
}
p.three {
border-style: dotted;
border-width: 2px;
border-color: blue;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
</body>
</html>
P a g e 100 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
CSS Border Sided
<html>
<head>
<style>
p {border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid; }
</style>
</head>
<body>
<h2>The border-sides Property</h2>
<p> The different sides of border </p>
</body>
</html>
Output:
P a g e 101 | 118
Fundamentals of Web Design Technologies: HTML & CSS
f. Positioning properties
CSS helps to position HTML elements. It can be specified whether you want the elements
positioned relative to its position in the page or absolute based on parents’ element.
The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).
Property Description
Position: static;
always positioned according to the normal flow of the page:
position: relative; HTML elements are positioned static by default.
position: fixed; positioned relative to its normal position.
positioned relative to the viewport, which means it always stays in
position: sticky; the same place even if the page is scrolled
positioned based on the user's scroll position.
position: static;
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:
<html>
<head>
<style>
div { position: static;
left:80px;
top:20px;
background-color: yellow;}
</style>
</head>
<body>
<h2> Position: static </h2>
<div>
This div has static positioning.
</div>
</body>
</html>
P a g e 102 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output:
position: relative;
An element with position: relative; is positioned relative to its normal position.
<html>
<head>
<style>
div {position: relative;
left:80px;
top:20px;
background-color: yellow;}
</style>
</head>
<body>
<h2> Position: relative </h2>
<div>
This div has relative positioning.
</div>
</body>
</html>
Output:
P a g e 103 | 118
Fundamentals of Web Design Technologies: HTML & CSS
position: fixed;
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.
<html>
<head>
<style>
div {position: fixed;
bottom:0px;
right:0px;
background-color: yellow;}
</style>
</head>
<body>
<h2> Position:fixed </h2>
<div>
This div has fixed positioning.
</div>
</body>
</html>
Output:
P a g e 104 | 118
Fundamentals of Web Design Technologies: HTML & CSS
position: absolute;
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.
<html>
<head>
<style>
div {position:absolute;
left:80px;
top:20px;
background-color: yellow;}
</style>
</head>
<body>
<h2> Position:absolute </h2>
<div>
This div has absolute positioning.
</div>
</body>
</html>
Output:
P a g e 105 | 118
Fundamentals of Web Design Technologies: HTML & CSS
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position. A sticky
element toggles between relative and fixed, depending on the scroll position. It is positioned
relative until a given offset position is met in the viewport - then it "sticks" in place (like position:
fixed).
<html>
<head>
<style>
div {position:sticky;
top:0px;
right:0px;
background-color:yellow;}
</style>
</head>
<body>
<h2> Position:sticky </h2>
<div>
This div has sticky positioning.
</div>
Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum, altera
fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
ad. Eum no molestiae voluptatibus.
</body>
</html>
Output:
P a g e 106 | 118
Fundamentals of Web Design Technologies: HTML & CSS
CSS in a web Design
Text Formatting
CSS has a lot of properties for formatting text.
Property Description
Text color
Text alignment Used to set the color of the text.
Text-decoration Text-align: Used to set the horizontal alignment of a text, its can
Text-transform be left, right centered or justified.
Text Spacing Used to set or remove decorations from the text.
To specify uppercase and lowercase letters in a text
Text-shadow Text-indent: To specify the indentation of the first line of a text
Letter-spacing: To specify the space between the characters in a
text
Line-height: To specify the space between lines.
Word-spacing: To specify the space between the words in a
text.
To specify shadow effect added to text.
<html>
<head>
<style>
div {position:sticky;
top:0px;
right:0px;
background-color:yellow;}
</style>
</head>
<body>
<h2> Position:sticky </h2>
<div>
This div has sticky positioning.
</div>
Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
</body>
</html>
P a g e 107 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Text color
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>This page has a grey background color and a blue text.
</p>
</body>
</html>
Output
P a g e 108 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Text alignment
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>Default paragraph without text-align</p>
</body>
</html>
Output:
P a g e 109 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Text-decoration
<html>
<head>
<style>
a { text-decoration:none;
}
h3 {
text-decoration: overline;
}
h4 {
text-decoration: line-through;
}
h5 {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.google.com">Google.com</a>
<h2>Some different text decorations</h2>
<h3>Overline text decoration</h3>
<h4>Line-through text decoration</h4>
<h5>Underline text decoration</h5>
</body>
</html>
Output:
P a g e 110 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Text-transform
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">Text transformed to uppercase.</p>
<p class="lowercase">Text transformed to lowercase.</p>
<p class="capitalize">Text is capitalized.</p>
</body>
</html>
Output:
P a g e 111 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Text Spacing
<html>
<head>
<style>
h1 {
text-indent: 50px;
}
h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
p. small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
</style>
</head>
<body>
<p>Text Spacing</p>
<h1> Text indent</h1>
<h2> Letter Spacing H2</h2>
<h3> Letter Spacing H3</h3>
<p class="small">
This is a paragraph with a smaller line-height. <br>
This is a paragraph with a smaller line-height. <br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
<p class="one">This is a paragraph with larger word spacing.</p>
<p class="two">This is a paragraph with smaller word spacing.</p>
</body>
</html>
P a g e 112 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Output
Text-shadow
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect! </h1>
</body>
</html>
Output
P a g e 113 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Apply menu system using CSS
Menu system or navigation bar is a list of a links pointing to important areas of a website. They
usually presented as a horizontal or vertical at every page on a website. Navigation menus gives
site structure and help visitors find what they’re looking for.
Top navigation
<html>
<head>
<meta name="viewport" content="width=device-
width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: gray;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.topnav a.active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left:16px">
<h3>Top Navigation Example</h3>
<p>Content goes here...</p>
</div>
</body>
</html>
P a g e 114 | 118
Fundamentals of Web Design Technologies: HTML & CSS
Sidebar navigation P a g e 115 | 118
<html>
<head>
<meta name="viewport" content="width=device-
width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: gray;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 15px;
color: white;
display: block;
}
.sidenav a:hover {
color:yellow;
}
.sidenav a.active {
background-color: green;
color: white;
}
.main {
margin-left: 160px; /* Same as the width of
the sidenav */
font-size: 20px; /* Increased text to
enable scrolling */
padding: 0px 10px;
}
</style>
</head>
<body>
<div class="sidenav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="main">
<h3>Sidebar Navigation Example</h3>
<p>Content goes here...</p>
</body>
</html>
Fundamentals of Web Design Technologies: HTML & CSS
Exercise
Instruction:
1. Answer the following question based on the code below.
<html>
<head>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph. </p>
</body>
</html>
a. Set the “background color: linen” for the page, using inline style sheets.
b. Set a “5px” and solid border for <p>.
c. Set the border properties with the following information: 8px, dotted and red.
d. Use the margin properties to set up the top and bottom margins for <h1> to 30px
and left and right margin t0 30px.
e. Set the margin property to center align the <h1> element.
2. Answer the following question based on the code below.
<html>
<head>
<style>
div {
background-color: lightgray;}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua.</div>
< a href= “https://www.google.com/” >
Google </a>
</body>
</html>
P a g e 116 | 118
Fundamentals of Web Design Technologies: HTML & CSS
a. Set the width of the div to 300px.
b. Set the padding of the div to 30px.
c. Set the border of the div to 25px solid yellow.
d. Set the color for the links to red.
e. Set the color for unvisited links to green and the color for visited links blue.
3. Answer the following question based on the code below.
<html>
<head>
<style>
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bruce</td>
<td>Thomas</td>
</tr>
<tr>
<td>Lee</td>
<td>Wilson</td>
</tr>
</table>
</body>
</html>
a. Set the border to 3px solid and blue for table, th and td elements.
b. Collapse the table borders into a single border.
c. Set the text alignment in <td> elements to right.
d. Set the background color of <th> elements to lightblue.
e. Set the padding in <th> elements to 20px
P a g e 117 | 118
Fundamentals of Web Design Technologies: HTML & CSS
4. Add a CSS rule and appropriate html to style every other line of the unordered list with a
light blue background color. Specify the background color using the rgb method.
<html>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</body>
</html>
5. Using CSS and HTML Make a webpage that has two columns. Each column should use half
of the width of the page. The left half should have a light gray background and the right
half should have a light green background. The left half should have a list of the 5
bestselling books in Amazon’s kindle store, and the right should have a list of your five
favorite celebrities or athletes.
6. Using the nav element, make a navbar for at the top of a sample webpage. Add at least
three links to the navbar using an unordered list that is displayed as inline rather than
block. Make the navbar have a light blue background color, but change the background
of the title to a darker blue when the mouse hovers over it
P a g e 118 | 118
REFERENCES
N R Jennifer (2018) Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript,
and Web Graphics 5th Edition. O'Reilly Media. Canada. (ISBN: 9781491960202)
C Randy, H Ricardo (2017) Fundamentals of Web Development 2nd Edition. Pearson.
Indianapolis. (ISBN: 9780134481265)
C Randy, H Ricardo (2016) Fundamentals of Web Development. Pearson Education Dorling
Kindersley. Indianapolis. (ISBN: 9789332575271)
John D, (2014) Web Design with HTML, CSS, JavaScript and jQuery Set John Wiley & Sons.
Indianapolis. (ISBN : 9781118907443)
D Matt (2011) Master Mobile Web Apps with jQuery Mobile (2nd Edition) Elated
Communications Ltd. (ISBN: 9780956921840)
Ts. Norqursiah Saad
Lecturer
Department of Information
Technology and Communication
Polytechnic of Sultan Idris Shah
Norakmar Mohd Nadzari
Lecturer
Department of Information
Technology and Communication
Polytechnic of Sultan Idris Shah
The Fundamentals of Web Design Technologies (Hypertext Markup
Language and Cascading Style Sheet) covered in this book is
designed as a reference or guideline for students. Besides, the
book is to accommodate beginners about learning the concept of HTML
and CSS programming. This book is the source of complete guidelines
to the students to start creating the program using HTML and CSS.
It is a complete blend of the basic concepts, programming syntax
and example of code to obtain a firm grip on the topics needed to
code HTML and CSS page.
This educational book is one that you will enjoy picking up,
reading, then referring back to. It will make you wish other
technical topics were presented in such a simple, attractive and
engaging way! e ISBN 978-967-2860-06-8
Department of Information Technology and Communication
Polytechnic of Sultan Idris Shah, Selangor
978967 2860068
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
The Fundamentals of Web Design Technologies (Hypertext Markup Language and Cascading Style Sheet) covered in this book is designed as a reference or guideline for students. Besides, the book is to accommodate beginners about learning the concept of HTML and CSS programming. This book is the source of complete guidelines to the students to start creating the program using HTML and CSS. It is a complete blend of the basic concepts, programming syntax and example of code to obtain a firm grip on the topics needed to code HTML and CSS page. This educational book is one that you will enjoy picking up, reading, then referring back to. It will make you wish other technical topics were presented in such a simple, attractive and engaging way!
Discover the best professional documents and content resources in AnyFlip Document Base.
Search