CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and overall look of a webpage.
HTML (HyperText Markup Language) is used to structure the content of a webpage, while CSS (Cascading Style Sheets) is used to style and layout that content. HTML defines the content and structure, while CSS handles the visual presentation.
CSS allows for separation of content and presentation, which simplifies maintenance and improves accessibility. It enables consistent styling across multiple pages and provides more control over the layout and design of web elements.
A CSS selector is a pattern used to select the element(s) you want to style. It can be an element, class, ID, or attribute, and it determines which HTML elements the CSS rules apply to.
Different types of CSS selectors include element selectors (e.g., `div`), class selectors (e.g., `.class-name`), ID selectors (e.g., `#id-name`), attribute selectors (e.g., `[type="text"]`), and pseudo-class selectors (e.g., `:hover`).
The syntax of a CSS rule consists of a selector followed by a set of curly braces containing declarations. Each declaration includes a property and a value, separated by a colon, and each declaration is ended with a semicolon. For example: `selector { property: value; }`.
The property in a CSS rule specifies what aspect of the element's style is being set, such as `color`, `font-size`, or `margin`. It determines the type of style that will be applied to the selected element(s).
CSS properties can be categorized into different types, including layout properties (e.g., `margin`, `padding`), typography properties (e.g., `font-size`, `line-height`), color properties (e.g., `color`, `background-color`), and visual properties (e.g., `border`, `box-shadow`).
Margin is the space outside the border of an element, while padding is the space inside the border between the element's content and its border. Margin creates space between elements, while padding increases the space within the element.
An ID selector is unique and should be used to identify a single element on a page (e.g., `#header`). A class selector can be used on multiple elements and is used for grouping similar elements (e.g., `.button`). IDs have higher specificity than classes.
The CSS box model describes how elements are structured and how their dimensions are calculated. It consists of the content area, padding, border, and margin. Understanding the box model is crucial for layout and spacing.
The different parts of the CSS box model are the content area (where the content of the element is displayed), padding (space between the content and the border), border (surrounds the padding), and margin (space outside the border).
Inline elements (e.g., `span`, `a`) do not start on a new line and only take up as much width as necessary. Block elements (e.g., `div`, `p`) start on a new line and take up the full width available. Inline elements can be styled to behave like block elements, and vice versa.
Relative positioning (`position: relative`) positions an element relative to its normal position, while absolute positioning (`position: absolute`) positions an element relative to the nearest positioned ancestor. Absolute positioning removes the element from the normal document flow.
Fixed positioning (`position: fixed`) keeps an element fixed relative to the viewport, regardless of scrolling. Sticky positioning (`position: sticky`) toggles between relative and fixed positioning based on the user's scroll position, sticking the element in place until a defined scroll threshold is reached.
Float (`float: left` or `float: right`) moves an element to the left or right of its container, allowing text and inline elements to wrap around it. Clear (`clear: both`, `clear: left`, or `clear: right`) prevents elements from floating on a particular side, clearing the float.
CSS Grid Layout is a two-dimensional layout system for creating complex grid-based designs. It allows for the creation of grid containers and grid items with precise control over their placement and alignment within the grid.
CSS Flexbox is a one-dimensional layout model that allows for efficient arrangement of items within a container. It enables flexible item sizing and alignment along a single axis (horizontal or vertical) and adapts to different screen sizes and orientations.
CSS Grid Layout is used for two-dimensional layouts with rows and columns, allowing precise control over both axes. Flexbox is used for one-dimensional layouts along a single axis, providing flexibility in alignment and distribution of items.
The `display` property specifies the display behavior of an element, such as `block`, `inline`, `inline-block`, `flex`, or `grid`. It determines how an element is rendered and how it interacts with other elements on the page.
Values for the `display` property include `block` (element takes up the full width available), `inline` (element takes up only as much width as needed), `inline-block` (element behaves like inline but can have width and height), `flex` (flexbox layout), `grid` (grid layout), `none` (element is not displayed).
The `z-index` property controls the stacking order of positioned elements. Elements with higher `z-index` values are displayed in front of elements with lower `z-index` values. It only affects elements with a `position` value other than `static`.
The `background` property is shorthand for setting background color, image, position, size, repeat, and attachment. It allows you to apply various background styles to an element, including solid colors, gradients, or images.
The `font` property is shorthand for setting multiple font-related properties, including `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height`, and `font-family`. It simplifies font styling and ensures consistent typography.
Both `em` and `rem` units are relative units for font sizing. `em` is relative to the font size of the element's parent, while `rem` (root em) is relative to the font size of the root element (`html`). `rem` units provide more consistency across the document compared to `em`.
The `text-align` property controls the horizontal alignment of text within an element. Values include `left`, `right`, `center`, and `justify`, affecting how text and inline content are aligned within their container.
The `justify-content` property aligns items along the main axis (horizontal in a row, vertical in a column) in a flex container, while `align-items` aligns items along the cross axis (vertical in a row, horizontal in a column). They control different aspects of item alignment within a flex container.
The `overflow` property controls what happens when content overflows an element's box. Values include `visible` (content is not clipped), `hidden` (content is clipped and not visible), `scroll` (scrollbars are added), and `auto` (scrollbars are added only if necessary).
The `transform` property applies 2D or 3D transformations to an element, such as rotation, scaling, translation, or skewing. It allows you to modify the visual appearance and position of elements without changing the document flow.
The `transition` property defines the transition effects for changes in CSS properties. It allows you to animate changes over a specified duration, easing function, and delay, creating smooth visual effects for property changes.