Summer WorkShop
2012
••••••••••••••••••••••••••••••••••
Mostafa BadrCSS MR.Mostafa badr 1
Lesson 3Creating an Style Sheet
Lesson 2Structure of the Style
Lesson 1: What Cascading Style Sheets are?
3
• What CSS are?
1
CSS MR.Mostafa badr
CSS vs HTML
HTML:Originally intended to markup structure of a document
( الموقع (محتويات<h1>, <h2> ... <Body>, <p>, <ol>, <ul>
CSSOriginally 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)
5CSS MR.Mostafa badr
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.
6CSS MR.Mostafa badr
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 semi-colon;
p{text-align: center; color: maroon}.
9CSS MR.Mostafa badr
Where?
External CSS Internal CSS Inline CSS
10CSS MR.Mostafa badr
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
used inside the HTML tags:
<p style =“ { color : green} “ >
First Paragraph</p>
11CSS MR.Mostafa badr
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>
12CSS MR.Mostafa badr
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>
13CSS MR.Mostafa badr
Creating an External Style Sheet
Open a new blank document in Notepad Type style Tag
h1 {color:red; font-family:sans-serif;} Save the document as filename.css link to the HTML File.
CSS 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”>○ 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
CSS 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: sans-serif; color: orange}
b {color: blue}
html file
Text file of css named “stylesheet”
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
P {font-family : Times New Roman,Times,serif;} Font Color
h1 {color:Red;}
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
Top Related