Introducing CSS

IntroducingCSSWhat CSS doesHow CSS worksRules, properties, and valueshow 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 pagesUnderstanding CSSImagine that there is an invisible box around every HTML elementBLOCK & INLINE ELEMENTSCSS allows you to create rules that control the way that each individual box (and the contents wdof that box) is presentedExAMPLES

CSS Associates Style rules with HTMLelementsA CSS rule contains two parts: a selector and a declaration

CSS Properties Affect How Elements Are DisplayedCSS 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

ExampleThis 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 CSSResults

Using Internal CSS

CSS Selectorschapter-10/css-selectors.html Universal SelectorType SelectorClass SelectorID SelectorChild SelectorDescendant SelectorAdjacent Sibling SelectorGeneral Sibling SelectorHow Css Rules Cascadechapter-10/cascade.html

Inheritancechapter-10/inheritance.html

External Style Sheetsseveral advantagesSometimes you might consider placing CSS rulesDifferent versions ofCSS & Browser QuirksCSS will tell you that some browsers display a few of the CSS properties in an unexpected wayWhen 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 toSummaryCSS treats each HTML e XX lement as if it appears inside its own boxRules are made up of selectors and declarationsDifferent types of selectors allow you to target your rules at different elements.Declarations are made up of two partsCSS rules usually appear in a separate document, although they may appear within an HTML page.CSS COLORHow to specify colorsColor terminology and contrastBackground colorForeground Colorchapter-11/foreground-color.html

Background COLORchapter-11/background-color.html

Understanding Color

Understanding ColorRGB ValuesHex CodesColor NamesHueSaturationBrightnessContrastLow, Medium. High

CSS 3: Opacitychapter-11/opacity.html

CSS 3: HSL ColorsHue, saturation, lightness

CSS 3: HSL &HSLAchapter-11/hsla.html

Summary ColorColor not only brings your site to life, but also helps convey the mood and evokes reactionsThere 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 colorCSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBACSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA.