CSS Basics and Syntax

CSS Basics

• CSS stands for Cascading Style Sheets
• CSS controls how HTML elements are displayed
• CSS can control the layout of multiple web pages at once
• External stylesheets are stored in CSS files

CSS Syntax

• A CSS rule-set consists of a selector and a declaration block
• The selector points to the HTML element to be styled
• The declaration block contains declarations, each with a property name and value separated by a colon
• Declaration blocks are surrounded by curly braces
• A semicolon separates declarations
• CSS comments start with /* and end with */

CSS Selectors

• CSS selectors find HTML elements to be styled
• Simple selectors: select elements based on name, ID, or class
• Combinatory selectors: select elements based on relationships between them
• Pseudo-class selectors: select elements based on states (like hover or focus)
• Pseudo-element selectors: select and style parts of an element
• Attribute selectors: select elements based on attributes or attribute values

CSS Element Selectors

• Select HTML elements based on element name

Three Ways to Insert CSS

• Inline CSS: applies unique styles to a single element by adding the style attribute to the relevant element
• Internal CSS: places CSS rules within the <style> tag in the HTML document
• External CSS: uses separate CSS files linked to the HTML document

CSS Fonts

• Important font attributes:
  • font-color: sets text color
  • font-family: changes font face
  • font-size: increases or decreases font size
  • font-style: makes the font bold, italic, or oblique
  • font-variant: creates a small-caps effect
  • font-weight: increases or decreases font boldness/lightness

CSS Text

• Text properties that can be set:
  • color: sets text color
  • direction: sets text direction
  • letter-spacing: adds or subtracts space between letters
  • word-spacing: adds or subtracts space between words
  • text-indent: indents paragraph text
  • text-align: aligns document text
  • text-decoration: underlines, overlines, or strikethroughs text
  • text-transform: capitalizes text or converts to uppercase/lowercase
  • white-space: controls text flow and formatting
  • text-shadow: sets text shadow around text

CSS Colors

• RGBA Colors: extend RGB color values with an alpha channel for opacity (rgba(red, green, blue, alpha))
• The alpha parameter ranges from 0.0 (transparent) to 1.0 (opaque)
• HSL Colors: use hue, saturation, and lightness (hsl(hue, saturation, lightness))
• Other ways to set colors:
  • name: specify a color name (e.g., "red")
  • hex: specify a hex value (e.g., "#ff0000")
  • rgb: specify an RGB value (e.g., "rgb(255, 0, 0)")
  • transparent

Pseudo Classes

• Define special states of an element
• Used to style elements based on states like hover, visited, focus, etc.
• Syntax: selector:pseudo-class { property: value; }
• Common pseudo-classes:
  • :link: unvisited links
  • :visited: visited links
  • :hover: mouse over
  • :active: active element
  • :focus: element with focus
• Pseudo-class names are not case-sensitive
• Pseudo-classes can be combined

CSS Transforms

• transform property allows manipulating elements with 2D and 3D transformations.
• Common transform functions:
  • translate(x, y): moves an element horizontally and vertically
  • rotate(degrees): rotates an element clockwise or counter-clockwise
  • scaleX(value): scales an element horizontally
  • scaleY(value): scales an element vertically
  • scale(x, y): scales an element both horizontally and vertically
• transform-origin property allows control over the origin point for rotation and scaling.

CSS Flexbox

• Used for efficient layout and alignment
• Provides control over flex container and flex items
• Flex container: parent, set display: flex or display: inline-flex
• Flex items: children within the flex container
• Common Flexbox properties:
  • display: specifies the type of box used
  • flex-direction: specifies the direction of flex items
  • justify-content: aligns flex items horizontally
  • align-items: aligns flex items vertically
  • flex-wrap: specifies if items wrap or not
  • align-content: modifies the behavior of flex-wrap

Responsive Web Design: Viewport

• Adapts web pages for different screen sizes
• HTML5 viewport meta tag controls viewport dimensions and scaling
• width=device-width sets the width to follow the device's screen width
• initial-scale=1.0 sets the initial zoom level
• Avoid using large fixed-width elements and content relying on specific viewport widths.
• Use CSS media queries to apply different styles for different screen sizes.

Responsive Web Design: Images

• Use the width or max-width property to make images responsive
• width: 100% and height: auto make the image scale responsively
• max-width: 100% scales the image down but never up
• Use media queries to display different images for different devices

This quiz covers the fundamentals of Cascading Style Sheets (CSS), including its role in controlling HTML element display, how to create rule sets, and various types of selectors. Test your knowledge on CSS syntax, external stylesheets, and styling methods.