Scribd
Upload
2 views46 pages

CSS Handout 1

The document provides an overview of website layout and CSS, explaining the structure of a website and the role of CSS in styling HTML documents. It details three methods for inserting CSS (external, internal, and inline), along with examples of CSS syntax and selectors. Additionally, it covers background properties, text formatting, and navigation bar design in CSS.

Uploaded by

israelpaks123456789
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views46 pages

CSS Handout 1

The document provides an overview of website layout and CSS, explaining the structure of a website and the role of CSS in styling HTML documents. It details three methods for inserting CSS (external, internal, and inline), along with examples of CSS syntax and selectors. Additionally, it covers background properties, text formatting, and navigation bar design in CSS.

Uploaded by

israelpaks123456789
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

WEBSITE LAYOUT

What is a website layout?


• A website is often divided into headers, menus, content and a footer:
WEBSITE LAYOUT
WEBSITE LAYOUT
CASCADING STYLE SHEET
(CSS)
What is CSS?
• CSS is the language we use to style an HTML
document.
• 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
CSS Syntax
3 TYPES OF CSS
3 Ways to Insert CSS
There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of
an entire website by changing just one file!
• Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section.
• An external style sheet can be written in any text editor,
and must be saved with a .css extension.
• The external .css file should not contain any HTML tags.
External CSS
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
How to call an External CSS file in your HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Internal CSS
• An internal style sheet may be used if one single
HTML page has a unique style.
• The internal style is defined inside the <style>
element, inside the head section.
Internal CSS
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}<
style>
</head>
Inline CSS
• An inline style may be used to apply a unique style
for a single element.
• To use inline styles, add the style attribute to the
relevant element. The style attribute can contain
any CSS property.
Inline CSS
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
HTML vs CSS
<html>
<html> <body>
<body>
<font
<h1 style="color:blue;text-align:center;"> color=”blue”><center><h1>T
This is a heading his is a
</h1> heading</h1></center></h1
>
<p style="color:red;">This is a
paragraph.</p> <font color=”red”><p>This
is a paragraph.</p></font>
</body>
</html> </body>
</html>
CSS SELECTORS
CSS Selectors
• CSS selectors are used to "find" (or select) the
HTML elements you want to style.
CSS Selectors
p{
text-align: center;
color: red;
}
CSS Selectors - ID
(hashtag symbol)
#para1 {
text-align: center;
color: red;
}
CSS Selectors - CLASS
(period symbol)
.center {
text-align: center;
color: red;
}
<html> <html>
<head> <head>
<style> <style>
.center {text-align: center; color: red;} p.center {text-align: center; color: red;}
</style> </style>
</head> </head>
<body> <body>
<h1 class="center">Red and center-aligned <h1 class="center">This heading will not be
heading</h1> affected</h1>
<p class="center">Red and center-aligned <p class="center">This paragraph will be red
paragraph.</p> and center-aligned.</p>
</body> </body>
</html> </html>
CSS Selectors - UNIVERSAL
*{
text-align: center;
color: blue;
}
CSS Selectors - GROUPING SELECTOR
h1 {
text-align: center;
h1, h2, p {
color: red; text-align: center;
} color: red;
h2 { }
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
<!DOCTYPE html> declaration
• The <!DOCTYPE> declaration represents the document type,
and helps browsers to display web pages correctly.
• It must only appear once, at the top of the page (before any
HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
CSS
BACKGROUND
CSS Background Color
CSS
background-color
background-image
<body style=“background-color:blue;”>
background-repeat
background-attachment
background-position

HTML CSS

<body bgcolor=”blue”> <style>


body {background-color=”blue”;}
</style>
CSS Background Image
CSS
background-color
background-image
<body style=“background-image:
background-repeat
url(flower.jpg;”>
background-attachment
background-position

HTML CSS

<body background=”flower.jpg”> <style>


body {background-image: url(flower.jpg;}
</style>
CSS Background Repeat
<style>

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
CSS Background Attachment
<style> <style>

body { body {
background-image: url("gradient_bg.png"); background-image: url("gradient_bg.png");
background-attachment: fixed; background-attachment: scroll;
} }
</style> </style>
CSS Background Attachment
<style> <style>

body { body {
background-image: url("gradient_bg.png"); background-image: url("gradient_bg.png");
background-attachment: fixed; background-attachment: scroll;
} }
</style> </style>
DIVIDING YOUR PAGE INTO SECTIONS
The <div> tag
<!DOCTYPE html> </head>
<html lang="en"> <body>
<head>
<style> <div class="header">
body { margin: 0;} <h1>Header</h1>
</div>
.header {
background-color: gray; </body>
padding: 20px; </html>
text-align: center;
}
</style>
CSS
TEXT FORMATTING
CSS Text Formatting (color and background
color)
<style>

h1 { background-color: black; color: white;}

p { background-color: blue; color: white;}

</style>
CSS Text Formatting (alignment)
<style>
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
</style>
CSS Text Formatting (text decoration)
<style>

h1 {text-decoration: overline; }

h2 {text-decoration: line-through;}

h3 {text-decoration: underline;}

p.ex {text-decoration: overline underline;}

</style>
CSS FLOAT
CSS Float
NAVIGATION BAR
VERTICAL NAVIGATION BAR
<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: none; margin: 0; padding: 0;}
li a { display: block; width: 60px; background-color: <p>A background color is added to the links to show
green;} the link area.</p>
</style> <p>Notice that the whole link area is clickable, not just
</head> the text.</p>
<body> </body>
<ul> </html>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
HORIZONTAL NAVIGATION BAR
<!DOCTYPE html>
<html>
<head>
<style>
ul { <body>
list-style-type: <ul>
none; <li><a href="#home">Home</a></li>
margin: 0; <li><a href="#news">News</a></li>
padding: 0;} <li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
li { </ul>
display: inline; </body>
} </html>
</style>
</head>

You might also like