Css
advertisement
HTML & CSS
Contents:
• the different ways we can use to apply CSS to
The HTML documents
• CSS Colors and Background
• CSS Fonts
• CSS Text
• CSS box model: padding, margin ,Borders
• Height and width
• Floating elements (floats)
• Positioning of elements
• Web page layout using <div> elements
HTML- lec 5
T.A. Reem Alshnaifi
17-Feb-13
HTML & CSS
CSS (Cascading Style Sheets) is used to style HTML
elements.
CSS can be added to HTML in the following ways:
• Inline - using the style attribute in HTML elements
• Internal - using the <style> element in the <head>
section
• External - using an external CSS file
CSS Example
Inline Styles
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a
heading</h2>
<p style="background-color:green;">This is a
paragraph.</p>
</body>
</html>
CSS Example
<!DOCTYPE html>
<html><head>
<style>
body {background-color:#d0e4fe;}
h1
{background-color:red;}
p
{background-color:green;}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body></html>
Internal Style Sheet
External 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. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside
the <head> section
CSS Example
External Style Sheet
CSS Example
External Style Sheet
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body></html>
body {background-color:#d0e4fe;}
h1
{background-color:red;}
p
{background-color:green;}
mystyle.css
CSS Colors and Background
CSS Colors Property :
1. Colors
CSS Background Properties:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
CSS Colors and Background
Index.html
<!doctype html>
<html ><head>
<link rel="stylesheet" href="style.css"
type="text/css"/>
</head>
<body>
<h1>welcome to baby's shop</h1>
<p> Here you can find all your child's needs</p>
</body> </html>
CSS Colors and Background
Style.css
body
{ background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom; }
h1
{ color: #990000; background-color: #FC9804; }
Can be compiled into:
body
{ background: #FFCC66 url("butterfly.gif") no-repeat fixed
right bottom; }
Repeat background image [background-repeat]
Value
Description
background-repeat: repeat-x
The image is repeated
horizontally
background-repeat: repeat-y
The image is repeated vertically
background-repeat: repeat
The image is repeated both
horizontally and vertically
background-repeat: no-repeat The image is not repeated
[background-attachment]
Value
Description
he background image scrolls with
Background-attachment:scroll
the rest of the page. This is default
Background-attachment: fixed The background image is fixed
Place background image [background-position]
CSS Fonts
CSS Font Properties:
•
•
•
•
font-family
font-style
font-weight
font-size
CSS Fonts
.
.
.
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial;
}
Style.css
CSS Text
CSS Text Properties:
•text-align
Center , right , left
•text-decoration :
Underline , overline, line-through ,none
CSS box model
The box model in CSS describes the boxes which
are being generated for HTML-elements. The
box model also contains detailed options
regarding adjusting margin, border, padding and
content for each element
CSS box model
CSS box model
Example
<!doctype html>
<html>
<body>
<h1>Article 1:</h1>
<p>All human beings are born free and equal in
dignity and rights. They are endowed with reason
and conscience and should act towards one
another in a spirit of brotherhood</p>
</body></html>
CSS box model
By adding some color and font-information the
example could be presented as follows:
Result
CSS box model
The example contains two elements: <h1> and <p>. The box model for
the two elements can be illustrated as follows:
CSS box model
The properties which regulate the different boxes are:
padding, margin and border
• Set the margin in an element
An element has four sides: right, left, top and bottom.
The margin is the distance from each side to the
neighboring element (or the borders of the document)
CSS box model
the margin in an element
As the first example, we will look at how you define
margins for the document itself i.e. for the element <body>
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Can be compiled into:
body { margin: 100px 40px 10px 70px; }
CSS Code
CSS box model
the margin in an element
You can set the margins in the same way on almost every
element. For example, we can choose to define margins for
all of our text paragraphs marked with <p>:
p{
margin: 5px 50px 5px 50px;
}
CSS Code
CSS box model
• Set padding in an element:
padding does not affect the distance of the element to
other elements but only defines the inner distance
between the border and the content of the element.
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
CSS Code
CSS Borders
CSS Borders Properties:
•border-width
•border-color
•border-style
P{
border-width: 1px;
border-style: solid;
border-color: blue; }
Can be compiled into:
p { border: 1px solid blue; }
CSS Code
CSS Borders
border-style :
Height and width
Setting the width and the height
p{
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
CSS Code
Floating elements (floats)
An element can be floated to the right or to left
by using the property float.
That is to say that the box with its contents either
floats to the right or to the left in a document
Floating elements (floats)
If we for example would like to have a text wrapping
around a picture, the result would be like this:
Floating elements (floats)
How is it done?
The HTML code for the example above, look as follows:
<img src="butterfly.gif" />
<p>An element can be floated to the... </p>
img { float:left;
width: 100px; }
p { width: 400px; }
CSS Code
Positioning of elements
With CSS positioning, you can place an element
exactly where you want it on your page.
The principle behind CSS positioning:
Imagine a browser window as a system of coordinates:
CSS positioning:
Let's say we want to position a headline. By using the box model
the headline will appear as follows:
If we want this headline positioned 100px from the top of the
document and 200px from the left of the document, we could type
the following in our CSS:
h1 {
position:absolute;
top: 100px;
left: 200px; }
CSS Code
CSS positioning:
The result will be as follows:
HTML & CSS
HTML Layouts:
Web page layout using <div> elements
Website Layouts
This element uses separate opening and
closing tags.
<div>...</div>
The <div> tag can be used to divide an HTML
document into sections. Styles can then be applied
to whole sections at the same time. The <div> tag
is a block-level element that can contain other
block-level elements
Website Layouts
<!DOCTYPE html>
<html><head><style>
body{
margin : -20px 20px 10px 130px;
background-color: #181818 ;
background-image: url("soon.jpg");
background-repeat:repeat;
background-attachment:scroll;
background-position: top left;}
#container{width:1100px;}
#header{
background-color:#CC9933;
margin-bottom:-22px;
color:#000000;
text-align:center;}
Website Layouts
#menu{background-color:#DEB887 ;
height:555px;
width:150px;
float:left;}
#content{
background-color:#ffffff;
height:555px;
width:950px;
float:left;}
#footer{
background-color:#CC9933;
clear:both;
text-align:center;}
</style></head>
Website Layouts
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1></div>
<div id="menu">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright © W3Schools.com</div>
</div>
</body></html>
Website Layouts
