8/7/2019 Lesson_07 CSS

1/13

Web Engineering-II

Using ASP.net

Adnan Amin

Lecturer / Software programmer

Lesson: 07Topic: Cascading Style Sheets using ASP.net

By: Adnan Amin (Lecturer/Software

Programmer)

1

8/7/2019 Lesson_07 CSS

2/13

By: Adnan Amin

(Lecturer/Software

Whats CSS?

CSS stands for Cascading Style Sheets.

Cascading style sheets were introduced in late 1994.

it is a collection of formatting styles that can beapplied to a webpage.

Cascading Styles Sheets define how to display

HTML elements with good looking styles such ascolorful, Perfect and equal sizes, and

CSS can save our development time because once we

define a style then there is no need to type again andagain the same style for our multiple web pagesExternal CSS.

2

8/7/2019 Lesson_07 CSS

3/13

Defining CSS Sheets:

All about collecting formatting and layout information of web page.

Its contain sequential list of formatting instructions and rules.

Style:

Formatting and layout (eye-catching part of web site) is called style.

Its not concerned with the contents on the web page but only dealwith the layout or format of the contents (text, images) of webpage.

Cascading: CSS allows for a hierarchy (order) of formatting and layout.

Create multiple style sheets for web page.

Group formatting by usage.

By: Adnan Amin (Lecturer/SoftwareProgrammer)

3

8/7/2019 Lesson_07 CSS

4/13

Cascading order Styles can be more than one (redundant), and

overlapping each other. therefore, there is rules or

order for defining the cascading style sheets.

How to determine precedence of redundant

styles? Brower default

External style sheet

Internal style sheet Inline style

By: Adnan Amin (Lecturer/Software

Programmer)

4

8/7/2019 Lesson_07 CSS

5/13

A Style Sheet consists of the

following three parts: Selector

Property Value

Selector{ property :value}

By: Adnan Amin

(Lecturer/Software

Parts of CSS

5

8/7/2019 Lesson_07 CSS

6/13

The Selector: is normally the HTML tag to

be defined.

The Property: is the attribute of the tag to

be changed.

The Value: is the value of the property. The

property and value are separated by colon :and surrounded by braces.

By: Adnan Amin

(Lecturer/Software

Parts of CSS

6

8/7/2019 Lesson_07 CSS

7/13

H2 { color : green }

The above example changes the default color of

tag.

H1,H2,H3

{ color: green; font-family: comic sans MS; }

The above example modifies the color of ,

and tags and sets to green.

By: Adnan Amin

(Lecturer/Software

Examples

7

8/7/2019 Lesson_07 CSS

8/13

By: Adnan Amin (Lecturer/Software

Programmer)

Basic CSS Syntax A CSS rule has two main parts:

a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.The property is the style attribute you want to change. Each property has a value.

CSS declarations always ends with a semicolon, and declaration groups aresurrounded by curly brackets:

8

8/7/2019 Lesson_07 CSS

9/13

Types of Cascading Style Sheets

There are three types of CSS for using in

webpage or website.1. Inline style sheets

2. Internal style sheets3. External style sheets

By: Adnan Amin (Lecturer/Software

Programmer)

9

8/7/2019 Lesson_07 CSS

10/13

Using Inline Style sheets

using font-family script

using font-family arial unicode

By: Adnan Amin (Lecturer/Software

Programmer)

10

8/7/2019 Lesson_07 CSS

11/13

Using Internal Style Sheets

h1{

font-family: arial;

}

Hello Dear Students

By: Adnan Amin (Lecturer/Software

Programmer)

11

8/7/2019 Lesson_07 CSS

12/13

Using External Style Sheets Create style sheet, save it.

StyleSheet.css

body

{

background-

repeat:repeat-x;

background-

image:url("bg.gif")

}

Put the following code in

head section of another web

page.

By: Adnan Amin (Lecturer/Software

Programmer)

12

8/7/2019 Lesson_07 CSS

13/13

Thank you

CSS part 2 (next lecture)

By: Adnan Amin (Lecturer/Software

Programmer)

13