Css whats on the menu.

Topics

CSS Introduction

CSS and HTML

Stylesheet Types

Stylesheet Examples

Menu Example

Example Explained

Common Mistakes

Welcome to CSS

CSS stands for Cascading Style Sheets

Styles deﬁne how to display HTML Elements

Styles were added to HTM4.0 to solve a
problem

HTML & CSS
HTML was never intended to have tags.
but instead to deﬁne the contents of a
document such as heading and paragraph
tags.

In HTML 3.2 <font> and <color> tags were
added which caused NIGHTMARES for
web developers

This was ﬁxed in HTML 4.0 when the W3C
added CSS Style Sheets

Types of Stye Sheets
There are 3 ways to implement CSS on a web page.

External Style Sheet

Internal Style Sheet

Inline Style Sheet

EXTERNAL STYLESHEET
HTML CSS
<!DOCTYPE html>
<html> h1{
<head> color: blue;
<title>External Stylesheet</title> }
<link rel=”stylesheet”ref=”style.css” />
</head> p{
<body> margin: 10px;
}
<h1>This is a header.</h1>
<p>This is a paragraph.</p>

</body>
</html>

Internal Style Sheets
<!DOCTYPE html>
<html>
<head>
<title>Internal Stylesheet</title>

<style>
h1{
color: blue;
}

p{
margin: 10px;
}
</style>
</head>
<body>

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

</body>
</html>

Inline Styling
<!DOCTYPE html>
<html>
<head>
<title>Inline Styling</title>
</head>
<body>

<h1 style=”color:blue”>This is a header.</h1>
<p style=”margin: 10px”>This is a paragraph.</p>

</body>
</html>

The Menu
This is our goal

To complete our goal we will use an internal
stylesheet so we can easily look back and
forth at the code.

The Code
HTML CSS
<!DOCTYPE html> *{margin: 0; padding: 0;}
<html> ul{
<head> list-style-type: none;
<link rel="stylesheet" href="style.css"/> margin: 0; padding: 0;
</head> }
<body>
li{
<ul> ! display: inline;
! <li><a href="#">Home</a></li> ! padding: 0; margin: 0;
! <li><a href="#">About</a></li> }
! <li><a href="#">Media</a></li>
! <li><a href="#">Links</a></li> a{
! <li><a href="#">Contact</a></li> ! margin:0;
</ul> ! padding: 5px 40px 5px 8px;
! line-height: 30px;
</body> ! color: white;
</html> ! background-color: red;
! text-decoration: none;
}

Lists - HTML
The menu is being constructed by an
Unordered List.

Unordered lists are used in so many ways in
web design such as navigation, lists, footers,
twitter feeds, image galleries etc.

Each list has a start and ﬁnish tag <ul>, </ul>.

Each list item has a start and ﬁnish tag as
well <li>,</li>.

They are used to identify lists and items.

Links - HTML

Each link has a start and end tag<a> and </
a>.

They also have other attributes such as: href,
rel, name .etc.

The hash tag “#” is used to represent a non
used link, like a ﬁller link.

General CSS Information

Just like the HTML, CSS has beginning and
ending symbols.

CSS uses the Curly Brackets { and }.

Each CSS property requires a semicolon “;”
at the end of each property declaration.

Reset and 0

* selects ALL elements on a website. and it is
used for a reset such as margin:0; padding:
0;.

When declaring dimensions whether its size
or position, 0 does not need the preﬁx em,
in, px .etc.

Menu - CSS
There are many property options for list
items bullets, you can make them bullets,
numbers, letters, roman numerals and even
images.

The margin: 0; padding: 0; properties remove
the margin and padding from the un ordered
list as well as from every descendant
element.

Then there are some visual enhancement
properties that are customizable to your
liking.

Common Mistakes
You need to use a doctype (Preferably html5
doctype) <!DOCTYPE html> in your websites
when ﬂoating ANYTHING or else it will not
work properly.

* reset should NOT be used with Outline,
Border or anything of that sort because it
may slow your websites performance. the
Margin and padding is the most basic of
stylesheet resets. there are many available
on : http://css-tricks.com/8146-the-lean-
mean-css-reset-machine/.

Resources
W3Schools.com

CSS-Tricks.com - Chris Coyier

PerishablePress.com Jeff Starr

Contact Info

Name: Attila Hajzer
Email: Attilahajzer5@gmail.com
Website: http://attilahajzer.host-ed.net/

Make the next request!

Css whats on the menu.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

Css whats on the menu.

Hinweis der Redaktion