a, p, h3 {color:green;font-size:14pt;}p {text-decoration:underline;}
Allows us to reduce redundancy by grouping together rules into rulesets to style multiples types of elements with common styles. What will text inside the <p> tag look like here?
<body><h1>This is h1 heading</h1><h3>And this is an h3 heading</h3> Here we have regular text.<p> Here we have a paragraph. </p></body>
id and class
id
Unique identifier for an element
Each unique id can only appear once per page
Each element can only have one id
class
Non-unique grouping attribute to share with many elements
Many elements (even of different types) can share the same class
Each element can have many different classes
Cascade and specificity
All styles “cascade” from the top of the sheet to the bottom
Source Order: If multiple CSS rules have the same specificity, the one that appears later in the stylesheet overrides earlier ones.
Specificity: More specific selectors (like IDs) override less specific ones (classes, tags).
inline
id
class
type
Importance (!important): Styles marked with !important override specificity and source order, becoming top priority.
The Document Object Model (DOM)
How the browser represents the hierarchy of a page. Very useful when thinking about selectors!
For example:
Every HTML tag (<p>, <em>, <body>, etc.) is part of the DOM, and has a place in a tree hierarchy.
They all have a parent (<body>’s is <html>) and almost always have a child (<title> is a child of <head>).
You don’t build a DOM, but the browser does, which allows you to access it.
The CSS box model module defines the margin and padding properties, which along with the height, width and border properties, make up the CSS box model.
Flexbox
Flexbox is a set of CSS properties for aligning block level content.
Flexbox defines two types of content: “containers” and “items”.
“Container” (sometimes referred to as the flex parent): the direct parent element of the HTML elements whose position you would like to control
“Items” (sometimes referred to as the flex children): the directly nested elements inside the parent container whose position you are controlling.
Most properties on the container can be set to determine how its items are laid out. Some properties can be directly applied to the flex items.
To label the container as a flex container we use the CSS set
indicates how to space the items inside the container along the main axis
align-items: flex-end; (flex-start, center, baseline,…) - indicates how to space the items inside the container along the cross axis
flex-direction: row; (column) - indicates whether the container flows horizontally or vertically (default row)
flex-wrap: wrap; (no-wrap, …) - indicates whether the container’s children should wrap on new lines
The Impact of Adjusting flex-direction
The default flex-direction is row. If you change the flex-direction to column you are changing the orientation of the axes.
The properties arranging elements along each axis does not change
Example: justify-content still controls items along the main axis. The main axis is just vertical now
CSS grid layout
It divides the page into major regions and defines the relationship in terms of size, position, and layering between parts of a control built from HTML primitives.
To label the container as a grid container we use the CSS set
div {display:grid;}
grid-column-gap and grid-row-gap specifies the gap between the columns and rows
grid-template-columns and grid-template-rows specifies the size of the rows in a grid layout
