•••••••••••••••••••••••••••••••••• CSS MR.Mostafa badr Lesson 1: What Cascading Style Sheets are? Lesson 2 Structure of the Style Lesson 3 Creating an Style Sheet.

Download Report

Transcript •••••••••••••••••••••••••••••••••• CSS MR.Mostafa badr Lesson 1: What Cascading Style Sheets are? Lesson 2 Structure of the Style Lesson 3 Creating an Style Sheet. 

••••••••••••••••••••••••••••••••••
CSS
MR.Mostafa badr
1
Lesson 1:
What Cascading Style Sheets are?
Lesson 2
Structure of the Style
Lesson 3
Creating an Style Sheet
CSS
MR.Mostafa badr
3
CSS vs HTML

HTML:
 Originally intended to markup structure of a document
(‫)محتويات الموقع‬
<h1>, <h2> ... <Body>, <p>, <ol>, <ul>

CSS
 Originally intended to markup Style sheet
( ‫)شكل الموقع‬
Markup presentation, i.e. formats and layout
CSS
MR.Mostafa badr
4
What Cascading Style Sheets are?

styles define how to display HTML elements;

Determine how the HTML code will display

styles are stored in Style Sheets;

multiple style definitions will cascade into
one;
 CSS1 (1996);
 CSS2 (1998);
 CSS3 (2001)
CSS
MR.Mostafa badr
5
Why?
to save a lot of work and our time;
 easier to handle and edit web documents;
 easier to control content and layout of the
multiple web sites.

CSS
MR.Mostafa badr
6
Advantages of Style Sheets





Saves time
Easy to change
Keep consistency
Give you more control over layout
Make it easy to create a common format for all the
Web pages
CSS
MR.Mostafa badr
7
Applying a single style sheet to multiple documents
CSS
MR.Mostafa badr
8
Structure of the Style
Syntax
HTML Tag { Attribute : value ; }
The Attribute and value are separated by
a colon : and surrounded by curly braces{}.
 if there are more than one property, each
property should be separated with a semicolon;

p{text-align: center; color: maroon}.
CSS
MR.Mostafa badr
9
Where?
External CSS
 Internal CSS
 Inline CSS

CSS
MR.Mostafa badr
10
Inline Style
• Add styles to each tag within the HTML file
• Use it when you need to format just a single
section in a web page
• Very similar to regular HTML styles

CSS
used inside the HTML tags:
<p style =“ { color : green} “ >
First Paragraph
</p>
MR.Mostafa badr
11
Internal Style Sheet
 A style is applied to the entire HTML file
 Use it when you need to modify all instances of
particular element (e.g., h1) in a web page

is inside of the HTML tag <HEAD>
<head>
<style>
H1 {color: maroon}
Body {background-image: url(”examples/saule.gif")}
</style>
</head>
CSS
MR.Mostafa badr
12
External Style Sheet
allow you to control and change layout of the
whole document by the editing one single page!
 is the additional web page saved in format
.css;
 each document must have a link to the file saved
as .css:

<head>
<link rel="stylesheet" type="text/css”
href=”first.css">
</head>
CSS
MR.Mostafa badr
13
Creating an External Style Sheet


Open a new blank document in Notepad
Type style Tag
 h1 {color:red; font-family:sans-serif;}


CSS
Save the document as filename.css
link to the HTML File.
MR.Mostafa badr
14
Linking to Style Sheets


Open an HTML file
Between <head> and </head> add
 <link href=URL rel=“relation_type”
type=“link_type”>
○
○
○

CSS
URL is the file.css
Relation_type=“stylesheet”
Link_type=“text/css”
Save this file and the .css file in the same web
server directory
MR.Mostafa badr
15
An example of an external style sheet
with an original html file
<head>
<title>Getting
Started</title>
<link href=“scraps.css”
rel=“stylesheet”
type=“text/css” />
</head>
h1 {font-family: sansserif; color: orange}
b {color: blue}
Text file of css named “stylesheet”
html file
CSS
MR.Mostafa badr
16
CSS Background

Background Color

body {background-color:Red;}
Background Image
body {background-image:url('bgdesert.jpg');}
Background Image - Repeat Horizontally or Vertically
body
{
background-image:url('gradient2.png');
background-repeat : repeat-x;

Repeat-y
No-repeat
}
CSS
MR.Mostafa badr
17
CSS Text

Text Alignment
h1 {text-align:center;}
Text Decoration
 h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
H4 {text-decoration:none;}


CSS
MR.Mostafa badr
18
CSS Font




Font Size
 h1 {font-size:40;}
Font Style
 p {font-style:italic;}
Font Weight
 p {font-weight:Bold;}
Font Family
{font-family : Times New Roman,Times,serif;}
Font Color
 h1 {color:Red;}
P

CSS
MR.Mostafa badr
19
CSS Lists

Different List Item Markers
 Ul {list-style-type: circle;}
Ul {list-style-type: square;}

An Image as The List Item Marker
 Ul {list-style-image: url ('sqpurple.gif') ;}
CSS
MR.Mostafa badr
20
Formatting Hypertext Links

To remove the style of underlining
hypertext, use:


A {text-decoration:none}
4 types of hyperlinks can be modified:



A:visited {styles for previously visited links}
A:link {styles for links that have never visited}
A:active {styles for links that are currently
being clicked}
 A:hover {styles when the mouse cursor is
hovering over the link}
CSS
MR.Mostafa badr
21