Download
1 / 25
250 likes | 375 Vues
This guide introduces CSS (Cascading Style Sheets), explaining its role in web design and how it operates. You will learn to create CSS rules that enhance your web pages' appearance by controlling the design elements. Explore block and inline elements, selectors, and different CSS versions while discovering how declarations, properties, and values function. Through practical examples, you'll understand how to connect HTML and CSS files, apply styles, and ensure compatibility across browsers. Mastering CSS will help you create more attractive and responsive websites.
E N D
IntroducingCSS What CSS does How CSS works Rules, properties, and values
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
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
CSS Associates Style rules with HTMLelements • A CSS rule contains two parts: a selector and a declaration
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
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.
Using External CSS • Results
CSS Selectors • chapter-10/css-selectors.html Universal Selector • Type Selector • Class Selector • ID Selector • Child SelectorDescendant Selector • Adjacent SiblingSelector • General SiblingSelector
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
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
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
UnderstandingColor • RGB Values • HexCodes • 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.
