1 / 25

Introducing CSS

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.

afia
Download Presentation

Introducing CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IntroducingCSS What CSS does How CSS works Rules, properties, and values

  2. how tomakeyour 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

  3. UnderstandingCSS • 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 wdofthat box) is presented

  4. ExAMPLES

  5. CSS Associates Style rules with HTMLelements • A CSS rule contains two parts: a selector and a declaration

  6. CSS Properties Affect How Elements AreDisplayed • 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

  7. 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 <link> element to indicate where the CSS file is located.

  8. Using External CSS • Results

  9. Using Internal CSS

  10. CSS Selectors • chapter-10/css-selectors.html Universal Selector • Type Selector • Class Selector • ID Selector • Child SelectorDescendant Selector • Adjacent SiblingSelector • General SiblingSelector

  11. How Css Rules Cascade • chapter-10/cascade.html

  12. Inheritance • chapter-10/inheritance.html

  13. External Style Sheets • several advantages • Sometimes you might consider placing CSS rules

  14. DifferentversionsofCSS & BrowserQuirks • 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

  15. 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.

  16. CSS COLOR • How to specify colors • Color terminology and contrast • Background color

  17. Foreground Color • chapter-11/foreground-color.html

  18. Background COLOR • chapter-11/background-color.html

  19. UnderstandingColor

  20. UnderstandingColor • RGB Values • HexCodes • Color Names • Hue • Saturation • Brightness

  21. Contrast • Low, Medium. High

  22. CSS 3: Opacity • chapter-11/opacity.html

  23. CSS 3: HSL Colors • Hue, saturation, lightness

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

  25. 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.

More Related