teaching presentation
DESCRIPTION
TRANSCRIPT
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