Introduction Introduction To CSS To CSS by: MAYUR A. DAVANE by: MAYUR A. DAVANE
BCS FWD 6 IntroductionToCSSPowerPoint
Oct 20, 2015
IT
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction Introduction To CSSTo CSS
by: MAYUR A. DAVANEby: MAYUR A. DAVANE
HTML ReviewHTML Review
► What is HTML used for?► Give some examples of formatting tags in
HTML?► HTML is the most widely used language on
the Web► And we will discuss about second most
used► Does anyone know the name of the second
most widely used language?
History of CSSHistory of CSS
► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4.
► There were other styling languages proposed at this time, such as Style Sheets for HTML and JSSS but CSS won.
► CSS2 became the recommendation in 1998 by W3C
► CSS3 was started in 1998 but it has never been completed. Some parts are still being developed and some components work on some browsers.
What is CSS?What is CSS?
• CSSCSS stands for stands for CCascading ascading SStyle tyle SSheets heets • Styles - define Styles - define how to displayhow to display HTML elements HTML elements • Styles are normally stored in Styles are normally stored in Style SheetsStyle Sheets
DefinitionDefinition::Cascading Style Sheets (CSS) – is a rule based language that applies styling to your HTML elements.
You write CSS rules in elements, and modify properties of those elements such as color, background color, width, border thickness, font size, etc.
SelectorSelector
Definition: identifies the HTML elements Definition: identifies the HTML elements that the rule will be applied to, identified that the rule will be applied to, identified by the actual element name, e.g. <body>, by the actual element name, e.g. <body>, or by other means such as or by other means such as classclass attribute attribute values. values.
Example:Example:
*The selector is normally the HTML element you want to style
Property & ValueProperty & Value
Definition: Definition: The property is the style attribute you want to change. Each property has a value.
*Properties are separated from their respective values by *Properties are separated from their respective values by colons colons ::*Pairs are separated from each other by Pairs are separated from each other by semicolons semicolons ;;
DeclarationDeclaration
Definition: Each CSS line that includes Definition: Each CSS line that includes property and valueproperty and value
*Each declaration consists of a property and a value.
Declaration BlockDeclaration Block
Definition: multiple declaration lines Definition: multiple declaration lines including the curly bracesincluding the curly braces
Curly BracesCurly Braces
Definition: the curly braces contain the Definition: the curly braces contain the properties of the element you want to properties of the element you want to manipulate, and the values that you want manipulate, and the values that you want to change them to. The curly braces plus to change them to. The curly braces plus their content is called a declaration block. their content is called a declaration block.
Example:Example:
How CSS is Applied to A Web PageHow CSS is Applied to A Web Page
►CSS is applied to a web page using CSS is applied to a web page using three different methods:three different methods: Inline styleInline style Internal style sheetInternal style sheet External style sheet External style sheet
►CSS ColorsCSS Colors►You have seen a few CSS styles that You have seen a few CSS styles that
included color like: <p style=“color: included color like: <p style=“color: red;”> red;”>
►There are a few ways that you can set There are a few ways that you can set colors in CSS:colors in CSS:
Keywords, Hex values, RGB, HSL(a)Keywords, Hex values, RGB, HSL(a)
Colors and Formatting in CSSColors and Formatting in CSS
Advantages of using CSSAdvantages of using CSS
►Ease in editingEase in editing►Extended support for various Extended support for various
languageslanguages►Formatting extensionsFormatting extensions►Wide accessibilityWide accessibility►Ease of learningEase of learning
THANK YOUTHANK YOU
Related Documents
![Fwd: [Fwd: [Fwd: [Fwd: Fw: Fw: foarte frumosi]]]]](https://static.cupdf.com/doc/110x72/58e7f5801a28abf13f8b490d/fwd-fwd-fwd-fwd-fw-fw-foarte-frumosi.jpg)
