Css
Lộ trình phát triển toàn diện Css theo tiêu chuẩn quốc tế nilbuild/developer-roadmap
Hướng dẫn từng bước từ nền tảng đến chuyên sâu giúp bạn làm chủ Css. Tích hợp tài liệu lý thuyết, bài viết thực chiến, video tham khảo và bài tập lập trình trực tiếp trên IDE.
Nền Tảng & Khái Niệm Cốt Lõi
Giai đoạn 1 tập trung hoàn thiện 21 chủ đề then chốt.
Absolute vs. Relative Units
Absolute units in CSS represent fixed measurements, like pixels (px) or inches (in), and will always render at the same size regardless of screen size or other factors. Relative units, on the other hand, are based on other values, such as the font size of the parent element (em), the viewport width (vw), or the root element's font size (rem), allowing for more flexible and responsive layouts.
Absolute Positioning
Absolute positioning in CSS allows you to precisely place an element relative to its nearest positioned ancestor (an ancestor with a position value other than `static`). If no such ancestor exists, the element is positioned relative to the initial containing block, which is typically the `<html>` element. Elements with `position: absolute` are removed from the normal document flow, meaning they don't affect the positioning of other elements around them.
Accessibility
Accessibility in CSS focuses on creating web content that is usable by everyone, regardless of their abilities or disabilities. This involves using semantic HTML, providing alternative text for images, ensuring sufficient color contrast, and designing layouts that are navigable with assistive technologies like screen readers. By following accessibility best practices, developers can build inclusive websites that provide a better experience for all users.
Attribute Selectors
Attribute selectors in CSS target HTML elements based on the presence or value of their attributes. They allow you to style elements more precisely than using just tag names or classes. For example, you can select all elements with a specific attribute, or only those where the attribute's value matches a certain string.
Background Attachment
Background attachment in CSS controls how a background image behaves when the page is scrolled. It determines whether the background image scrolls along with the content or remains fixed in place. This property is useful for creating visual effects like parallax scrolling or keeping a watermark visible regardless of the user's scroll position.
Background Color
Background color in CSS sets the color of an element's background. It fills the entire box of an element, including padding, but not the border or margin. You can specify the color using color names (like "red"), hexadecimal values (like "#FF0000"), RGB values (like "rgb(255, 0, 0)"), or other color formats.
Background Gradient
Background gradients in CSS allow you to create smooth transitions between two or more colors for the background of an element. Instead of a solid color, you can define a gradient that blends colors together, adding visual depth and interest to your designs. These gradients can be linear (flowing in a straight line), radial (emanating from a center point), or conic (rotating around a center point).
Background Image
A background image in CSS lets you add an image to the background of an HTML element. This image can be a simple pattern, a photograph, or any other visual element you want to display behind the content of your element. You can control how the image is positioned, repeated, and sized within the background area.
Background Position
Background position in CSS controls where a background image is placed within its element. It lets you specify the horizontal and vertical placement of the image, using keywords like `top`, `bottom`, `left`, `right`, and `center`, or with numerical values (pixels, percentages, etc.) to fine-tune the exact location. This property is useful for aligning background images in specific ways, creating visual effects, or ensuring that important parts of the image are always visible.
Background
In CSS, the term "background" refers to the properties that control the visual appearance of an element's background. This includes aspects like the background color, image, its positioning, whether it repeats, and its size. These properties allow you to add visual interest and customize the look of your web pages.
BEM
BEM (Block, Element, Modifier) is a CSS naming convention that helps developers create more modular, reusable, and maintainable code. It structures class names to reflect the relationships between different parts of a user interface. This approach makes it easier to understand the purpose of each CSS rule and how it relates to the HTML structure, leading to more organized and scalable stylesheets.
Block Display
The `display: block;` property in CSS makes an element behave like a block-level element. This means it will take up the full width available to it, starting on a new line and pushing subsequent content to a new line as well. Block elements typically define the major structural components of a webpage.
Border
In CSS, the `border` property defines the line that surrounds an HTML element's content and padding. It controls the border's style (like solid, dashed, or dotted), width (thickness), and color. You can set all these properties at once using the shorthand `border` property, or individually using `border-style`, `border-width`, and `border-color`.
Box Model
The CSS box model describes how elements on a webpage are structured as rectangular boxes. Each box consists of content (text, images, etc.), padding (space around the content), a border (a line around the padding and content), and a margin (space around the border). Understanding the box model is crucial for controlling the size and spacing of elements on a webpage.
Box Shadows
Box shadows in CSS are visual effects that add depth and dimension to elements by creating a shadow around their frames. These shadows can be customized in terms of color, offset (horizontal and vertical distance), blur radius, and spread radius, allowing designers to simulate various lighting conditions and create visually appealing interfaces. Box shadows can be applied to almost any HTML element, enhancing the user experience by highlighting important elements or adding a subtle sense of realism.
Cascading Order
Cascading order in CSS determines which styles are applied to an element when multiple conflicting rules target the same element. It's a set of rules that browsers follow to resolve these conflicts, prioritizing styles based on factors like importance, specificity, and source order. Understanding the cascading order is crucial for predicting and controlling how styles are applied to your web pages.
Child Combinator
The child combinator selector in CSS allows you to target elements that are direct children of a specified parent element. It uses the `>` symbol to denote this direct parent-child relationship. This selector ensures that styles are only applied to elements that are immediately nested within the parent, ignoring any deeper descendants.
Class Selectors
Class selectors in CSS are used to select HTML elements based on the `class` attribute. They allow you to apply specific styles to elements that share a common class name. You define a class selector by using a period (`.`) followed by the class name.
Color
Color in CSS is used to specify the foreground color of text and other elements. It can be defined using various methods, including named colors (like "red" or "blue"), hexadecimal values (like "#FF0000"), RGB values (like "rgb(255, 0, 0)"), RGBA values (which include an alpha channel for transparency), HSL values (hue, saturation, lightness), and HSLA values (which include an alpha channel for HSL).
Combinator Selectors
Combinator selectors in CSS define the relationship between elements based on their position in the document's structure. They allow you to target elements that are descendants, children, adjacent siblings, or general siblings of another element. This provides a powerful way to apply styles based on the HTML hierarchy, going beyond simple class or ID targeting.
Comments
Comments in CSS are notes that you add to your code to explain what it does, or to temporarily disable parts of your code. Browsers ignore these comments, so they don't affect how your website looks. You create a CSS comment by starting with `/*` and ending with `*/`.
Kỹ Năng Trọng Tâm & Thực Hành
Giai đoạn 2 tập trung hoàn thiện 21 chủ đề then chốt.
Container Queries
Container Queries are a CSS feature that allows styles to be applied to an element based on the size or other characteristics of its containing element, rather than the viewport. This enables more granular and context-aware styling, where components can adapt their appearance based on the space available within their parent container, leading to more flexible and reusable designs.
CSS Basics
CSS Basics encompass the fundamental building blocks for styling web pages. This includes understanding selectors (how to target specific HTML elements), properties (the visual characteristics you want to change, like color or font size), and values (the specific settings for those properties, such as "red" or "16px"). Mastering these basics allows you to control the presentation of your website's content.
CSS Functions
CSS functions are pre-defined operations that perform specific tasks within your CSS code. They allow you to manipulate values, perform calculations, and generate dynamic results, making your stylesheets more flexible and powerful. These functions are used within CSS property values to modify or create those values based on certain inputs.
CSS-in-JS
CSS-in-JS is a technique where CSS styles are written with JavaScript instead of external CSS files. This approach allows you to use JavaScript's capabilities, like variables, logic, and component-based architecture, to manage and apply styles directly within your JavaScript code. It offers benefits such as scoped styling, dynamic styling based on component state, and easier management of complex CSS projects.
CSS Modules
CSS Modules are a system where CSS class names and animation names are scoped locally by default. This means that the class names you define in your CSS files are automatically transformed to be unique, preventing naming collisions and making it easier to manage styles in large projects. They offer a way to write modular and reusable CSS, ensuring that styles are applied only to the intended components.
CSS Specificity
CSS Specificity is the set of rules that browsers use to determine which CSS declarations apply to an element when multiple conflicting rules exist. It's essentially a weighting system that prioritizes certain CSS selectors over others, ensuring that the most relevant style is applied. Understanding specificity is crucial for controlling how your CSS styles are applied and resolving unexpected styling issues.
CSS Units
CSS units define the size of elements and properties in a webpage. They specify how measurements like width, height, font size, and margins are interpreted by the browser. These units can be absolute, like pixels (px) or centimeters (cm), or relative, like em, rem, or viewport units (vw, vh), allowing for flexible and responsive layouts that adapt to different screen sizes and resolutions.
CSS Variables
CSS Variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a stylesheet. They allow you to store a value in one place and then reference it in multiple other places, making it easier to maintain and update your CSS code. This promotes consistency and reduces repetition, leading to more efficient and manageable stylesheets.
CSS
CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and other visual aspects of web pages, ensuring a consistent and visually appealing user experience across different devices and screen sizes. Essentially, CSS separates the content of a webpage from its design, making websites easier to maintain and update.
Declaration
A declaration in CSS is a single statement that specifies a property you want to style and the value you want to assign to that property. It's the fundamental building block for applying styles to HTML elements. Each declaration consists of a property name (like `color` or `font-size`), followed by a colon (`:`), and then a value (like `red` or `16px`). Declarations are always placed inside a CSS rule set, within the curly braces `{}`.
Descendant Combinator
The descendant combinator in CSS is a way to select HTML elements that are descendants of another element. It uses a single space (" ") between two selectors. The selector on the right side of the space will select all elements that are descendants (children, grandchildren, etc.) of the element specified by the selector on the left side.
Direction
The `direction` property in CSS sets the text direction of block-level elements, influencing how text, table columns, and inline-level boxes flow. While `direction` can be used to switch between left-to-right (LTR) and right-to-left (RTL) layouts, it's generally better to use the HTML `dir` global attribute. The `dir` attribute semantically indicates the document's or element's text direction, providing better accessibility and separation of concerns compared to styling direction with CSS.
Display
The `display` property in CSS controls how an element is rendered on a webpage, specifically defining its box type and how it interacts with other elements. It determines whether an element is treated as a block-level element (taking up the full width available), an inline element (flowing within the text), or something else entirely, like a table or a grid container. This property is fundamental for controlling the layout and structure of web pages.
Element Selectors
Element selectors in CSS target HTML elements directly by their tag name. They allow you to apply styles to all occurrences of a specific element, such as all `<p>` (paragraph) or `<h1>` (heading) tags on a webpage. This is the most basic type of selector and provides a straightforward way to style common HTML elements.
External CSS
External CSS involves writing CSS rules in a separate file (with a `.css` extension) and then linking that file to your HTML document. This approach promotes cleaner code, easier maintenance, and reusability of styles across multiple web pages. By separating the styling from the content, you can modify the look and feel of your website without altering the HTML structure.
Fixed Positioning
Fixed positioning in CSS allows an element to be locked in place relative to the browser window. This means that even when the user scrolls the page, the element remains visible in the same location on the screen. It's often used for navigation bars, footers, or other elements that need to stay persistent.
Flexbox
Flexbox is a CSS layout model that provides an efficient way to arrange, align, and distribute space among items in a container, even when their size is unknown or dynamic. It simplifies the creation of complex layouts by offering powerful tools for controlling the direction, order, size, and alignment of elements within a container. Flexbox is particularly useful for designing responsive and adaptable user interfaces.
Floating Elements
Floating elements in CSS allow you to take an element out of the normal document flow and position it to the left or right of its containing element. Other content will then flow around the floated element. This technique is commonly used to create layouts where text wraps around images or to position elements side-by-side.
Flow Layout
Flow layout is the default way elements are positioned on a webpage. Elements are displayed one after another, like words in a sentence, following the natural flow of the HTML. Block-level elements take up the full width available and start on a new line, while inline elements flow within the content, only taking up the space they need.
Font Families
Font families in CSS are a way to specify the typeface used to display text on a webpage. They allow you to define a prioritized list of fonts, so if the user's computer doesn't have the first font available, the browser will try the next one in the list, and so on. This ensures that text is always displayed in a readable font, even if the preferred font isn't available.
Font Shorthand
The font shorthand property in CSS provides a way to set multiple font-related properties in a single declaration. Instead of specifying `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height`, and `font-family` individually, you can use the `font` property to define them all at once, making your stylesheets more concise and readable.
Kiến Trúc Nâng Cao & Tối Ưu
Giai đoạn 3 tập trung hoàn thiện 21 chủ đề then chốt.
Font Size
Font size in CSS determines the size of the text on a webpage. It's a fundamental property that controls the visual prominence and readability of text elements. You can specify font sizes using various units like pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw, vh). Choosing the right font size is crucial for creating a visually appealing and accessible design.
Font Style
Font style in CSS is used to select the appearance of a font, primarily to italicize or oblique text. It allows you to specify whether a font should be displayed in its normal, italic, or oblique version. This property is useful for emphasizing text or creating a visual distinction within a design.
Font Variant
Font variant in CSS allows you to control the display of different variations of a font, such as small caps, oldstyle numerals, and alternate glyphs. It provides a way to access OpenType features within a font, enabling richer typographic control beyond basic font styling like size and weight. This property offers a shorthand for setting several more specific font variant properties.
Font Weight
Font weight refers to the thickness or boldness of characters in a typeface. In CSS, it's a property that allows you to specify how heavy or light the font should appear. Values can be numeric (like 100, 400, 700) or descriptive (like `normal`, `bold`, `lighter`, `bolder`), offering control over the visual emphasis of text.
Frontend Development
Frontend development involves crafting the user interface and user experience of a website or web application. It focuses on the parts of a website that users directly interact with, such as buttons, text, images, and navigation. Frontend developers use languages like HTML, CSS, and JavaScript to build these interactive elements and ensure they function correctly across different browsers and devices.
Google Fonts
Google Fonts is a free library of over a thousand different font families that you can easily use on your website. Instead of relying on the limited set of fonts that come pre-installed on a user's computer, you can link to Google's servers and use any font they offer. This allows for greater design flexibility and ensures that your website's typography looks consistent across different devices and operating systems.
Grid Layout
Grid Layout is a two-dimensional layout system for CSS, enabling you to control the placement and sizing of elements within a grid container. It divides a webpage into rows and columns, allowing precise positioning of content and creating complex layouts with ease. This method offers flexibility and control over element arrangement, surpassing traditional methods like floats or positioning.
Grouping Selectors
Grouping selectors in CSS allows you to apply the same styles to multiple HTML elements simultaneously. Instead of writing the same CSS rules for each element individually, you can list the selectors separated by commas. This makes your CSS code more concise and easier to maintain, as you only need to define the styles once for all the grouped elements.
Hex Colors
Hex colors in CSS are a way to specify colors using hexadecimal values. They use a six-digit code, prefixed with a hash symbol (#), to represent the red, green, and blue components of a color. Each pair of digits represents the intensity of one of these primary colors, ranging from 00 (lowest intensity) to FF (highest intensity). For example, #FF0000 is red, #00FF00 is green, and #0000FF is blue.
HSL Colors
HSL (Hue, Saturation, Lightness) is a way to define colors in CSS using three components: Hue, which represents the color type on a color wheel (0-360 degrees); Saturation, which indicates the intensity of the color (0-100%); and Lightness, which determines how bright or dark the color is (0-100%). This model offers a more intuitive way to adjust colors compared to RGB, allowing developers to easily create variations of a color by modifying its hue, saturation, or lightness values.
HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a website, using elements to define headings, paragraphs, images, links, and other components that are displayed in a web browser. HTML forms the foundation upon which CSS and JavaScript build to create visually appealing and interactive web experiences.
ID Selectors
ID selectors in CSS are used to style a single, unique element on a webpage. They target an HTML element based on the value of its `id` attribute. An ID selector is denoted by a hash symbol (`#`) followed by the ID value.
Images and Filters
CSS allows you to incorporate images into your web designs and manipulate their appearance. You can use CSS to control image size, positioning, and how they interact with surrounding content. Additionally, CSS filters enable the direct application of visual effects, such as blurring, color adjustments, and transformations, to images, thereby enhancing their aesthetic appeal without requiring external image editing software.
Inline-Block
`inline-block` is a value for the CSS `display` property. It allows an element to flow like an inline element (sitting on the same line as other content) but also allows you to set its width and height, similar to a block-level element. This combines the benefits of both `inline` and `block` elements.
Inline CSS
Inline CSS involves directly embedding CSS styles within HTML elements using the `style` attribute. This method applies styles to individual elements, overriding external stylesheets or embedded styles. While offering quick and localized styling, it's generally discouraged for larger projects due to maintainability issues and separation of concerns.
Inline Display
The `display: inline` property in CSS is used to specify that an element should be displayed as an inline element. Inline elements flow along with the surrounding content, similar to how text flows within a paragraph. They only take up as much width as necessary to contain their content, and the width and height properties do not affect them.
Internal CSS
Internal CSS involves embedding CSS rules directly within an HTML document. This is achieved by using the `<style>` tag, typically placed inside the `<head>` section of the HTML file. The CSS rules defined within the `<style>` tag will then be applied to the elements within that specific HTML document.
CSS
CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML, including colors, layout, and fonts. It allows you to separate the content of your website (HTML) from its visual design, making websites more maintainable and adaptable. CSS uses rules to define how elements should be displayed, targeting specific HTML elements or groups of elements.
JavaScript
JavaScript is a programming language primarily used to create interactive and dynamic content on websites. It allows developers to add features like animations, form validation, and real-time updates without needing to reload the page. It works alongside HTML and CSS to define the behavior of web pages.
Keyframe Animations
Keyframe animations in CSS allow you to control the intermediate steps in a CSS animation sequence. Instead of just defining the start and end states, you can specify multiple points (keyframes) along the animation timeline, defining the styles an element should have at each point. This provides granular control over how an element's appearance changes over time, enabling complex and visually appealing animations.
Line Height
Line height in CSS controls the vertical space between lines of text within an element. It essentially defines the distance from the top of one line of text to the top of the next line. A larger line height creates more space, improving readability, while a smaller line height can make text appear cramped.
Hệ Sinh Thái & Triển Khai Thực Tế
Giai đoạn 4 tập trung hoàn thiện 21 chủ đề then chốt.
Lists
Lists in CSS are used to style HTML list elements, such as `<ul>` (unordered list), `<ol>` (ordered list), and `<dl>` (definition list). CSS provides properties to control the appearance of list markers (bullets or numbers), their position, and the overall styling of the list items. This allows you to customize the visual presentation of lists beyond the default browser styles.
Margin
Margin in CSS defines the space around an HTML element's border. It creates a gap between the element and surrounding elements, controlling the spacing and layout of content on a webpage. Margins can be set on all four sides of an element (top, right, bottom, left) and can have positive or negative values.
Media Queries
Media Queries are a powerful feature that allows you to apply different CSS styles based on characteristics of the device or screen being used to view a webpage. This enables you to create responsive designs that adapt to various screen sizes, resolutions, and orientations, ensuring an optimal viewing experience across a wide range of devices, from desktops to smartphones.
Multicolumn Layout
Multicolumn layout in CSS allows you to divide a block of content into multiple columns, similar to newspaper layouts. This feature enables text and other content to flow automatically from one column to the next, improving readability and making efficient use of screen space, especially for longer articles or lists. You can control the number of columns, the gap between them, and a rule (line) between the columns for visual separation.
Named Colors
Named colors in CSS are predefined color values represented by specific keywords. Instead of using hexadecimal codes or RGB values, you can use names like "red," "blue," "green," or "black" to style elements. These names are understood by browsers and directly translate to specific color values, offering a simple and readable way to apply basic colors to your web pages.
Next Sibling Combinator
The next-sibling combinator in CSS (represented by the `+` symbol) selects an element that immediately follows another specific element in the HTML structure. It targets the element that is the very next sibling, meaning it shares the same parent and appears directly after the first element in the source code. This allows you to style elements based on their immediate preceding sibling.
Display: None
`display: none` is a CSS property value that completely removes an element from the document flow. When applied, the element will not take up any space on the page, and it will not be rendered at all. It's as if the element doesn't exist in the HTML structure for visual purposes.
Opacity
Opacity in CSS controls the transparency of an element. It determines how much of the background behind the element is visible. A value of `1` means the element is fully opaque (not transparent), while a value of `0` means it is completely transparent (invisible). Values between `0` and `1` create varying degrees of transparency.
Outline
In CSS, the `outline` property draws a line around an element, outside the border. Unlike borders, outlines don't affect the element's dimensions or position in the layout. They are primarily used for highlighting elements, often for accessibility purposes like indicating focus. You can control the style, color, and width of the outline.
Padding
Padding refers to the space between the content of an element (like text or an image) and its border. It essentially creates a cushion around the content within the element's box. You can control the amount of padding on all four sides of an element (top, right, bottom, left) individually or set a uniform padding for all sides.
Performance
CSS performance refers to how efficiently CSS code is processed and rendered by a browser, impacting the speed and responsiveness of a website. Optimizing CSS for performance involves techniques like minimizing file sizes, reducing the complexity of selectors, and leveraging browser caching to ensure a smooth user experience.
Position
Position in CSS controls how an element is placed within its containing element or the document itself. It allows you to precisely define where an element appears on the page, influencing its relationship with other elements and the overall layout. Different position values offer varying levels of control, from static placement within the normal document flow to fixed positions that remain in place even when the user scrolls.
PostCSS
PostCSS is a tool that uses JavaScript to transform CSS. It acts as a CSS parser and provides an API to analyze and modify the CSS code. It's often used with plugins to automate tasks like adding vendor prefixes, linting CSS, or supporting future CSS syntax.
Properties and Values
In CSS, properties are like instructions that tell the browser how to style an HTML element. Each property has a value, which specifies the exact styling to apply. For example, the `color` property determines the text color, and its value could be `red`, `#00FF00`, or `rgb(0, 255, 0)`. The combination of a property and its value is called a declaration, and declarations are the building blocks of CSS rules.
Pseudo-Classes
Pseudo-classes in CSS are keywords added to selectors that specify a special state of the selected element(s). They let you style an element based on things like user interaction (e.g., hovering), its position in the document structure (e.g., the first child), or other element characteristics (e.g., being checked). They allow you to apply styles to elements dynamically without needing to modify the HTML or use JavaScript.
Pseudo-Elements
Pseudo-elements in CSS let you style specific parts of an element. They allow you to add styles to elements that don't actually exist in the HTML structure, like the first line of a paragraph or content before or after an element. This is done using double colons (::) followed by the pseudo-element name.
Relative Positioning
Relative positioning in CSS allows you to shift an element from its normal position in the document flow. Instead of being fixed in place, the element is moved relative to where it _would_ have been if it were statically positioned. This movement doesn't affect the positioning of other elements around it; they behave as if the element were still in its original location. You specify the amount of movement using the `top`, `right`, `bottom`, and `left` properties.
Responsive Typography
Responsive typography is about making the text on a webpage look good and be easily readable on different screen sizes and devices. It involves adjusting font sizes, line heights, letter spacing, and other text properties to ensure optimal readability, whether someone is viewing the site on a large desktop monitor or a small mobile phone. The goal is to create a consistent and pleasant reading experience across all platforms.
RGB Colors in CSS
RGB in CSS allows you to define colors using the Red, Green, and Blue color model. You specify the intensity of each color component (Red, Green, and Blue) as a value between 0 and 255, or as a percentage from 0% to 100%. By combining different amounts of red, green, and blue, you can create a wide range of colors. For example, `rgb(255, 0, 0)` represents pure red, `rgb(0, 255, 0)` represents pure green, and `rgb(0, 0, 255)` represents pure blue.
rgba and hsla Colors
`rgba` and `hsla` are color models used in CSS to define colors with added transparency. `rgba` represents colors using Red, Green, Blue, and Alpha (transparency) values, while `hsla` uses Hue, Saturation, Lightness, and Alpha values. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque), allowing for semi-transparent colors.
CSS Rules
CSS rules are the fundamental building blocks of CSS stylesheets. Each rule specifies how particular HTML elements should be styled. A rule consists of a selector, which identifies the element(s) to be styled, and a declaration block, which contains one or more property-value pairs that define the styles to be applied. These property-value pairs are separated by semicolons and define the visual presentation of the selected elements.
Chuyên Gia & Mở Rộng Hệ Thống
Giai đoạn 5 tập trung hoàn thiện 20 chủ đề then chốt.
Sass
Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is compiled into CSS. It extends the capabilities of basic CSS by allowing you to use features like variables, nesting, mixins, functions, and inheritance. This makes CSS more maintainable, organized, and efficient to write.
Selector
A selector is a fundamental part of a CSS rule. It's essentially a pattern that identifies which HTML elements the rule should be applied to. Selectors can target elements based on their tag name, class, ID, attributes, or their relationship to other elements in the document.
Simple Selectors
Simple selectors in CSS are the basic building blocks for targeting HTML elements you want to style. They directly select elements based on their name (like `p` for paragraphs), ID (using `#`), or class (using `.`). These selectors are straightforward and provide a fundamental way to apply styles to specific parts of your webpage.
Static Positioning
Static positioning is the default way elements are placed on a webpage. Elements with static positioning are rendered in the order they appear in the HTML, following the normal document flow. You can't move them using the `top`, `right`, `bottom`, or `left` properties.
Sticky Positioning
Sticky positioning in CSS is a hybrid of relative and fixed positioning. An element with `position: sticky;` is initially positioned relatively, but when the user scrolls to a point where the element would normally scroll off-screen, it becomes fixed, sticking to the specified offset (e.g., `top: 0;`) until the containing block's boundary is reached.
Subsequent Sibling Combinator
The subsequent-sibling combinator in CSS is a way to select elements that are siblings (elements sharing the same parent) and appear directly after a specified element. It uses the tilde (~) symbol to denote this relationship. This selector targets all following siblings, not just the immediately adjacent one.
Tables
Tables in CSS are used to format tabular data on a webpage, arranging information into rows and columns. CSS provides properties to control the appearance of tables, including borders, spacing, alignment, and styling of individual cells, rows, and columns. These properties enable developers to create visually appealing and well-structured tables that present data effectively.
Text Alignment
Text alignment in CSS controls how text is positioned horizontally within its containing element. It determines whether text is aligned to the left, right, center, or justified (spread evenly across the line). This property enhances readability and visual appeal by organizing text in a structured manner.
Text Decoration
Text decoration in CSS refers to the styling applied to text to enhance its appearance or convey specific meanings. It primarily involves adding lines above, below, or through the text. Common decorations include underlines, overlines, and line-throughs, which can be customized with different colors, styles, and thicknesses to achieve various visual effects.
Text Shadows
Text shadows in CSS add depth and visual interest to text by creating a blurred, offset copy of the text behind it. This effect is achieved using the `text-shadow` property, which allows you to specify the shadow's horizontal offset, vertical offset, blur radius, and color. Multiple shadows can be applied to a single text element, creating complex and layered effects.
Text Spacing
Text spacing in CSS involves adjusting the space between characters, words, and lines of text. This control allows for improved readability and visual appeal by fine-tuning the horizontal and vertical spacing within text elements. Properties like `letter-spacing`, `word-spacing`, and `line-height` are used to manipulate these spaces.
Text Styling
Text styling in CSS involves controlling the visual appearance of text elements on a webpage. This includes properties that affect the font family, size, weight, color, and style of the text. Additionally, it encompasses properties for text alignment, decoration (like underlines), letter spacing, line height, and text transformations (such as capitalization).
Text Transform
Text transform in CSS controls the capitalization of text. It allows you to change the case of letters within an element, regardless of how the text is originally written in the HTML. You can transform text to uppercase, lowercase, capitalize (first letter of each word), or keep the original case.
Transforms
Transforms in CSS allow you to alter the shape and position of elements in a two-dimensional or three-dimensional space. This includes operations like rotating, scaling, skewing, and translating elements, providing a way to create visually engaging effects and manipulate the layout without affecting the underlying document flow.
Transitions
Transitions in CSS allow you to smoothly change property values over a specified duration. Instead of an abrupt change, a transition creates a gradual effect when a CSS property changes, such as when hovering over an element or when a class is added or removed. This adds visual polish and improves the user experience by making interactions feel more fluid and responsive.
Units with Functions
Units with functions in CSS allow you to dynamically calculate values for properties using functions like `calc()`, `min()`, `max()`, and `clamp()`. These functions enable you to perform mathematical operations and comparisons directly within your CSS, making your designs more flexible and responsive by adapting to different screen sizes and contexts. This helps in creating more dynamic and adaptable layouts.
Universal Selector
The universal selector in CSS is a simple selector that matches any element on a webpage. Represented by an asterisk (\*), it applies a specific style to all elements, regardless of their type or position in the document tree. It's often used to reset or normalize styles across different browsers, ensuring a consistent baseline appearance.
Visibility
The `visibility` property in CSS controls whether an element is visible or hidden. When an element's visibility is set to `hidden`, it disappears from the page, but the space it would have occupied remains. This is different from `display: none`, which removes the element from the document flow entirely, causing surrounding elements to reflow.
Width and Height
Width and height in CSS define the size of an element's content area. The `width` property sets the horizontal space an element occupies, while the `height` property sets the vertical space. These properties can be specified using various units like pixels, percentages, or keywords like `auto`.
Z-Index and Stacking Context
Z-index in CSS controls the vertical stacking order of elements that overlap. Elements with a higher z-index value will appear in front of elements with a lower z-index value. Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the viewer, which determines the order in which elements appear in front of or behind each other.