CSS Selectors and Combinators

• CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML
• Defines how elements should be displayed, including layout, colors, and fonts
• CSS enables the separation of presentation from content, making web development more efficient and maintainable

Selectors

• CSS selectors are patterns used to select the HTML elements you want to style.
• Basic selectors:
• Element selectors (e.g., p for paragraph elements)
• ID selectors (e.g., #my-element for the element with id="my-element")
• Class selectors (e.g., .my-class for elements with class="my-class")
• The universal selector * selects all elements
• Attribute selectors target elements based on their attributes (e.g [attribute], [attribute=value])

Combinators

• Define the relationship between selectors
• Descendant combinator (space): selects elements that are descendants of another element (e.g., div p selects all <p> elements inside <div> elements)
• Child combinator (>): selects elements that are direct children of another element (e.g., div > p selects all <p> elements that are direct children of <div> elements)
• Adjacent sibling combinator (+): selects the element that is the next sibling of another element (e.g., h1 + p selects the <p> element that is immediately after an <h1> element)
• General sibling combinator (~): selects all sibling elements that follow another element (e.g., h1 ~ p selects all <p> elements that are siblings of an <h1> element and come after it)

Pseudo-classes

• Used to define a special state of an element
• :hover styles an element when the user hovers the mouse over it
• :active styles an element when it is being activated (e.g., clicked)
• :focus styles an element when it has focus (e.g., when a form field is selected)
• :visited styles a link that has been visited
• :link styles a link that has not been visited
• :first-child selects the first child element of another element
• :last-child selects the last child element of another element
• :nth-child(n) selects an element that is the nth child of another element
• :nth-of-type(n) selects an element that is the nth element of its type among its siblings
• :not(selector) selects every element that is not the specified selector

Pseudo-elements

• Used to style specific parts of an element
• ::before inserts something before the content of an element
• ::after inserts something after the content of an element
• ::first-line styles the first line of a text
• ::first-letter styles the first letter of a text
• ::selection styles the portion of an element that is selected by a user

Specificity

• Determines which CSS rule is applied if multiple rules apply to the same element
• Calculated based on the types of selectors used in a rule
• Inline styles have the highest specificity
• ID selectors are more specific than class selectors, which are more specific than element selectors
• The universal selector (*) and combinators have no specificity value
• If two rules have the same specificity, the one that appears last in the CSS is applied
• !important can override specificity, but its use is generally discouraged

Box Model

• Defines how HTML elements are rendered as rectangular boxes
• Consists of content, padding, border, and margin
• Content is the actual content of the element (e.g., text, images)
• Padding is the space between the content and the border
• Border is the line that surrounds the padding and content
• Margin is the space outside the border, separating the element from other elements
• box-sizing property controls how the total width and height of an element are calculated
• content-box (default): width and height apply only to the content area
• border-box: width and height apply to the entire box (including content, padding, and border)

Display Property

• Specifies the type of rendering box used for an element
• block: element takes up the full width available and starts on a new line (e.g., <div>, <p>)
• inline: element only takes up as much width as necessary and does not start on a new line (e.g., <span>, <a>)
• inline-block: element is formatted as an inline element, but it can have a width and height set
• none: element is not displayed
• flex: element is displayed as a flexible container
• grid: element is displayed as a grid container

Positioning

• Controls how an element is positioned in the document
• static (default): element is positioned according to the normal flow of the document
• relative: element is positioned relative to its normal position
• absolute: element is positioned relative to its nearest positioned ancestor
• fixed: element is positioned relative to the viewport (the browser window)
• sticky: element is positioned based on the user's scroll position

Float

• Used to position elements to the left or right of their container
• Elements that are floated are taken out of the normal flow of the document
• Other content will flow around the floated element
• clear property controls the behavior of elements next to floated elements
• clear: both; often stops content from wrapping around floated elements

Grid Layout

• CSS Grid Layout is a two-dimensional layout system for the web
• Allows the creation of complex and responsive layouts with rows and columns
• Enabled by setting the display property of a container to grid or inline-grid

Grid Container

• The parent element that holds the grid items
• display: grid; creates a block-level grid container
• display: inline-grid; creates an inline-level grid container
• grid-template-rows defines the height of each row in the grid
• grid-template-columns defines the width of each column in the grid

Grid Items

• The direct children of the grid container
• By default, placed automatically in the grid cells
• grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties are used to specify the position and size of a grid item within the grid
• Shorthand grid-row and grid-column properties can be used to set both start and end lines
• Shorthand grid-area property can be used to set row and column start and end lines in one declaration

Grid Lines

• Horizontal and vertical lines that define the structure of the grid
• Lines are numbered starting from 1
• Negative line numbers can be used to count from the end of the grid

Grid Tracks

• The spaces between two grid lines
• Columns are column tracks and rows are row tracks

Grid Gaps

• grid-gap property specifies the size of the gap between grid items
• grid-row-gap specifies the size of the gap between rows
• grid-column-gap specifies the size of the gap between columns

Justify and Align Items

• justify-items property controls how grid items are aligned along the inline (row) axis within their grid cells
• align-items property controls how grid items are aligned along the block (column) axis within their grid cells
• Values:
• start: aligns items to the start of the grid cell
• end: aligns items to the end of the grid cell
• center: aligns items to the center of the grid cell
• stretch: stretches items to fill the grid cell (default)

Justify and Align Content

• justify-content property controls how the grid is aligned along the inline (row) axis within the grid container
• align-content property controls how the grid is aligned along the block (column) axis within the grid container
• These properties take effect when the total size of the grid tracks is less than the size of the grid container
• Values:
• start: aligns the grid to the start of the grid container
• end: aligns the grid to the end of the grid container
• center: aligns the grid to the center of the grid container
• stretch: stretches the grid to fill the grid container
• space-around: distributes space evenly around each grid track
• space-between: distributes space evenly between grid tracks
• space-evenly: distributes space evenly between and around grid tracks

Auto Placement

• If you don't explicitly place all grid items, the grid will automatically place them using the auto-placement algorithm
• grid-auto-flow property controls how auto-placed items are inserted into the grid
• Values:
• row: places items row by row (default)
• column: places items column by column
• dense: attempts to fill in gaps earlier in the grid if smaller items become available

Implicit vs Explicit Grid

• Explicit grid refers to the grid defined by grid-template-rows and grid-template-columns
• Implicit grid is created when you place items outside of the explicit grid
• grid-auto-rows and grid-auto-columns properties define the size of the implicit grid tracks

Named Grid Lines and Areas

• You can name grid lines using the grid-template-rows and grid-template-columns properties
• You can define grid areas using the grid-template-areas property
• This allows you to refer to grid lines and areas by name instead of number, making your code more readable

Minmax Function

• minmax(min, max) function defines a size range greater than or equal to min and less than or equal to max
• Can be used with grid-template-columns and grid-template-rows

Fr Unit

• Represents a fraction of the available space in the grid container
• Used to create flexible grid layouts where columns or rows grow and shrink proportionally

Repeat Function

• repeat(count, size) function repeats a track size multiple times
• Can be used with grid-template-columns and grid-template-rows to define multiple tracks with the same size

Media Queries

• Allow the application of different CSS rules based on the characteristics of the device or screen
• Common media features include width, height, orientation, and resolution
• Can be used to create responsive layouts that adapt to different screen sizes and devices