CSS Fundamentals Quiz

Cascading Style Sheets (CSS)

• CSS is a stylesheet language used to style HTML content
• All visual layout of HTML pages should be done using CSS
• Advantages include separating content from appearance, more compact code, better control over visual layout, defining different layouts to different devices and updating visual appearance of several documents simultaneously
• A style sheet is a set of rules that indicates how to display HTML content
• CSS syntax uses a selector, followed by curly brackets {} containing rules
• CSS rules use property: value; pairs
• CSS examples include changing font family, adding underlines and colors to tags, and various ways of applying styles

Applying CSS

• There are three ways to apply CSS rules to an HTML document:
  • Inline: using the style attribute on an HTML tag
  • Internal: using a <style> tag
  • External: using a tag to an external file

CSS Units

• CSS offers various units for expressing length
  • Absolute units: px (pixel), pt (point), pc (pica), cm, mm, in
  • Relative units: %, em
• px typically matches a screen dot, pt is similar to px but used for print, pc equals 12pt, em equals the current font size

CSS Colors

• CSS has several methods to define colors
  • Reserved words (e.g., gray, green, blue)
  • Hexadecimal numbering (#RRGGBB)
  • rgb function (rgb(red, green, blue)
• All of these methods represent the same color

CSS calc Function

• The calc() function performs calculations for property values
• Syntax: calc(expression)
• Operators include +, -, *, /

CSS Selectors

• Only the tag defined in the rule is affected by a type selector (e.g., p{ opacity:0.5; })

• The universal selector matches the name of any tag (e.g., * { font-family: "Times New Roman"; })

• Class selectors format layout on particular areas, they require a "class" attribute

  • Examples of class selector (.question { font-weight: bold; }), (.answer { font-style: italic; })

• ID selectors are similar to class selectors but are case-sensitive and have a unique attribute value in the HTML document

  • Example ID selector (#heading_red { color: red; })

• Descendant selectors apply properties only if the tags are encapsulated (e.g., div p { text-decoration: underline; } )

• Pseudo-classes add effects to certain elements (e.g., a:hover { color: #FF00FF; }, a:visited {color: #00FF00; })

• Anchor Pseudo-classes can use attributes like :link, :visited, :hover, :active

• Form pseudo-classes select form controls such as input:focus, input:valid, input:invalid, input:required, input:optional , input:read-only, input:read-write, radio:checked.

• Other pseudo-classes/pseudo-elements define the nth-child (e.g., p:first-child ) or nth-last-child element.

CSS Selector Operators

• Certain patterns and operators combine CSS elements -A[attr] - sets an attribute value, A[attr=val] - set exact values, A[attr~=val]- contains exact value, A[attr^=val]- begins with val and more

CSS Grouping Selectors

• Applying the same properties to multiple selectors simultaneously
  • Examples (h1, span.effect, p { font-family: "Times New Roman”; });

CSS Background

• Background colour is specified with background-color followed by a hex code or a color name
• Background image is specified with background-image: url("image.jpg")
  • Additional options include no repeat, repeat-x, repeat-y, repeat.
• Background-attachment is used to control how background image scrolls with the page (fixed or scroll)
• Background-position controls the starting position of the background image. It can be specified in pixels or with keyword values like left, top, center.

CSS Fonts

• Font family specifies a fallback font
• Other properties like font-style, font-variant, font-weight, font-size specify different styles you can apply to fonts

CSS Text

• text-indent: indents the first line of a paragraph
• text-align: justifies, aligns left, right, center
• text-decoration: underlines, overlines, line-through, blink
• letter-spacing: space between characters
• text-transform: capitalizes, uppercases, lowercases
• margin: specifies outer spacing around blocks (e.g., 10%)
• margin-left: specifies indent (e.g., -6%)

List Markers

• List markers can be changed for unordered and ordered lists using the list-style-type property
  • For unordered lists, values include none, disc (default), circle, and square
  • For ordered lists, values include none, decimal (default), lower-alpha, lower-greek, lower-roman, upper-alpha, and upper-roman

Shorthand Properties

• Several properties can be combined into a shorthand version
  • Example: border: 2px dashed blue

Border Width and Order

• Values can be used clockwise (example: border-width: 4px 2px 5px 3px); //top, right, bottom, left).
• Order is important for border-color.

CSS - Important Concepts

• Cascade order of default browser style, external CSS files, internal CSS and inline styles.
• Cascading means that a style defined further down in the layers takes precedence over earlier ones
• Style sheet can import rules from other sheets

CSS Inheritance

• Tags in a hierarchy inherit characteristics of the parent elements
• Both properties (like font-family, font-size and color) will be inherited from the parent elements

CSS - Rules Priority

• More specific selectors have higher priority
• The rules with higher specificity independently of the order in them, take precedence

CSS - Rules Specificity

• Specificity is a calculation used to determine which rule takes precedence when identical properties are specified in different styles
• It depends on the number of ID’s, classes and tags

and Tags

• and help to format layouts
• uses block-level organization
• uses inline organization
• They are independent of other tags

Display vs Visibility

• display: none removes an element from the page
• visibility: hidden only hides an element, leaving the space
• visibility: collapse is a specific property for elements in a multi-row layout

Box Model

• HTML elements can be represented as boxes
• The box model consists of margins, borders, padding and content

Box Model - Dimensions

• Values (px, percentage) provide width and height dimensions

Box Model - Margin

• Sets outer spacing around blocks
• Use keyword values like top, right , bottom and left or comma separated values

Box Model - Padding

• Sets inner spacing within blocks
• Use keyword values like top, right , bottom and left or comma separated values

Box Model - Borders

• Adds visual borders to elements
• Values in shorthand order; top, right, bottom, left
• Use keywords like dotted, dashed, or solid, thickness

Box Model - Borders and Shadow

• Sets radius of corners (top, right, bottom, and left)—shorthand
• Attaches shadows of set thickness/color

Box Model - 2D and 3D Transformations

• Applies transformations like rotate, scale, skewness etc
• It's possible to use multiple CSS transformations in a composite transform.

Transform Origin

• Sets fixed point for transformations
• Values can be lengths in pixel/percentage or with keywords (top, bottom left, right, center)

Combining Transforms

• CSS applies transform functions in order from left to right

Browser Support

• Lists browser prefixes and versions to ensure compatible stylesheet with different browsers and versions

3D Transformations

• Supports transformations along the z-axis
• New properties like scale3D, translateZ, rotate3D, rotateX, rotateY, rotateZ, matrix3D, perspective, transform-style, backface-visibility

perspective Property

• Creates a 3D perspective effect for 3D objects
• perspective function applies perspective to child elements only
• perspective property gives a 3D space around child elements

transform-style Property

• Specifies how nested elements appear during 3D layout
• The flat value means child elements will not inherit the 3D position of their parent
• Preserve-3D means child elements will inherit 3D position of their parent

backface-visibility Property

• Determines whether the back side of an element is visible or hidden

transition Property

• Applies smooth transitions between CSS property values
• Can specify different transitions for different properties
• Transition duration represents the time for the transition to complete, timing-function defines how transition completes (e.g., slow, fast, or both), and delay sets delay period

@keyframes Rule

• Creates a set of styles applied at different points of an animation
• Defines styles that should be applyed during the animation (from, to, intermediate styles).

animation Property

• Defines the style and behavior for animations on elements
• It controls the animation name, duration, timing function, delay, iteration count (how many times the animation plays), direction (e.g. forwards), fill mode (e.g. both), and play state (e.g. paused).

Fonts

• Properties (font-family, font-size, font-weight, font-width, font-style) control the appearance of text.
• font family supports fallbacks when the browser doesn't support some type of font.

Text

• Property description to help specify text color (using RGB or hex), line-height, text decoration, alignment, indentation, capitalization, and word/letter-spacing in CSS.

Color

• Specifies background-color, text-color, and opacity (used to determine transparency of element)

Background

• Properties used to define background aspects (color, image, repeat, attachment, position).
• It defines various properties including color, image, repeat, and position

Tables

• Property for defining table layout algorithm (auto or fixed).
• Also define whether and how table borders collapse/are separated and whether or not to display empty table cells
• Describes how the caption is placed

Lists

• Properties (list-style-type, list-style-image, list-style-position, list-style) to customize list appearance (type, image, position)

Box Model - Width and Height

• Properties that define the width and height of a box (using values for px and percentage)

Box Model - Margin and Padding

• Defines the margins and paddings in a box using keyword values

Responsive Design

• Defines a way to create websites that look good across different devices (using grids, media queries, and frameworks).
• A technique used to create a site that looks good across different devices (e.g. computers, tablets, phones etc)
• It also includes several style practices for handling different screen sizes
• Use of CSS media queries to add different styles to handle diverse screen sizes (e.g. to scale the website for different device sizes).

CSS Media Queries

• Used to adapt styles to fit different media and devices
• Includes values such as print, screen, speech, and more properties
• This is about adjusting styles for different environments (e.g., printing, different sizes of screens).
• Consists of a media type and expressions
• Media queries enable dynamic layout of webpages for various physical devices