Download presentation
Presentation is loading. Please wait.
1
CSSMR.Mostafa badr1
2
Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What Cascading Style Sheets are?
3
3CSSMR.Mostafa badr
4
CSS vs HTML HTML: Originally intended to markup structure of a document ( محتويات الموقع ),...,,, CSS Originally intended to markup Style sheet ( شكل الموقع ) Markup presentation, i.e. formats and layout CSSMR.Mostafa badr4
5
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) 5 CSSMR.Mostafa badr
6
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. 6 CSSMR.Mostafa badr
7
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 CSSMR.Mostafa badr7
8
Applying a single style sheet to multiple documents CSSMR.Mostafa badr8
9
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}. 9 CSSMR.Mostafa badr
10
Where? External CSS Internal CSS Inline CSS 10 CSSMR.Mostafa badr
11
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: First Paragraph 11 CSSMR.Mostafa badr
12
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 H1 {color: maroon} Body {background-image: url(”examples/saule.gif")} 12 CSSMR.Mostafa badr
13
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: 13 CSSMR.Mostafa badr
14
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. CSSMR.Mostafa badr14
15
Linking to Style Sheets OOpen an HTML file BBetween <head> and </head> add <link href=URL rel=“relation_type” type=“link_type”> ○U○URL is the file.css ○R○Relation_type=“stylesheet” ○L○Link_type=“text/css” SSave this file and the.css file in the same web server directory CSSMR.Mostafa badr15
16
An example of an external style sheet with an original html file Getting Started h1 {font-family: sans- serif; color: orange} b {color: blue} html file Text file of css named “stylesheet” CSSMR.Mostafa badr16
17
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 } CSSMR.Mostafa badr17
18
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;} CSSMR.Mostafa badr18
19
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;} CSSMR.Mostafa badr19
20
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') ;} CSSMR.Mostafa badr20
21
Formatting Hypertext Links TTo remove the style of underlining hypertext, use: A {text-decoration:none} 44 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} CSSMR.Mostafa badr21
Similar presentations
