Skip to content

read07.md

Latest commit

 

History

History
71 lines (63 loc) · 4.83 KB

read07.md

File metadata and controls

71 lines (63 loc) · 4.83 KB

this is read07

HTML && CSS

img

Introducing CSS:

CSS allows you to create rules that specify how the content of an element should appear.The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.

  1. BLOCK & INLINEMELEMENTS: Block level elements look like they start on a new line.Inline elements flow within the text and do not start on a new line.CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.

CSS Associates Style rules with HTML elements:

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

  1. Selectors: indicate which element the rule applies to.The same rule can apply to more than one element if you separate the element names with commas.
  2. Declarations: indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value),and are separated by a colon.

CSS Properties Affect How El ements 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. 1. Properties: indicate the aspects of the element you want to change. For example, color, font,width, height and border. 2. Values :specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color you want the text in these elements to be.

CSS Selectors :

There are many different types of CSS selector that allow you to target rules to specific elements in an HTML document.CSS selectors are case sensitive,so they must match element names and attribute values exactly the typs of selector are:

  • Universal Selector
  • Type Selector
  • Class Selector
  • ID Selector
  • Chil d Selector
  • Descendant Selector
  • Adjacent Sibling Selector
  • General Sibling Selector

How Css Rules Cascade :

  1. LAST RULE: If the two selectors are identical,the latter of the two will take precedence.
  2. SPECIFICITY : If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
  3. IMPORTANT :You can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element.

Color:

Color can really bring your pages to life.The color property allows you to specify the color of text inside an element. You can specify any color in CSS in one of three ways: 1. rgb values. 2. hex codes. 3. color names.

Background Color :

CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box.By default, most browser windows have a white background, but browser users can set a background color for their windows, so if you want to be sure that the background is white you can use the background-color property on the element. Every color on a computer screen is created by mixing amounts of red,green, and blue. To find the color you want, you can use a color picker.Computer monitors are made up of thousands of tiny squares called pixels. The color of every pixel on the screen is expressed in terms of a mix of red, green, and blue —just like on a television screen.

  1. RGB Values: Values for red, green, and blue are expressed as numbers between 0 and 255.
  2. Hex Codes: Hex values represent values for red, green, and blue in hexadecimal code.
  3. Color Names: Colors are represented by predefined names. However, they are very limited in number.
  4. Hue: Hue is near to the colloquial idea of color. Technically speaking however, a color can also have saturation and brightness as well as hue.
  5. Saturation: Saturation refers to the amount of gray in a color. At maximum saturation, there would be no gray in the color. At minimum saturation, the color would be mostly gray.
  6. Brigh tness : Brightness (or "value") refers to how much black is in a color. At maximum brightness, there would be no black in the color. At minimum brightness, the color would be very dark.

Contrast:

When picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible.

  1. Low Contrast: Text is harder to read when there is low contrast between background and foreground colors.
  2. High Contrast: Text is easier to read when there is higher contrast between background and foreground colors.
  3. Medium Contrast: For long spans of text, reducing the contrast a little bit improves readability.