using cascading style sheets css basics. goals understand basic syntax of cascading style sheets...
Post on 20-Dec-2015
236 views
TRANSCRIPT
GoalsGoals
Understand basic syntax of Cascading Understand basic syntax of Cascading Style Sheets (CSS)Style Sheets (CSS)
Understand the differences among inline, Understand the differences among inline, internal and external style sheetsinternal and external style sheets
Understand how to declare a styleUnderstand how to declare a style Understand how to attach specify valuesUnderstand how to attach specify values
Introduction to Styles and Introduction to Styles and PropertiesProperties
To ensure that future Web page authoring To ensure that future Web page authoring separates the definition of the elements in separates the definition of the elements in a document from how they appear, many a document from how they appear, many of the display and formatting extensions of the display and formatting extensions that were added to the HTML language, that were added to the HTML language, such as the such as the <font><font> element, were element, were deprecated in HTML 4.0 and in XHTML 1.0 deprecated in HTML 4.0 and in XHTML 1.0 in favor of CSS in favor of CSS
Introduction to Styles and Introduction to Styles and PropertiesProperties
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) are a are a standard set by the World Wide Web standard set by the World Wide Web Consortium (W3C) for managing the Consortium (W3C) for managing the design and formatting of Web pages in a design and formatting of Web pages in a Web browserWeb browser
Introduction to Styles and Introduction to Styles and PropertiesProperties
A single piece of CSS formatting A single piece of CSS formatting information, such as text alignment or font information, such as text alignment or font size, is referred to as a size, is referred to as a stylestyle
Some of the style capabilities of CSS Some of the style capabilities of CSS include the ability to change fonts, include the ability to change fonts, backgrounds, and colors, and to modify backgrounds, and colors, and to modify the layout of elements as they appear in a the layout of elements as they appear in a Web browserWeb browser
Introduction to Styles and Introduction to Styles and PropertiesProperties
CSS information can be added directly to CSS information can be added directly to documents or stored in separate documents or stored in separate documents and shared among multiple documents and shared among multiple Web pagesWeb pages
The term “cascading” refers to the Web The term “cascading” refers to the Web pages’ ability to use CSS information from pages’ ability to use CSS information from more than one sourcemore than one source
CSS PropertiesCSS Properties
CSS styles are created with two parts CSS styles are created with two parts separated by a colon: the separated by a colon: the propertyproperty, which , which refers to a specific CSS style, and the refers to a specific CSS style, and the value assigned to it, which determines the value assigned to it, which determines the style’s visual characteristicsstyle’s visual characteristics
Together, a CSS property and the value Together, a CSS property and the value assigned to it are referred to as a assigned to it are referred to as a declarationdeclaration or or stylestyle declarationdeclaration
CSS PropertiesCSS Properties
The properties available in CSS1 are The properties available in CSS1 are grouped into the following categories:grouped into the following categories: Color and background propertiesColor and background properties Font propertiesFont properties Text propertiesText properties Box propertiesBox properties Classification propertiesClassification properties
CSS PropertiesCSS Properties
CSS recommendation, Level 2 (CSS2) was CSS recommendation, Level 2 (CSS2) was released in 1998released in 1998
CSS2 builds on the properties in CSS1 and CSS2 builds on the properties in CSS1 and includes new features such as table includes new features such as table properties and the ability to change the properties and the ability to change the appearance of the mouse pointerappearance of the mouse pointer
Inline StylesInline Styles
The most basic method of applying styles The most basic method of applying styles is to use is to use inline stylesinline styles, which allow you to , which allow you to add style information to a single element add style information to a single element in a documentin a document
Inline StylesInline Styles
You use the You use the stylestyle attribute attribute to assign to assign inline style information to an elementinline style information to an element
You assign to the You assign to the stylestyle attribute a attribute a property declaration enclosed in quotation property declaration enclosed in quotation marksmarks
CSS ValuesCSS Values
The values you can assign to a CSS The values you can assign to a CSS property depend on what type of property property depend on what type of property it is it is
Some properties can be assigned a range Some properties can be assigned a range of valuesof values
CSS ValuesCSS Values
For instance, you can assign any font For instance, you can assign any font name that is available on a user’s system name that is available on a user’s system to the to the font-familyfont-family property property
For other properties, you must assign a For other properties, you must assign a value from a specific set of valuesvalue from a specific set of values
Length UnitsLength Units
Length unitsLength units refer to the units of refer to the units of measure that you can use in a style measure that you can use in a style declaration to determine the size or declaration to determine the size or positioning of an elementpositioning of an element
Whether a length unit is used for sizing or Whether a length unit is used for sizing or positioning depends on the property and positioning depends on the property and the element to which it is assignedthe element to which it is assigned
Length UnitsLength Units
You assign a measurement value to a You assign a measurement value to a property by assigning the number that property by assigning the number that represents the measurement, immediately represents the measurement, immediately followed by the unit of measurefollowed by the unit of measure
Length UnitsLength Units
CSS length units are either absolute or CSS length units are either absolute or relativerelative
Absolute length unitsAbsolute length units use an exact use an exact measurement to specify the size or measurement to specify the size or placement of an elementplacement of an element
Length UnitsLength Units
The following CSS length units are The following CSS length units are absolute:absolute: cm (centimeters)cm (centimeters) in (inches)in (inches) mm (millimeters)mm (millimeters) pc (picas)pc (picas) pt (points)pt (points)
Length UnitsLength Units
Relative length unitsRelative length units are preferred are preferred because they adjust properties according because they adjust properties according to screen size or user preferencesto screen size or user preferences
The following CSS length units are relative:The following CSS length units are relative: em (em space)em (em space) ex (x-height)ex (x-height) px (pixels)px (pixels)
Percentage UnitsPercentage Units
An alternative to relative length units is An alternative to relative length units is percentage unitspercentage units, which adjust , which adjust properties relative to other valuesproperties relative to other values
You assign a percentage unit value to a You assign a percentage unit value to a property by assigning a number that property by assigning a number that represents the percentage, immediately represents the percentage, immediately followed by the percent symbol (%)followed by the percent symbol (%)
Color UnitsColor Units
A A color unitcolor unit represents a color value that represents a color value that you can assign to a propertyyou can assign to a property
You can assign a color unit to a property You can assign a color unit to a property using any one of 16 color names defined in using any one of 16 color names defined in the CSS1 specificationthe CSS1 specification
Color UnitsColor Units
Most graphical computer systems use the Most graphical computer systems use the RGB color systemRGB color system for specifying colors for specifying colors
You can also assign a color using the RGB You can also assign a color using the RGB color systemcolor system
Refer to appendix/resource for information Refer to appendix/resource for information on assigning colors with the RGB color on assigning colors with the RGB color systemsystem