Teaching presentation

Teaching Presentation

CSS-Lesson: I Topic: Cascading Style

Sheet (CSS) BasicsBy Jakia Salam

12/9/2011

Lesson Objectives:Introduction to CSSDefine a style rule or syntaxThe id and class SelectorsApplying a style sheet to a Web PageQuestions and Answers

12/9/2011

Introducing CSSCSS stands for Cascading Style Sheet. Web

developers define the look and feel of their Web pages using CSS

It allows developers and designers to separate content from design. CSS can be applied to any HTML and XHTML file to render HTML or XHTML document using a Browser

CSS provides consistent look and feel to an entire website through precise control of web page elements

Versions include CSS1, CSS2, CSS2.1 and CSS3 (current version)

Compatibility issues with different versions of CSS and browsers need to be considered as part of web site design

12/9/2011

Introducing CSS

12/9/2011

Define style ruleBasic syntax for CSS style is:

Selector { Property 1: value1; Property 2: value2; Property 3: value 3;……}

The selector is normally the HTML element you want to style

Each declaration consists of a property and a value

12/9/2011

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 “#”.The style rule below will be applied to the element

with id=“header”:

Result:

12/9/2011

The class selectorThe 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

The class selector uses the HTML class attribute, and is defined with a “.” The style rule below will be applied to the element with class=“imageright”

Result

12/9/2011

Cascade in Cascading Style SheetAn webpage is a combination of several style

sheets:

12/9/2011

Three Ways to Insert CSS

External style sheetInternal style sheetInline style

12/9/2011

External Style SheetsExternal style sheet is a separate document with a

.css extension. Linking an external style sheet <link> or

@import:

12/9/2011

Why external CSS is always a better choice?It keeps your website design and content

separate. It is much easier to reuse your CSS code if you have it in a separate file

You can make any changes to your web pages with just a few changes in a single CSS file

Clean code that is easy to understand

12/9/2011

Embedded Style SheetsEmbedded Styles are directly inserted within the

head element of an HTML document using <style> tag.

<style type=“text/css”> style rules </style>Example:

Code for Embedded Style

12/9/2011

Inline Style SheetsStyles are directly applied to specific elements using

style attribute.<element style=“style rules”>…………</element>

Example:

Very clear exactly what page element is being formattedNot recommend in most cases.

Inline Style

12/9/2011

CSS Demohttp://www.w3schools.com/css/demo_default.htm

12/9/2011

Some of my sample web designs using CSS

12/9/2011

Cascading Style Sheet Resources:W3 SchoolCSS Beginner TutorialWeb Style Sheets CSS tips & tricksZen Garden

12/9/2011

Thank You

12/9/2011

Any Questions?

12/9/2011

Website:jakiasalam.comNCDLA 2009 Distance Learning Awards

12/9/2011

Website with and without CSS

http://www.jakiasalam.com/portfolio/websites/links.php

http://www.jakiasalam.com/portfolio/websites/linkstest.php

12/9/2011

User definedAlmost all browsers allow users to modify the

default setting of the internal style sheet.Example: using user defined CSS in safari browser

12/9/2011