In-depth guide to advanced CSS and Flexbox properties.
Cascading Style Sheets (CSS) is a language used to describe the presentation of a document written in HTML. CSS enhances the look and feel of web pages by allowing developers to apply styles to elements. This reading aims to explain various CSS properties and Flexbox properties, including their usage, examples, and values, to help you build visually appealing web pages.
By the end of this reading, you will:
Controls the decoration applied to text, such as underlines, lines above or through text. This property can enhance the visual emphasis of text or indicate a change in text state (like a link being visited).
Example:
1text-decoration: underline;
Applies an underline to text.
Values:
none: No decorationunderline: Underlines the textoverline: Adds a line above the textline-through: Strikes through the textnoneSpecifies the thickness or boldness of the font characters. This property is used to make text stand out by adjusting its weight, which can enhance readability or create emphasis.
Example:
1font-weight: bold;
This makes the font bold.
Values:
normal: Normal weightbold: Bold weightbolder: Bolder than the parent elementlighter: Lighter than the parent element100-900: Numeric values (100 is the thinnest, 900 is the thickest)normalSets the space around an element, outside its border. Margins create space between elements, helping to separate and organize content visually.
Example:
1margin: 20px;
This adds a 20px margin on all sides of an element.
Values:
auto: Automatically calculates the marginlength: Specifies a fixed margin (e.g., 20px)percentage: Specifies a margin relative to the containing element’s width0Sets the space inside an element, between its content and its border. Padding increases the area within the element, creating spacing between the content and the edges of the element.
Example:
1padding: 10px;
This adds 10px padding inside an element.
Values:
length: Specifies a fixed padding (e.g., 10px)percentage: Specifies padding relative to the containing element’s width0Specifies whether an element should float to the left or right of its container. Floating elements are taken out of the normal document flow, allowing text and inline elements to wrap around them.
Example:
1float: left;
This makes an element float to the left.
Values:
none: The element does not floatleft: The element floats to the leftright: The element floats to the rightnoneDefines the radius of the corners of an element’s border box, creating rounded corners. This property is used to soften the appearance of boxes, buttons, and other UI elements.
Example:
1border-radius: 10px;
This rounds the corners of an element with a 10px radius.
Values:
length: Specifies a fixed radius (e.g., 10px)percentage: Specifies a radius relative to the element’s dimensions0Sets the width and height of an element. These properties determine the size of the element, affecting how much space it occupies within its container.
Example:
1width: 200px;
2height: 100px;
This sets the width to 200px and height to 100px.
Values:
auto: The browser calculates the dimensionlength: Specifies a fixed dimension (e.g., 200px)percentage: Specifies a dimension relative to the containing element’s dimensionsautoSpecifies the type of positioning method used for an element. Positioning determines how an element is placed within its containing block and how it interacts with other elements.
Example:
1position: relative;
This sets the element’s position relative to its normal position.
Values:
static: The default positioningrelative: Positioned relative to its normal positionabsolute: Positioned relative to the nearest positioned ancestorfixed: Positioned relative to the browser windowsticky: Switches between relative and fixed based on the scroll positionstaticFlexbox (Flexible Box Layout) is a CSS layout module designed to align and distribute space among items in a container, even when their size is unknown or dynamic. It allows you to create complex layouts with less code and provides greater control over alignment, direction, and order of items within a container.
Defines an element as a flex container, enabling flexbox layout for its children. This property makes it possible to use flexbox properties on the child elements to control their alignment, direction, and distribution.
Example:
1display: flex;
This turns the container into a flex container.
Values:
flex: Turns the element into a block-level flex containerinline-flex: Turns the element into an inline-level flex containerblock (for the display property in general)Aligns flex items along the main axis, which is horizontal by default. This property helps control the distribution of space between and around flex items within a container.
Example:
1justify-content: center;
This centers items along the main axis.
Values:
flex-start: Aligns items at the start of the main axisflex-end: Aligns items at the end of the main axiscenter: Centers items along the main axisspace-between: Distributes items evenly with the first item at the start and the last item at the endspace-around: Distributes items evenly with equal space around themspace-evenly: Distributes items evenly with equal space between themflex-startDefines the direction in which flex items are placed within the flex container. This property determines whether the items are displayed in rows or columns, and can also reverse the order.
Example:
1flex-direction: column;
This arranges items in a column.
Values:
row: Default direction, items are placed in a rowrow-reverse: Items are placed in a row in reverse ordercolumn: Items are placed in a columncolumn-reverse: Items are placed in a column in reverse orderrowSpecifies whether flex items should wrap onto multiple lines when they overflow the container. This property helps manage the layout when there are too many items to fit in one line.
Example:
1flex-wrap: wrap;
This allows items to wrap onto multiple lines if necessary.
Values:
nowrap: Items do not wrapwrap: Items wrap onto multiple lineswrap-reverse: Items wrap onto multiple lines in reverse ordernowrapAligns flex items along the cross-axis, which is vertical by default. This property is used to control the alignment of items within the flex container’s cross-direction.
Example:
1align-items: stretch;
This stretches items to fill the container’s cross-axis.
Values:
flex-start: Aligns items at the start of the cross-axisflex-end: Aligns items at the end of the cross-axiscenter: Centers items along the cross-axisbaseline: Aligns items’ baselinesstretch: Stretches items to fill the containerstretchAligns a single flex item along the cross-axis within its flex container. This property allows individual items to override the alignment set by align-items.
Example:
1align-self: center;
This centers the item within its flex container along the cross-axis.
Values:
auto: Inherits the alignment from the parent containerflex-start: Aligns the item at the start of the cross-axisflex-end: Aligns the item at the end of the cross-axiscenter: Centers the item along the cross-axisbaseline: Aligns the item’s baseline with the parent’s baselinestretch: Stretches the item to fill the containerautoShorthand property for flex-direction and flex-wrap. This property combines both the direction and wrapping behavior into a single declaration.
Example:
1flex-flow: row wrap;
This arranges items in a row and allows them to wrap onto multiple lines.
Values:
flex-direction and flex-wraprow nowrapAligns an individual flex item along the main axis. This property affects the alignment of a single item relative to its container’s main axis.
Example:
1justify-self: center;
This centers a single item within its flex container along the main axis.
Values:
auto: Inherits the alignment from the parent containerflex-start: Aligns the item at the start of the main axisflex-end: Aligns the item at the end of the main axiscenter: Centers the item along the main axisbaseline: Aligns the item’s baseline with the parent’s baselinestretch: Stretches the item to fill the containerautoCSS properties play a crucial role in web design, allowing developers to style and layout web pages effectively. Understanding advanced CSS properties and Flexbox properties is essential for creating visually appealing and responsive designs. By mastering these properties, you can build modern, user-friendly websites that adapt to different screen sizes and devices.
text-decoration property enhances text styling by allowing developers to add underlines, overlines, or strikethroughs to text, improving visual emphasis or indicating state changes like visited links.font-weight property is important because it adjusts the thickness of text, helping to create emphasis, improve readability, and establish a visual hierarchy in web design.Margin is better for creating space between elements, while padding is used to create space within an element, between its content and border.border-radius property can create circular elements by setting its value to 50% on a square element.position property affects element placement by determining how an element is positioned relative to its normal flow, its containing block, or the viewport, using values like static, relative, absolute, fixed, and sticky.flex-wrap property can be used to allow items to wrap onto multiple lines, ensuring a responsive layout.justify-content aligns items along the main axis (horizontal by default).align-items aligns items along the cross-axis (vertical by default).flex-direction property should be used when you need to control the direction of flex items, such as arranging them in rows, columns, or reversing their order.align-self property is most effective when you need to override the cross-axis alignment for a single flex item, without affecting the alignment of other items in the container.flex-flow property is a shorthand for the flex-direction and flex-wrap properties, allowing you to set both in a single declaration.justify-content property distributes space in a flex container by aligning items along the main axis, using options like flex-start, center, space-between, and space-around.display: flex property is essential because it defines an element as a flex container, enabling the use of Flexbox properties to control the layout and alignment of its child elements.align-items property controls the alignment of flex items along the cross-axis, ensuring consistent vertical alignment within the flex container.flex-wrap property allows flex items to wrap onto multiple lines, making it easier to create responsive designs that adapt to different screen sizes and prevent content overflow.border-radius property improves UI design by softening the appearance of elements, creating rounded corners, and enhancing the overall aesthetic of buttons, cards, and containers.