Professional Documents
Culture Documents
eliakis@aueb.gr
AUEB
HTML-CSS
What is CSS?
Why CSS?
CSS syntax
{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:
html
<div class=testme>
Hello, how are you doing today?
</div>
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
}
Inline Styles
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
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
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>
External style
Internal style
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