Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Â
Teaching presentation
1. Teaching Presentation
CSS-Lesson: I
Topic: Cascading Style
Sheet (CSS) Basics
By Jakia Salam
12/9/2011
2. Lesson Objectives:
ď‚— Introduction to CSS
ď‚— Define a style rule or syntax
ď‚— The id and class Selectors
ď‚— Applying a style sheet to a Web Page
ď‚— Questions and Answers
12/9/2011
3. Introducing CSS
ď‚— CSS 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
5. Define style rule
ď‚— Basic 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
6. 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
7. The class selector
ď‚— The 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
8. Cascade in Cascading Style Sheet
ď‚— An webpage is a combination of several style sheets:
12/9/2011
9. Three Ways to Insert CSS
ď‚— External style sheet
ď‚— Internal style sheet
ď‚— Inline style
12/9/2011
10. External Style Sheets
ď‚— External style sheet is a separate document with a .css
extension.
ď‚— Linking an external style sheet <link> or @import:
12/9/2011
11. 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
12. Embedded Style Sheets
ď‚— Embedded 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
13. Inline Style Sheets
ď‚— Styles are directly applied to specific elements using style
attribute.
<element style=“style rules”>…………</element>
ď‚— Example:
Inline Style
ď‚— Very clear exactly what page element is being formatted
ď‚— Not recommend in most cases.
12/9/2011
20. Website with and without CSS
ď‚— http://www.jakiasalam.com/portfolio/websites/links.p
hp
ď‚— http://www.jakiasalam.com/portfolio/websites/linkste
st.php
12/9/2011
21. User defined
ď‚— Almost 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