REEM ALMOTIRI Information Technology Department Majmaah University.

WEB ENGINEERING AND APPLICATIONS

ITC 311

REEM ALMOTIRIInformation Technology Department

Majmaah University

Lecture 8

Cascading Style Sheets (CSS)

HTML & CSSContents

• 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 CommentsA 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

<!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>

Inline.html





<html>

<head>

<title>Inline Styles</title>

</head>

<body>

<p>This text does not have any style applied to it.</p>







<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 

7

8 <html >

9 <head>

10 <title>Style Sheets</title>

11

12 

13 <style type = "text/css">

14

15 em { background-color: #8000ff;

16 color: white }

17

18 h1 { font-family: arial, sans-serif } 19

20 p { font-size: 14pt }

21

22 .special { color: blue }

23

24 </style>

25 </head>

26

27 <body>

30 <h1 class = "special">Deitel & Associates, Inc.</h1>

31

32 <p>Deitel & 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 & 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 & 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

<!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>

External.html

body {background-color:#d0e4fe;}h1 {background-color:red;}p {background-color:green;}

External.css

1 /* Fig. 6.3: styles.css */

2 /* 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 { text-decoration: underline;

17 margin-left: .5cm }

styles.css(1 of 1)

• The text-decoration property is used to set or remove decorations from text.

- overline - line-through - underline - none

• li em declare a style for all em elements that are nested of li elements.

• The text-decoration property is used to set or remove decorations from text.

- overline - line-through - underline - none

• li em declare a style for all em elements that are nested of li elements.

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Linking External Style Sheets</title>

11 <link rel = "stylesheet" type = "text/css"

12 href = "styles.css" />

13 </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 </ul>

31

32 <p>

33 <a href = "http://www.food.com">Go to the Grocery store</a>

34 </p>

35

36 </body>

37 </html>

external.html(2 of 2)

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 text-alignment 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 default2. External style sheet3. 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:2. background-color3. background-image4. background-repeat5. background-attachment6. background-position


<!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>

Index.html


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

Style.css

body { background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; }

Can be compiled into:

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: repeatThe image is repeated both horizontally and vertically.This is default

background-repeat: no-repeat The image is not repeated

[background-attachment]

Value Description

Background-attachment:scroll he background image scrolls with 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-sizeThere are many different units (e.g. pixels and percentages) to choose from to describe font sizes.

Font Family

CSS Font FamiliesIn 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

<!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>

Example

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 elementAn 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 elementAs 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; }

CSS Code

body { margin: 100px 40px 10px 70px; }


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

h1 {background: yellow; padding: 20px 20px 20px 80px; } h2{background: orange; padding-left:120px; }

CSS Code• Set padding in an element:

CSS box model

CSS Borders

CSS Borders Properties:•border-width •border-color•border-style

P { border-width: 1px; border-style: solid; border-color: blue; }

p { border: 1px solid blue; }


CSS Code

CSS box model

border-style :

CSS Borders

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:


If we for example would like to have a text wrapping around a picture, the result would be like this:


How is it done?The HTML code for The previous example, look as follows:

img { float:left;width: 100px; }p { width: 400px; }

CSS Code

<img src="butterfly.gif" />

<p>An element can be floated to the... </p>


Another example: columns


Turning off Float - Using ClearElements after the floating element will flow around it. To avoid this, use the clear property.

Example:


<!DOCTYPE html><html><head><style>.pic{float:left;width:110px;height:90px;margin:5px;}.text_line{clear:both;margin-bottom:2px;}</style></head>

Example1 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>

Example2 of 2

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 block-level 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>

Date post:	18-Jan-2016
Category:	Documents
Upload:	mitchell-felix-kennedy
View:	224 times
Download:	0 times

REEM ALMOTIRI Information Technology Department Majmaah University.

Documents