المحاضرة الثامنة
advertisement
WEB ENGINEERING AND
APPLICATIONS
ITC 311
REEM ALMOTIRI
Information Technology Department
Majmaah University
Lecture 8
Cascading Style Sheets
(CSS)
HTML & CSS
Contents
•
•
•
•
•
•
•
•
Introduction
CSS Syntax
The different ways to insert CSS
CSS Id and Class
Multiple Style Sheets
Cascading order
CSS Properties :
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
Introduction
• What is Cascading Style Sheets (CSS)?
– Styles define how to display HTML elements .
CSS Saves a Lot of Work!
– This simplifies maintaining and modifying a document’s
layout, especially in development of large web sites,
where fonts and color information were added to every
single page.
– Styles are normally saved in external .css files. External
style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one
single file!
CSS Syntax
• The selector is normally the HTML element you want to
style.
• A CSS declaration always ends with a semicolon, and
declaration groups are surrounded by curly brackets { }
Example
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each
line, like this:
Example
/*This is a comment*/
p
{
color:red;
text-align:center;
}
CSS Comments
A CSS comment begins with "/*", and ends with "*/“
The different ways to insert CSS
There are three ways of inserting a style sheet:
• Inline - using the style attribute in HTML elements
• Internal - using the <style> tag in the <head> section
• External - using an external CSS file
Inline Styles
• An inline style loses many of the advantages of style
sheets by mixing content with presentation. Use this method
sparingly!
• Declare an individual element’s format using
- Style attribute
- CSS property
• Followed by a colon and a value
<p style="color:red; margin-left:20px;">This is a
paragraph.</p>
Note: Inline styles override any other styles applied
CSS Example
Inline.html
<!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>
<!-- Using inline styles
-->
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare -->
<!-- inline styles. Separate multiple styles -->
<!-- with a semicolon.
-->
<p style = "font-size: 20pt">This text has the
<em>font-size</em> style applied to it, making it 20pt.
</p>
24
<p style = "font-size: 20pt; color: #0000ff">
25
This text has the <em>font-size</em> and
26
<em>color</em> styles applied to it, making it
27
20pt. and blue.</p>
28
29
</body>
30 </html>
Internal Style Sheets
• An internal style sheet should be used when a single
document has a unique style. You define internal styles in
the head section of an HTML page, by using the <style>
tag.
• Match elements in the entire document, not just to a
single element.
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.html
6
<!-- Declaring a style sheet in the header section. -->
7
8
9
10
<html >
<head>
<title>Style Sheets</title>
11
12
<!-- this begins the style sheet section -->
13
<style type = "text/css">
14
15
em
{ background-color: #8000ff;
color: white }
16
17
18
h1
{ font-family: arial, sans-serif
p
{ font-size: 14pt }
19
20
21
22
.special { color: blue }
23
24
25
</style>
</head>
}
26
27
30
<body>
<h1 class = "special">Deitel & Associates, Inc.</h1>
31
32
<p>Deitel &amp; Associates, Inc. is an internationally
33
recognized corporate training and publishing organization
34
specializing in programming languages, Internet/World
35
Wide Web technology and object technology education.
36
Deitel &amp; Associates, Inc. is a member of the World Wide
37
Web Consortium. The company provides courses on Java,
38
C++, Visual Basic, C, Internet and World Wide Web
39
programming, and Object Technology.</p>
41
<h1>Clients</h1>
42
<p class = "special"> The company's clients include many
43
<em>Fortune 1000 companies</em>, government agencies,
44
branches of the military and business organizations.
45
Through its publishing partnership with Prentice Hall,
46
Deitel &amp; Associates, Inc. publishes leading-edge
47
programming textbooks, professional books, interactive
48
CD-ROM-based multimedia Cyber Classrooms, satellite
49
courses and World Wide Web courses.</p>
50
51
</body>
52 </html>
External Style Sheets
• 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:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
• 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.
CSS Example
External Style Sheet
CSS Example
External.html
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="External.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;}
External.css
1 /* Fig. 6.3: styles.css
2
styles.css
(1 of 1)
*/
/* An external stylesheet */
3
4
a
{ text-decoration: none }
5
6
7
8
9
10 li em
{ color: red;
11
font-weight: bold;
12
background-color: #ffffff }
13
14 ul
{ margin-left: 2cm }
15
16 ul ul
17
{ text-decoration: underline;
• The text-decoration property is used to
set or remove decorations from text.
- overline - line-through
- underline - none
margin-left: .5cm }
•
li em declare a style for all em elements
that are nested of li elements.
5
<!-- Fig. 6.4: external.html
-->
6
<!-- Linking external style sheets
-->
7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
10
<title>Linking External Style Sheets</title>
11
<link rel = "stylesheet" type = "text/css"
12
13
href = "styles.css" />
</head>
14
15
<body>
16
17
<h1>Shopping list for <em>Monday</em>:</h1>
18
<ul>
19
<li>Milk</li>
20
<li>Bread
21
<ul>
22
<li>White bread</li>
23
<li>Rye bread</li>
24
<li>Whole wheat bread</li>
25
</ul>
external.html
(1 of 2)
26
</li>
27
<li>Rice</li>
28
<li>Potatoes</li>
29
<li>Pizza <em>with mushrooms</em></li>
30
external.html
(2 of 2)
</ul>
31
32
<p>
33
<a href = "http://www.food.com">Go to the Grocery store</a>
34
</p>
35
36
</body>
37 </html>
CSS Id and Class
In addition to setting a style for a HTML element, CSS allows you
to specify your own selectors called "id" and "class“
The id Selector
The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element, and is
defined with a "#".
CSS Id and Class
The id Selector
Example :
The style rule below will be applied to the element with id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{text-align:center;color:red;}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body></html>
CSS Id and Class
The class Selector
The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is most often used
on several elements.
This allows you to set a particular style for many HTML elements
with the same class.
The class selector uses the HTML class attribute, and is defined
with a ".“
CSS Id and Class
The class Selector
In the example below, all HTML elements with class="center" will
be center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center
{text-align:center;}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph</p>
</body></html>
CSS Id and Class
You can also specify that only specific HTML elements
should be affected by a class.
In the example below, all p elements with class="center" will
be center-aligned:
Example
p.center {text-align:center;}
Do NOT start an ID name or a class name with a number!
Multiple Style Sheets
If some properties have been set for the same selector in different
style sheets, the values will be inherited from the more specific style
sheet.
For example, an external style sheet has these properties for the h3
selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
Multiple Style Sheets
And an internal style sheet has these properties for the h3 selector:
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.
Cascading order
What style will be used when there is more than one style specified for
an HTML element?
all the styles will "cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag,
or in an external style sheet, or in a browser (a default value).
Note: If the link to the external style sheet is placed after the internal
style sheet in HTML <head>, the external style sheet will override the
internal style sheet!
CSS Properties
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.This is
default
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]
(default)
CSS Fonts
CSS Font Properties:
• font-family:
generic family -font family
• font-style:
normal – italic
• font-weight
normal - bold
• font-size
There are many different units (e.g. pixels and percentages) to
choose from to describe font sizes.
Font Family
CSS Font Families
In CSS, there are two types of font family names:
• generic family - a group of font families with a
similar look (like "Serif" , "Sans-serif" or
"Monospace")
• font family - a specific font family (like "Times New
Roman" or "Arial")
Font Family
•
•
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first
font, it tries the next font.
• Start with the font you want, and end with a generic family,
to let the browser pick a similar font in the generic family, if
no other fonts are available.
Note: If the name of a font family is more than one word, it must
be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example:
p{font-family:"Times New Roman", serif;}
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 Text
The text-decoration property is mostly used to remove
underlines from links.
Example:
a {text-decoration:none;}
It can also be used to decorate text.
Example:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
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:
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
CSS box model
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
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;
}
h2 {
background: orange;
}
CSS Code
CSS box model
CSS box model
• Set padding in an element:
CSS Code
h1
{
background: yellow;
padding: 20px 20px 20px 80px;
}
h2
{
background: orange;
padding-left:120px;
}
CSS box model
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 box model
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
CSS box model
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. The following figure illustrates the principle:
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 previous example, 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
Floating elements (floats)
Another example: columns
Floating elements (floats)
Turning off Float - Using Clear
Elements after the floating element will flow around it. To
avoid this, use the clear property.
Example:
Floating elements (floats)
<!DOCTYPE html>
<html>
<head>
<style>
.pic
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
Example
1 of 2
Floating elements (floats)
Example
2 of 2
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have
enough room.</p>
<img class="pic" src="klematis_small.jpg" >
<img class="pic" src="klematis2_small.jpg">
<img class="pic" src="klematis3_small.jpg">
<img class="pic" src="klematis4_small.jpg">
<h3 class="text_line">Second row</h3>
<img class="pic" src="klematis_small.jpg" >
<img class="pic" src="klematis2_small.jpg">
<img class="pic" src="klematis3_small.jpg">
<img class="pic" src="klematis4_small.jpg">
</body>
</html>
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 blocklevel elements
Website Layouts
<!DOCTYPE html>
<html><head><style>
#header{
background-color:#CC9933;
color:#000000;
height:100px;}
h1{
text-align:Center;
padding:25px 0px 0px 10px;
font-family:"Times New Roman";}
#menu{background-color:#F5DEB3 ;
height:480px;
width:10%;
float:left;
text-align:Center}
Website Layouts
#content{
background-color:#ffffff;
height:480px;
width:90%;
float:left;}
#footer{
background-color:#CC9933;
clear:both;
height:30px;
text-align:center;
font-style: italic;
font-weight: bold}
</style></head>
Website Layouts
<body>
<div id="header">
<h1>Main Title of Web Page</h1></div>
<div id="menu">
<b>Menu</b><br>
<a href="page1.htm">link I</a><br>
<a href="page2.htm">link II</a><br>
<a href="page3.htm">link III</a><br>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright©W3Schools.com</div>
</div>
</body></html>
