What is CSS?
CSS is used to control the layout, colours, fonts and overall visual appearance of web pages. It allows developers to separate the structure and content of a webpage from its visual design.
CSS Selectors
CSS selectors are essential for styling specific HTML elements. The primary types include element selectors, targeting elements by their tag name (e.g., p for paragraphs); class selectors, pinpointing elements with a specific class using a dot (e.g., .button for elements with the class "button"); and ID selectors, singling out unique elements with a hash (e.g., #header for the element with the ID "header"). Beyond these basics, CSS offers advanced selectors like attribute selectors, pseudo-classes, and combinators for more nuanced styling options.
CSS Specificity
CSS specificity determines which rule takes precedence when multiple rules apply to the same element. It is calculated based on the following factors: inline styles have the highest specificity, followed by IDs, where additional IDs increase specificity, and then classes, attributes, and pseudo-classes, with each additional one increasing specificity. In cases of conflicting rules, the one with the highest specificity wins, and if specificity is equal, the rule later in the CSS document is applied.
CSS Box Model
The CSS box model serves as the foundation for structuring and arranging HTML elements within a webpage. Conceptually, it envisions a box that encompasses an element's content, padding, border, and margin. The content layer holds the actual textual or visual information, while padding adds a transparent buffer between the content and the border. The border, which can be decorative or functional, visually separates the content and padding. Finally, the margin establishes transparent space between the element and other surrounding elements.
Positioning
CSS positioning is a tool used for precise control over the arrangement of HTML elements on a webpage. By default, elements follow the document's natural flow, but CSS positioning allows developers to override this default behavior. The five positioning values in CSS offer a range of options for element placement: Static (default) aligns with the document flow, Relative allows positioning relative to the element's normal flow with adjustable offsets, Fixed positions elements relative to the viewport, Absolute situates elements relative to the nearest ancestor with a non-static position, and Sticky combines relative and fixed positioning behaviors based on a specified scroll point.
Flexbox
Flexbox, a powerful layout module, offers several key advantages over traditional layout approaches. It enables flexible distribution of space, allowing elements to expand or shrink to fit available space effortlessly. Flexbox also provides precise control over alignment and order along both the main and cross axes, enhancing layout customisation. Additionally, its responsive behavior ensures adaptability to different screen sizes and devices, maintaining design consistency across various viewports.
CSS Grid
CSS Grid is a two-dimensional grid system that allows you to create complex and responsive layouts. Unlike traditional layout methods like floats and positioning, Grid provides a more structured and flexible approach to arranging elements on a page. This grid system's key features include a two-dimensional layout structure with rows and columns, providing precise positioning and alignment of elements. CSS Grid ensures responsive layouts that seamlessly adapt to diverse screen sizes and devices, maintaining design consistency across various viewports. It allows for flexible placement of elements within grid cells, enabling control over their sizes using grid properties. Moreover, Grid introduces the capability for elements to overlap and nest within other grid areas, adding depth and complexity to layout designs.
Responsive Design
Responsive web design (RWD) is an approach to web design that ensures a website looks good and functions well on all devices, from desktop computers to smartphones and tablets. There are a number of techniques that can be used to create a responsive website including media queries. Media queries are conditional statements that allow you to apply different CSS styles based on the capabilities of the device or the current environment. They are part of the @media rule in CSS and are used to define different CSS styles for different media types, such as print, screen, and handheld devices.
CSS Variables
CSS variables, also known as CSS custom properties allow you to store and reuse values throughout your CSS code. They are like containers that hold values that can be referenced throughout your stylesheet. This makes your code more maintainable and easier to modify, as you can change the value of a variable in one place and it will be reflected everywhere it is used. CSS variables are a powerful tool that can make your CSS code more maintainable, reusable, and themeable.
CSS Reset VS CSS Normalize
CSS Reset and CSS Normalize are two approaches to addressing the inconsistencies in default styles across different web browsers. While CSS Reset aims to remove all default browser styles, providing a clean slate for styling, it can also lead to excessive CSS code. In contrast, CSS Normalize selectively targets elements to normalize their styles, preserving useful defaults and maintaining a balance between consistency and usability. As a result, CSS Normalize is more commonly used in modern web development, offering a more predictable and consistent design without sacrificing the benefits of default styling.