CSSMR.Mostafa badr1. Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What...

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.


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


Applying a single style sheet to multiple documents


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}.


Where?

External CSS Internal CSS Inline CSS


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>


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>


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>


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.


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


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 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 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 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 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') ;}


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}


CSSMR.Mostafa badr1. Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What...

Documents

Transcript of CSSMR.Mostafa badr1. Lesson 3 Creating an Style Sheet Lesson 2 Structure of the Style Lesson 1: What...