INTRODUCING CSS What CSS does How CSS works Rules, properties, and values

HOW TOMAKE YOUR WEB PAGES MORE ATTRACTIVE, CONTROLLING THE DESIGN OF THEM USING CSS.  Introduce you to how CSS works  Teach you how to write CSS rules  Show you how CSS rules apply to HTML pages

UNDERSTANDING CSS  Imagine that there is an invisible box around every HTML element  BLOCK & INLINE ELEMENTS  CSS allows you to create rules that control the way that each individual box (and the contents wdof that box) is presented

EXAMPLES

CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS  A CSS rule contains two parts: a selector and a declaration

CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED  CSS declarations sit inside curly brackets and each is made up of two parts: a property and a value, separated by a colon. You can specify several properties in one declaration, each separated by a semi-colon

EXAMPLE  This example uses two documents: the HTML file (example.html) and a separate CSS file (example.css). The fifth line of HTML uses the element to indicate where the CSS file is located.

USING EXTERNAL CSS  Results

USING INTERNAL CSS

CSS SELECTORS  chapter-10/css-selectors.html Universal Selector  Type Selector  Class Selector  ID Selector  Child SelectorDescendant Selector  Adjacent Sibling Selector  General Sibling Selector

HOW CSS RULES CASCADE  chapter-10/cascade.html

INHERITANCE  chapter-10/inheritance.html

EXTERNAL STYLE SHEETS  several advantages  Sometimes you might consider placing CSS rules

DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS  CSS will tell you that some browsers display a few of the CSS properties in an unexpected way  When you look at your site in more than one browser, you might find that some elements on your page do not look as you expect them to

SUMMARY  CSS treats each HTML e XX lement as if it appears inside its own box  Rules are made up of selectors and declarations  Different types of selectors allow you to target your rules at different elements.  Declarations are made up of two parts  CSS rules usually appear in a separate document, although they may appear within an HTML page.

CSS COLOR  How to specify colors  Color terminology and contrast  Background color

FOREGROUND COLOR  chapter-11/foreground-color.html

BACKGROUND COLOR  chapter-11/background-color.html

UNDERSTANDING COLOR

 RGB Values  Hex Codes  Color Names  Hue  Saturation  Brightness

CONTRAST  Low, Medium. High

CSS 3: OPACITY  chapter-11/opacity.html

CSS 3: HSL COLORS  Hue, saturation, lightness

CSS 3: HSL &HSLA  chapter-11/hsla.html

SUMMARY COLOR  Color not only brings your site to life, but also helps convey the mood and evokes reactions  There are three ways to specify colors in CSS: RGB values, hex codes, and color names.  Color pickers can help you find the color you want.  It is important to ensure that there is enough contrast between any text and the background color  CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA  CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA.