CSS Styling and Selectors Quiz

CSS Introduction

• CSS is a W3C standard to describe the presentation of HTML elements
• CSS allows to assign font properties, colours, sizes, borders, background images, and the position of elements
• CSS is a language and can be added directly to any HTML element (via the style attribute) within the element, or in a separate CSS file
• Using CSS offers the ability to have degree of formatting control better than HTML, more accessible sites, faster download times, page adoption for different output mediums, and web sites that are significantly more maintainable

CSS Syntax

• A CSS document has style rules made of selectors, properties, and values
• A rule consists of a selector that identifies the HTML element or elements that will be affected, followed by property and value pairs called a declaration
• A series of declarations is also named the declaration block
• A declaration block can be together on a single line, or spread across multiple lines
• White space is ignored
• Each declaration is terminated with semi-colon
• Selectors tell the browser which elements in the HTML document will be affected
• Every CSS rule begins with a selector
• Thinking of selectors is that they are a pattern to select the HTML elements
• Each CSS declaration need a property
• CSS2.1 Recommendation has over a hundred property names

Commonly Used Properties

• Property types include:
  • Fonts: Includes font, font-family, font-size, font-style, font-weight, and @font-face
  • Text: Includes letter-spacing, line-height, text-align, text-decoration, text-indent
  • Colour and Background: Includes background, background-color, background-image, background-position, background-repeat, and colour
  • Borders: Includes border, border-color, border-width, border-style, border-top, border-top-color, border-top-width, etc.
  • Spacing: Includes padding, padding-bottom, padding-left, padding-right, padding-top, margin, margin-bottom, margin-left, margin-right, and margin-top
  • Sizing: Includes height, max-height, max-width, min-height, min-width, and width -Layout: Includes bottom, left, right, top, clear, display, float, overflow, position, visibility, and z-index
  • Lists: Includes list-style, list-style-image, and list-style-type

Values

