Summary cascading style sheet (CSS) and basic use of css

CSS Notes:
CSS Box Model

 A webpage is composed of boxes (elements)
 Each box has a content area, padding, borders,
and margins
 The box-sizing property determines how the
size of the box is calculated
 content-box (default): width/height only
applies to the content area
 border-box : width/height applies to the
content area, padding, and borders
Unit Measurements

 CSS uses various units for measurements:
 Absolute units (px, pt, pc) are fixed sizes
 Relative units (em, rem, %) depend on
other factors (e.g. font-size)
Understanding CSS Font Sizing: em vs.
rem

 em : Relative to the font-size of the parent
element
 rem : Relative to the font-size of the root (html)
element
 Use rem for consistent font-sizing across the site

CSS Fundamentals for Basic Website
Creation

,  CSS syntax includes selectors, properties, and
values
 Combining selectors with commas targets
multiple elements
 CSS can be linked externally, internally, or inline
CSS Syntax and Selectors

 Selectors target HTML elements
 Properties define what to change
 Values set the new style
 Common selectors: id ( #id ), class ( .class ), and
element ( element )

Combining CSS Selectors

 Combining selectors allows more specific
targeting
 Use a comma to separate multiple
selectors: .class, element

Loading CSS: External Files vs. Inline
Styles

 External files are linked at the top of the HTML
document
 Inline styles are added directly to the HTML
element
 External styles are preferred for better
maintainability
CSS Colors and the Box Model

 CSS uses color values to set backgrounds and text
colors

,  The box model is used to position and style
content, padding, borders, and margins
CSS: A Styling Language for Web Pages

 CSS is used to separate content from presentation
in web development
 Provides a way to apply consistent styles across a
webpage or site
 Simplifies the updating/modifying of site styles



CSS Syntax and Selectors
======================== CSS (Cascading
Style Sheets) is a styling language used for web pages.
CSS selectors are used to select the HTML elements that
we want to style. Here are some notes on CSS syntax
and selectors: CSS Selectors ------------- * A CSS selector
is a pattern used to select HTML elements. * CSS
selectors can be simple or complex, and can be
combined to select specific elements. * The most
common CSS selectors are: + Type selectors: select
elements based on their tag name (e.g. `p { color:
red; }` selects all `
` elements and sets their color to red). + Class
selectors: select elements based on a class attribute
(e.g. `.highlight { background-color: yellow; }` selects
all elements with a `class` attribute of `highlight` and
sets their background color to yellow). + ID selectors:
select a single element based on an `id` attribute (e.g.
`#header { font-size: 36px; }` selects the element with
an `id` attribute of `header` and sets its font size to 36
pixels). Combining CSS Selectors ----------------------- *
Multiple selectors can be combined to select specific
elements. * There are three ways to combine selectors:
+ Descendant selectors: select elements based on their
relationship to other elements (e.g. `div p { color:
blue; }` selects all `