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.