HTML CSS

Stelios Eliakis
eliakis@aueb.gr
AUEB
HTML-CSS
What is CSS?
CSS stands for Cascading Style Sheets

Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a
problem
External Style Sheets can save you a lot of
work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
Why CSS?
content of HTML documents is clearly separated

from the document's presentation layout
Styles sheets define HOW HTML elements are to
be displayed, just like the font tag and the color
attribute
Styles are normally saved in external .css files
As a Web developer you can define a style for
each HTML element and apply it to as many Web
pages as you want. To make a global change,
simply change the style, and all elements in the
Web are updated automatically.
CSS syntax
The CSS syntax is made up of three parts: a

selector, a property and a value:
selector
{property: value}
h1 {
text-align: center;
color: black;
font-family: arial
}
Grouping
You can group selectors. Separate each
selector with a comma
h1,h2,h3,h4,h5,h6
{
color: green
}
All header elements will be displayed in green
text color:
The class Selector (1)

With the class selector you can define different
styles for the same type of HTML element
p.right {text-align: right}
p.center {text-align: center}
<p class="right"> This paragraph will be rightaligned. </p>

<p class="center"> This paragraph will be
center-aligned. </p>

You can also omit the tag name in the selector to
define a style that will be used by all HTML
elements that have a certain class
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1> <
<p class="center">
This paragraph will also be center-aligned.
</p>

Create your own classes using <div> !!!!!!!!!
css
.testme{text-align: center}
html
<div class=testme>
Hello, how are you doing today?
</div>
Add Styles to Elements with Particular

Attributes
The style rule below will match all input

elements that have a type attribute with a
value of "text
input[type="text"]
{
background-color: blue
}
The id Selector
The style rule below will match the element that
has an id attribute with a value of green
#green {
color: green
}
The style rule below will match the p element that
has an id with a value of "para1
p#para1 {
text-align: center; color: red
}
How to Insert a Style Sheet
External Style Sheet
Internal Style Sheet
An external style sheet is ideal when the style is

applied to many pages. With an external style sheet,
you can change the look of an entire Web site by
changing one file
An internal style sheet should be used when a single
document has a unique style
Inline Styles
An inline style loses many of the advantages of style

sheets by mixing content with presentation
External Style Sheet
Each page must link to the style sheet using the <link>
tag. The <link> tag goes inside the head section
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file
mystyle.css, and format the document according to it
Mystyle.css example
An external style sheet can be written in any text

editor. The file should not contain any html tags.
Your style sheet should be saved with a .css
extension
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
Internal Style Sheet

You define internal styles in the head section
by using the <style> tag
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
Inline Styles
To use inline styles you use the style attribute
in the relevant tag. The style attribute can
contain any CSS property. The example shows
how to change the color and the left margin of
a paragraph
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Multiple Style Sheets
External style
Internal style
h3 { color: red; text-align: left; font-size: 8pt }

h3 { text-align: right; font-size: 20pt }
If the page with the internal style sheet also links to the external
style sheet the properties for h3 will be:
color: red;
text-align:
right;
font-size: 20pt
The color is inherited from the external style sheet and the textalignment and the font-size is replaced by the internal style sheet
CSS properties
CSS Background
CSS Text
CSS Font
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSS List
CSS Table
References
http://www.w3schools.com/css/
http://www.oswd.org/
http://www.w3.org/TR/REC-CSS1/
Questions

HTML CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML CSS

Uploaded by

Copyright:

Available Formats

Stelios Eliakis

CSS stands for Cascading Style Sheets

content of HTML documents is clearly separated

The CSS syntax is made up of three parts: a

The class Selector (1)

<p class="right"> This paragraph will be rightaligned. </p>

The class Selector (2)

The class Selector (3)

Add Styles to Elements with Particular

The style rule below will match all input

How to Insert a Style Sheet

External Style Sheet

Internal Style Sheet

An external style sheet is ideal when the style is

An inline style loses many of the advantages of style

External Style Sheet

An external style sheet can be written in any text

Internal Style Sheet

Multiple Style Sheets

h3 { color: red; text-align: left; font-size: 8pt }

You might also like