WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)

INTRODUCTION TO WED DESIGN
A detailed and practical approach to designing websites with all the
basics and design structures.
ABOUT THIS COURSE
A student will learn to critically evaluate website
quality, learn how to create and maintain quality
web pages and web standards at the same time
learning to create and manipulate images.

WHAT IS HTML?
WHAT IS HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language.
HTML describes the structure of a Web page and consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
EXAMPLE OF A BASIC HTML DOCUMENT STRUCTURE
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

WHAT IS HTML TAGS & ELEMENTS EXPLAINED?
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
WHAT IS AN HTML ELEMENT?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements.
Empty elements do not have an end tag!

HTML PAGE STRUCTURE EXPLAINED?

HTML EDITORS & FORMATTING
Learn HTML Using NOTEPAD or TEXTEDIT
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe that using a simple text editor is a good way to learn HTML.
HTML FORMATTING ELEMENTS
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

HTML ENTITIES & SPECIAL CHARACTERS.
Entity names or entity numbers can be used to display reserved HTML characters.
SOME USEFUL HTML CHARACTER ENTITIES
RESULT DESCRIPTION NAME NUMBER
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® trademark ® ®

HTML TABLES, FORMS, LISTS ANCHOR TAGS & IMAGES
WE SHALL REFER TO THE INDEX.HTML FILE WITHIN THIS
FOLDER CALLED WEB DESIGN FOR MORE ON THESE TOPICS
SINCE THEY ARE NOW MUCH MORE PRACTICAL.

WHAT IS CSS?
CSS is the language we use to style a Web page.
CSS stands for Cascading Style Sheets and 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
WHY USE CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different
devices and screen sizes.
CSS SOLVED A BIG PROBLEM
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web
developers. Development of large websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS SAVES A LOT OF WORK!
With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS SYNTAX?
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.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
p {
color: red;
text-align: center;
}
EXAMPLE EXPLAINED
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

CSS .CLASS SELECTOR?
<html>
<head>
<style>
.intro { background-color: yellow;}
</style>
</head>
<body>
<h1>Demo of the .class selector</h1>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p class="intro">My best friend is Mickey.</p>
</body>
</html>

CSS #ID SELECTOR?
<html>
<head>
<style>
#firstname { background-color: yellow;}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>

CSS MARGINS?
Margins are used to create space around elements, outside of any defined borders.
The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an
element (top, right, bottom, and left).
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element

CSS MARGINS?
<html>
<head>
<style>
div {
border: 1px solid black; margin-top: 100px;
margin-bottom: 100px; margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px,
a right margin of 150px, a bottom margin of 100px,
and a left margin of 80px.</div>
</body>
</html>

CSS PADDING?
Padding is used to create space around an element's content, inside of any defined borders.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an
element (top, right, bottom, and left).
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element

CSS PADDING?
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px,
a right padding of 30px, a bottom padding of 50px,
and a left padding of 80px.</div>
</body>
</html>

WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)

More Related Content

Similar to WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS) (20)

Recently uploaded (20)

WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)