CSS 4

Background parameters

• background-color sets the background color of an element
• background-image sets the background image of an element
• background-size sets the size of the background image
  • auto sets the image to its original size
  • cover scales the image to cover the entire element, potentially cropping the image
  • contain scales the image to fit inside the element, potentially leaving empty space
• background-clip sets the clipping area for the background image
  • border-box clips the background image at the border
  • padding-box clips the background image at the padding
  • content-box clips the background image at the content
  • text clips the background image to the text itself
• background-attachment determines how a background image is attached to the element
  • fixed keeps the background image at the same position while scrolling
  • scroll keeps the background image at the same position on the page while scrolling, but the background image might scroll out of view alongside other elements
• background-repeat determines how the background image is repeated
  • repeat repeats the background image both horizontally and vertically
  • no-repeat does not repeat the image
  • repeat-x repeats the image only horizontally
  • repeat-y repeats the image only vertically
• background-position determines the position of the background image on the element
  • values can include center, top, left, bottom, right
  • values can be combined, for example, center top
  • units can be used: 100px 5px, 100% 5%
  • multiple images can be used: background-image: url(giftbox.png), url(giftbox.png);
• background is a shorthand property for all the background properties
  • section { background: #000 url(images/bg.gif) no-repeat left top; }

CSS Reset and Normalize

• CSS Reset is a collection of CSS rules used to override default browser styles for consistency
• CSS normalize aims to make default styles across browsers consistent, aiming for modern standards

CSS Naming Conventions

• BEM (Block, Element, Modifier) is a naming convention for classes:
  • Block: Represents a standalone element (ex: .card)
  • Element: A part of a Block (ex: .card__title)
  • Modifier: A variation of a Block or Element (ex: .card--active)

Benefits of BEM

• Improves code organization
• Reduces CSS footprint
• Promotes reuse of components

Key learnings

• CSS provides various properties for managing background styles
• CSS resets and normalize files help maintain consistency and improve web design
• BEM facilitates efficient CSS naming and organization
• Explore resources like CSS BEM, CSS BEM 2, and CSS BEM CHEAT SHEET

CSS Properties

• The float property specifies that an element should be placed along the left or right side of its containment box, allowing text and inline elements to wrap around it.
• The float property removes the element from the normal flow of the webpage while still remaining a part of it.
• Three possible values for float: none, left, right.
• The clear property specifies that an element can't be placed next to other floating elements.
• Three possible values for clear: left, right, both.

Block, Inline, Inline-Block

• HTML5 Flow content is rendered as block-level.
• HTML5 Phrasing content is rendered as inline.
• Block-level elements occupy the entire width of their container and can contain inline elements.
• Inline elements are rendered in line without breaking the line.

position and z-index

• The position property determines the final location of positioned elements on the page.

• The position property has five possible values: static, relative, absolute, fixed, sticky.

• The static value is the default for all elements and is not positioned.

• The relative value positions the element relative to its normal position.

• The absolute value positions the element relative to its nearest positioned ancestor, if none, it will position relative to the document body.

• The fixed value positions the element relative to the browser window.

• The sticky value positions the element relative to the viewport.

• The z-index property specifies the stacking order of elements, determining which element is displayed on top of the other when elements overlap.

• The z-index property has an integer value. Larger values cover elements with lower values, while elements with the same z-index are stacked in document order.

Examples

• position: relative elements are positioned relative to their original location.
• position: absolute elements are positioned relative to their nearest positioned ancestor (parent) element.
• Elements with position: fixed will be positioned in relation to the viewport, and will stay in place when the user scrolls up and down.
• .box elements with the same z-index are stacked in the order they appear in the HTML code.