Scribd
Upload
65 views

Web Engineering-II: Lesson: 07

This document discusses cascading style sheets (CSS) and their use with ASP.net. It defines CSS as a collection of formatting styles that can be applied to webpages. CSS can save development time by allowing defined styles to be reused across multiple pages. The document describes the basic syntax of CSS which includes selectors, properties, and values. It also outlines the three types of CSS: inline styles, internal style sheets, and external style sheets. Examples are provided for how to implement each type.

Uploaded by

Adnan Amin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

Web Engineering-II: Lesson: 07

This document discusses cascading style sheets (CSS) and their use with ASP.net. It defines CSS as a collection of formatting styles that can be applied to webpages. CSS can save development time by allowing defined styles to be reused across multiple pages. The document describes the basic syntax of CSS which includes selectors, properties, and values. It also outlines the three types of CSS: inline styles, internal style sheets, and external style sheets. Examples are provided for how to implement each type.

Uploaded by

Adnan Amin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Lesson: 07

Topic: Cascading Style Sheets using ASP.net

Web Engineering-II
Using ASP.net
Adnan Amin
Lecturer / Software programmer

1 By: Adnan Amin (Lecturer/Software


Programmer)
What’s CSS?

 CSS stands for Cascading Style Sheets.


 Cascading style sheets were introduced in late 1994.
it is a collection of formatting styles that can be
applied to a webpage.
 Cascading Styles Sheets define how to display
HTML elements with good looking styles such as
colorful, 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 and
again the same style for our multiple web pages
“External CSS”.
2 By: Adnan Amin
(Lecturer/Software
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 deal
with the layout or format of the contents (text, images) of web
page.
 Cascading:
 CSS allows for a hierarchy (order) of formatting and layout.
 Create multiple style sheets for web page.
 Group formatting by usage.
3 By: Adnan Amin (Lecturer/Software
Programmer)
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

4 By: Adnan Amin (Lecturer/Software


Programmer)
Parts of CSS

A Style Sheet consists of the


following three parts:
 Selector
 Property
 Value

Selector { property :value}


5 By: Adnan Amin
(Lecturer/Software
Parts of CSS

 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.
6 By: Adnan Amin
(Lecturer/Software
Examples

 H2 { color : green }
 The above example changes the default color of
<H2> tag.

 H1,H2,H3
{ color: green; font-family: comic sans MS; }
 The above example modifies the color of <h1>,
<h2> and <h3> tags and sets to green.

7 By: Adnan Amin


(Lecturer/Software
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 are
surrounded by curly brackets:

8 By: Adnan Amin (Lecturer/Software


Programmer)
Types of Cascading Style Sheets

 There are three types of CSS for using in


webpage or website.
1. Inline style sheets
2. Internal style sheets
3. External style sheets

9 By: Adnan Amin (Lecturer/Software


Programmer)
Using Inline Style sheets
<body>
<h1 style="font-family: Script">
using font-family script
</h1>
<h2 style="font-family:@Arial Unicode MS ">
using font-family arial unicode
</h2>
</body>

10 By: Adnan Amin (Lecturer/Software


Programmer)
Using Internal Style Sheets
<head>
<style type="text/css">
h1{
font-family: arial;
}
</style>
</head>
<body>
<h1> Hello Dear Students </h1>
</body>

11 By: Adnan Amin (Lecturer/Software


Programmer)
Using External Style Sheets
 Create style sheet, save it. Put the following code in
“StyleSheet.css” head section of another web
body page.
{ <head>
background- <link
repeat:repeat-x; href="StyleSheet.css"
background- rel="stylesheet"
image:url("bg.gif") type="text/css"
} />
</head>

12 By: Adnan Amin (Lecturer/Software


Programmer)
Thank you
 CSS part 2 (next lecture)

13 By: Adnan Amin (Lecturer/Software


Programmer)

You might also like