• Each CSS declaration contains a value for a property
• The unit of any given value is dependent upon the property
• Some values are from a predefined list of keywords
• Other values are length measurements, percentages, numbers without units, colour values and URLs
• CSS supports different ways of describing colours:
  • Name: Using one of 17 standard colour names or one of 140 standard names in CSS3
  • RGB: Using numbers between 0 and 255 to describe the Red, Green, and Blue values for the colour
  • Hexadecimal: Using a six-digit hexadecimal number to describe the colour; hexadecimal number is preceded by a hash symbol (#)
  • RGBa: To add an alpha or degree of transparency value; transparency is a value between 0.0 (fully) and 1.0 (opaque)
  • HSL: To specify a colour using Hue Saturation and Light values
• Relative units are based on other elements whereas absolute units have a real-world size
• It is recommended not to use absolute units unless defining a style sheet for printing
• Pixel unit is a popular exception
• Types of relative units:
  • px (pixel): Relative in CSS2, absolute in CSS3 at 1/96 of an inch
  • em: Computed value of font-size; used in font sizes, it is in relation to the font size of the parent
  • %: Measure relative to another value
  • ex: Rarely used relative measure that is with x-height
  • ch: Seldom used relative element related to the width of zero
  • rem: Stands for root em, the font size of the root element,Unlike em, may be different for each element, rem is constant
  • vw, vh: Stands for viewport width and viewport height; percentage values between 0 and 100 of browser that allows item to resize
• Absolute units of measure
  • in (inches)
  • cm (centimeters)
  • mm (millimeters)
  • pt (points which equals 1/72 of an inch)
  • pc (pica equals 1/6 of an inch)
• It is helpful to add comments to style sheets which takes the form: "/* comment goes here */"
• To indicate that related style rules are together, and ways to hide a of rules, to with debugging

Location of Styles

• There are 3 types: author-created , user style sheet (custom), and browser style sheet (default)
• Author CSS style rules can be located in three different locations: Inline, Embedded and External
• Style rules can be combined and put in all 3 locations!
• Inline styles increase bandwidth and maintainability by placing them within the style attribute of HTML elements
• Embedded style sheets by and large discouraged and are style rules placed within the "" element inside the "" element
• External styles are located most commonly, as it provides the best maintainability, with style rules in a CSS extension. This format can update used documents with automated updates and performance through browser level caching of style sheets

Selectors

• The selector tells the browser which elements will have their style changed
• Allow the element to select individuals, HTML groups, elements that belong, or positioned
• Universal elements use HTML name
• • is the universal element selector for selecting all elements.
• Select a group by separating element names with commas. This sensible way to decrease complexity by identical CSS rules into a single rule.
• Reset quickly remove browser defaults that often reduce browser level margin inconsistencies, line heights and font sizes, with rulesets that can be placed in their own CSS file
• Class selectors simultaneously aim different HTML elements through a series of labelled HTML attributes
• The targeting is by using class selector, a period (.) followed by name
• An ID selector targets by attribute to style using pound/hash (#) by the name
• Only use an ID once per page
• ID selectors should reference a single document and element in the same HTML element
• Class selectors are when referencing related elements
• An attribute selector is the presence of a value for either the element, attribute or its value
• Attribute selector are helpful in the use of in styling of hyperlinks and images
• A pseudo-element selects where there is existing HTML but that still needs identifiable structure
• A pseudo element applies either to HTML element state or to their relation
• The most common use is for targeting link states
• Contextual selectors CSS3 known as combinators, select the elements based on their relation tree
• Descendant selector matches element contained in another. The space character idicates this selection.

The Cascade, how styles interact

• Because there are three different types of style sheets (author-created, user-defined, and the default browser style sheet), author-created style sheets can define multiple rules for the same HTML element and can lead to conflicting style applications
• The Cascade refers to how the browser deals with conflict determination
• the cascade metaphor: of water moving down a mountain downstream as its the given property of a parents affects its children elements
• Cascade Principles help the browser with defaults and conflicts: inheritance specificity and location
• Inheritance is the ability for CSS to modify descendants with font colour list and text properties with sizes, border background and spacing property changes
• To control what can be inherited, there is the ability also an inherit keyword to force the inheritances of a tag

Specificity the 2cd Casacade principle

• How browser determines which style rule to precedence
• The more 'specific' the selecter the more the takes precedence
• Specificity assigns weight to rule
• Class selectors are are specific then and override an element selector in the HTML
• ID selecter are more specific and take precedence than class selector
• Algorithm that counts
• 1 if the declaration is from a style attribute in HTML 0 otherwise
• The count to the number of ID attributes
• And then, count the number of attributes of pseudo class selector
• Count the number of elements. Or pseudo elements
• Finally then concatenate the four numbers and calculate the difference
• Start the value at zero ad 100 for ID value at 10 for each class value at one selector for psedo attribute
• Principle of location says, latest will get more weight

The Box Model

• The box model describes all HTML elements within element boxes
• Background colour or images and border of elements will be in the code
• Commonly use CSS to display presentation images than elements
• Background property allows setting many of different style property options the shorthand
• Background attachment specifies image will scroll
• Repeating repeats an image
• Background size allows changing the size of image
• Borders creates visual element separation, with multiple ways to style
• There is the combine short hand

TRBL border usage notation

• Border, margin, padding properties, have both long and short form usage notation
• This allows for top, right, bottom and left properties assignment
• Margins and padding are model, the style rules affect spacing between element and other elements within the document
• If the spacing between paragraphs from, one to two is, in the fact that adjoining the vertical margins also have code impacts

Margin impact

• Vertical elements collapse into a single margin
• If they do not collapse margin of first and of would be 180
• Collapsing is due to vertical margins often largest taking the value
• The height and The width properties specfic size of elements content area
• only can be specified Block level elements such as images

Potential sizing

• The text has font size and font face impacts are of actual
• Text size is determined via the pixel measurements of dimension

Sizing considerations

• Default is total size that includes padding borders
• box-sizing: content-box, uses style dimensions
• box-sizing: border-box the opposite
• The properties allows what to di with overflow of dimensions if you need to change visibility, have it hidden, add scroll
• Sizing is the percentage of sizing
• Ems also
• Percentages are relative to parent elements and its size
• Ems or relative for the text or with its sizing of that text

Text Styling

• There are two forms that the text displays font's and paragraphs
• Fonts change different web fonts often in a web stack
• Selector allows you to use on fonts, though it may not come to your web
• Percents are relative scaling