CSS Starter

CSS (Cascaded Style Sheets):

CSS (Cascaded Style Sheets)

Objectives:

Objectives What is Web page? Web construction What works Where? Advantages of CSS Linking CSS to web page CSS Syntax

What is Web page?:

What is Web page? For User :- It is source information presented in an aesthetically pleasant way before them. For Technical Person :- Technical person is interested in construction of the web page. Construction of web page :- Content Presentation Behavior

Construction of Web Page:

Construction of Web Page

What works Where?:

What works Where? HTML – Content CSS – Presentation JavaScript – Behavior Presentation plays a vital role in web designing. Look and feel makes user to interact with the web pages. Well presented is appreciated and accepted early.

Advantages of CSS:

Advantages of CSS Separate from contents. Thousands of web pages and one style sheet. Better control over presentation than presentational elements in HTML. Editing 1 style sheet is better than editing thousands of web pages. Bandwidth saving. Faster page loading. Web page becomes light weighted Separation of contents and presentation – makes easy to reuse contents. CSS - Independent of markup languages.

Linking CSS to web document:

Linking CSS to web document 3 methods to have style sheet in document External Style sheet (using .css file) Internal Style sheet (using style tag) Inline Style sheet (using style attribute of tags) Alternative External style sheet Not default but can be enable if the browser supports alternative style sheet. So we have 3 types of style sheets with us, External, Internal and Inline.

CSS Syntax:

CSS Syntax /* A Simple Example of Style Sheet. */ @import url(/base.css); h2 { color:#666; font-weight:bold; }

CSS Syntax continue...:

CSS Syntax continue... Part 1:- /* A Simple Example of Style Sheet. */ This is called as comment. It will not have any syntactical meaning. It is just for our reference. There will not be any effect of these sentences in web page We can write single line or multiline comments in this form.

CSS Syntax continue...:

CSS Syntax continue... Part 2:- @import url(/base.css); This statement is known as an at-rule. The @ symbol states that it is an at-rule. It can contain an import statement or a media query. As it shows above it is an import statement which imports the another css file into current file.

CSS Syntax continue...:

CSS Syntax continue... Part 3:- h2 { color : #666; font-weight : bold; } The things above shown are called as Rule Set. It consists of selectors, declaration block, declarations.

CSS Syntax continue...:

CSS Syntax continue... Part 3 continue...:- Selector :- text before '{'. Declaration Block :- { }. Declarations :- Statements inside {}.

CSS Syntax continue...:

CSS Syntax continue... The statements consists of 2 types of statements, At-rule Rule set An at-rule is like a directive to css parser. At-rule can consist of an import statement or a media query. A rule set is simply a block of instructions consisting of declaration statements. It includes selector, block and declarations.

Slide 14:

THANK YOU