Flexbox
The Flexible Box or flexbox is a CSS layout mode that provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes.
A flex container is an element that has the CSS property display set to flex to create a block-level flex container or inline-flex to create an inline flex container.
Flex container properties
Several CSS properties modify the default behavior of a flex container:
The flex-direction property defines the direction of flex items within the container using values: The gap property defines the space between flex items. Ex: gap: 10px; puts a 10px gap between all items. The justify-content property justifies the flex items within the container using values: The flex-wrap property determines if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items, using values:
Flex item properties
A flex item's width is determined by the combination of three CSS properties:
The flex-basis property sets the initial length of a flex item. The values can be auto (the default), a percentage, or a length unit. The default value auto makes the flex item the same initial length as the content. The flex-grow property sets a proportion that determines how much of the available container space should be assigned to the item. The default is 0, meaning the size should be based on the item's content. The flex-shrink property sets a proportion that determines the item's minimum size. The default is 1, meaning the size should shrink at the same rate as other items when the container width shrinks.
Grid Layout
Grid layout is a CSS layout mode that divides a webpage into a rectangular grid in which to position page elements. Grid layout is ideal for designing two-dimensional webpage layouts.
A grid container is an element that has the CSS property display set to grid to create a block-level grid container or inline-grid to create an inline grid container. Ex: <div style="display: grid">.
A grid item is a child element of a grid container that is by default placed into a single grid cell. The grid-template-columns property defines the grid container's number of columns and optionally the width of each column.
Ex: grid-template-columns: 50px 90px auto auto; specifies 4 values that create 4 columns: the first is 50px wide, the second is 90px wide, and the third and fourth columns are automatically sized to fit the remainder of the grid width. Controlling the grid container
The default behavior of a grid container can be modified with various CSS properties:
The gap property defines the gap between each grid row and column. Ex: gap: 5px 25px; puts a 5px gap between each row and a 25px gap between each column. The grid-template-rows property defines the height of each row. Ex: grid-template-rows: 20px 40px; makes the first row 20px tall and the second row 40px tall. The justify-content property horizontally aligns the grid items inside the grid container using values:
start - Aligns grid flush with the grid container's starting edge. The align-content property vertically aligns the grid items inside the grid container using values:
The justify-content and align-content properties have no effect unless the grid width or height is less than the grid container's width or height.
Controlling grid item placement
A grid item by default appears in a single row and column based on the ordering of the grid item within the grid container. However, grid items may be positioned at specific grid locations using the column line and row line numbers as illustrated in the figure below.
A grid item may be placed in a specific row or column or span multiple rows and/or columns using various following CSS properties:
The grid-row property lists the grid item's starting and ending row line numbers. Ex: grid-row: 1 / 3; makes the grid item start at row line 1 and end at row line 3, so the grid item spans 2 rows. The grid-column property lists the grid item's starting and ending column line numbers. Ex: grid-column: 1 / 4; makes the grid item start at column line 1 and end at column line 4, so the grid item spans 3 columns. The grid-area property lists the grid item's starting and ending row and column numbers. Ex: grid-area: 1 / 2 / 3 / 4; makes the grid item start at row line 1 and column line 2 and end at row line 3 and column line 4, so the grid item spans 2 rows and 2 columns.
Positioning Elements
The position property
The CSS position property gives developers more control over where elements should appear in the browser. position has four possible values:
static - Static positioning is the default positioning. relative - Relative positioning positions the element relative to the element's default position. fixed - Fixed positioning positions the element relative to the viewport in a fixed location. absolute - Absolute positioning positions the element relative to the nearest positioned ancestor.
Fixed positioning
Fixed positioning places the element at a fixed location in the viewport, and scrolling does not move the element. A viewport is the visible area of a webpage.
The fixed element is detached from the normal flow of elements in the page and is layered on top of the page contents. Absolute Positioning
Relative to Nearest Positioned Ancestor: An absolutely positioned element's location is determined relative to its nearest ancestor that uses fixed, absolute, or relative positioning. If no such ancestor exists, it positions itself relative to the entire document body. Scroll Behavior: An element with absolute positioning will move along with the page as you scroll. However, if one of its ancestors is fixedly positioned, the element will not scroll with the rest of the document, staying fixed according to the ancestor's position.
Z-Index Property
The z-index property in CSS controls the stacking order of elements that overlap each other on the web page. Here's a clearer breakdown of how it works:
Purpose: z-index helps specify which elements appear on top of others when they overlap. This is particularly useful for creating layered visual effects on a webpage. Values: It accepts integer values (including negative values). Elements with a higher z-index value are rendered on top of those with a lower z-index. The default value is auto, which equates to 0, placing the element in the natural stacking order. Context: z-index only works on elements whose position property is set to relative, absolute, fixed, or sticky. Elements not positioned (i.e., static positioning, the default) do not respect z-index. Stacking Context: Any positioned element with a z-index other than auto creates a new stacking context. This means its children are stacked relative to it, not the entire page. Overlap: Without a z-index value, elements follow the document flow order, meaning elements later in the HTML document stack on top of those that are earlier if they overlap. Using z-index is essential for managing the visibility of overlapping elements, such as dropdowns, modals, tooltips, and custom interactive components.
Special Effects
Text shadows
Shadows are added to text using the CSS property text-shadow, which accepts four values:
offset-x - Horizontal pixel offset of shadow offset-y - Vertical pixel offset of shadow blur-radius - Optional shadow blur (default is 0) color - Optional shadow color (default is usually the current CSS color) Box shadows
The CSS property box-shadow adds a shadow to the box around an element using the following properties:
inset - Optional value that draws the shadow inside the box (default is outside the box) offset-x - Horizontal pixel offset of shadow offset-y - Vertical pixel offset of shadow blur-radius - Optional shadow blur (default is 0) spread-radius - Positive value causes shadow to grow, negative values to shrink (default is 0) color - Optional shadow color (default is usually the current CSS color) Rounded corners
An element border's corners can be rounded using the CSS property border-radius, which is assigned one to four radius values.
Single value - All four corners are equally rounded Two values - First value is top-left and bottom-right corners, second value is top-right and bottom-left corners Three values - First value is top-left, second is top-right and bottom-left, third is bottom-right Four values - First value is top-left, second is top-right, third is bottom-right, fourth is bottom-left Each corner may also be assigned a radius using four CSS properties:
border-bottom-left-radius border-bottom-right-radius
Border images
The CSS property border-image renders an element's border using sections of an image. The border image takes the place of any border properties specified by border-style. The following CSS properties are specified by border-image all at once:
border-image-source - Image URL border-image-slice - Image section size border-image-repeat - "repeat" to repeat the image section, "round" to repeat the image section but resize the image if needed to fit, or "stretch" to stretch an image section
Animation
A CSS animation transforms an element's styles over a set time period, producing an animation. CSS animations have three advantages over JavaScript animations:
CSS animations do not require any JavaScript code. CSS animations often put less load on the computer and can use techniques to produce smoother animations when the computer's resources are limited. CSS animations allow the browser to more efficiently control animations and stop animations from running in browser tabs that are not visible. A CSS animation's behavior is defined with the @keyframes rule, which contains a keyframe list. A keyframe list has a name and contains the keyframes or the properties and values that will be animated.
A keyframe list contains two keyframe selectors:
from - The animation starting state that lists the CSS properties and values that apply when the animation begins to - The animation ending state that lists the CSS properties and values that the "from" values become by the time the animation ends To create an animation, two CSS properties must be defined:
animation-name - Names the keyframe list associated with the animation animation-duration - Length of the animation in seconds (s) or milliseconds (ms) An animation begins immediately when the browser renders the webpage unless an animation-delay is used to delay the start of the animation.
Styling Forms
Sass
Sass is a popular CSS preprocessor that uses CSS-like syntax to build complex CSS stylesheets. Other popular CSS preprocessors, like Less and Stylus, offer similar and unique features with different
Variables and arithmetic
SassScript is a set of extensions to CSS that allow properties to use variables, arithmetic, and functions. SassScript also provides basic control directives for performing conditional logic and looping.
A SassScript variable begins with a $ and can store one of the following data types:
Number - Any number that is optionally followed by a CSS unit. Ex: 3, 5.1, 20px String - "Double", 'single', or unquoted strings. Ex: "red", 'red', red Color - Color name or value. Ex: green, #00ff00, rgb(0,255,0) List of values - Separated by spaces or commas. Ex: 10px 20px 30px 40px, Helvetica, Arial, sans-serif Map - Key/value pairs. Ex: (111:red, 222:blue)
Functions
