Comprehensive guide to css attributes

Introduction

CSS (Cascading Style Sheets) is the language used to style HTML elements on a webpage. CSS attributes, also called properties, define how elements are rendered on the screen. From layout control to typography, colors, spacing, and more, CSS attributes give developers the power to create visually appealing and functional designs. This article lists all the major CSS attributes and links to feature articles that provide in-depth details about each.

---

Total CSS Attributes

There are over 150 CSS attributes commonly used to control the layout and style of a webpage. Below is a comprehensive list of these attributes, categorized by functionality, and each is hyperlinked to a more detailed article explaining its usage, syntax, and examples.

---

List of CSS Attributes (With Links)

Layout & Positioning

• display: Defines how an element is displayed (block, inline, etc.).
• position: Specifies the type of positioning method (static, relative, absolute, fixed, sticky).
• top: Defines the top position relative to the containing element.
• right: Defines the right position relative to the containing element.
• bottom: Defines the bottom position relative to the containing element.
• left: Defines the left position relative to the containing element.
• float: Specifies whether an element should float to the left or right.
• clear: Defines how an element should behave next to floated elements.
• z-index: Specifies the stack order of an element.
• overflow: Controls the behavior of content that overflows its container.
• box-sizing: Determines whether the width and height of an element include padding and borders.

Box Model

• margin: Sets the space outside an element’s border.
• padding: Sets the space inside an element’s border.
• border: Defines the border around an element.
• width: Specifies the width of an element.
• height: Specifies the height of an element.
• max-width: Specifies the maximum width an element can have.
• max-height: Specifies the maximum height an element can have.
• min-width: Specifies the minimum width an element can have.
• min-height: Specifies the minimum height an element can have.

Typography

• font-family: Specifies the font for text.
• font-size: Defines the size of the text.
• font-weight: Specifies the boldness of the text.
• font-style: Defines whether text is normal or italic.
• line-height: Specifies the height of a line of text.
• letter-spacing: Adjusts the space between characters.
• text-align: Aligns the text within an element (left, right, center, justify).
• text-decoration: Adds decoration to text (underline, overline, line-through).
• text-transform: Controls the capitalization of text.
• word-spacing: Adjusts the space between words.
• white-space: Specifies how white spaces are handled in an element.

Colors & Background

• color: Defines the color of the text.
• background-color: Specifies the background color of an element.
• background-image: Sets an image as the background of an element.
• background-position: Defines the starting position of a background image.
• background-repeat: Specifies if/how the background image is repeated.
• background-size: Defines the size of the background image.
• opacity: Sets the transparency level of an element.

Flexbox

• display: flex: Enables Flexbox layout for an element.
• flex-direction: Defines the direction of flex items.
• justify-content: Aligns items along the main axis.
• align-items: Aligns items along the cross axis.
• flex-wrap: Controls whether items are forced onto one line or can wrap onto multiple lines.
• flex-grow: Specifies how much a flex item will grow relative to the rest.
• flex-shrink: Specifies how much a flex item will shrink relative to the rest.
• flex-basis: Sets the initial size of a flex item before space distribution.

Grid

• display: grid: Enables Grid layout for an element.
• grid-template-columns: Defines the number and width of columns.
• grid-template-rows: Defines the number and height of rows.
• grid-gap: Specifies the spacing between grid items.
• align-content: Aligns grid items along the cross axis.
• justify-items: Aligns grid items along the main axis.

Transitions & Animations

• transition: Specifies the transition effects for properties.
• transition-duration: Defines how long the transition takes.
• transition-delay: Specifies a delay before starting the transition.
• animation: Applies keyframe animations to elements.
• animation-duration: Defines how long an animation should run.
• animation-timing-function: Specifies the speed curve of the animation.

Visibility & Display

• visibility: Controls whether an element is visible or hidden.
• display: Defines the display behavior of an element (none, block, inline-block).
• overflow-x: Controls how content overflow is handled horizontally.
• overflow-y: Controls how content overflow is handled vertically.

Pseudo-Classes & Pseudo-Elements

• :hover: Styles an element when it is hovered over.
• :active: Styles an element when it is being activated (e.g., clicked).
• :focus: Styles an element when it gains focus.
• ::before: Inserts content before an element.
• ::after: Inserts content after an element.

Other Common Attributes

• cursor: Defines the type of cursor to display (e.g., pointer, default).
• box-shadow: Adds shadow to an element’s box.
• border-radius: Rounds the corners of an element’s border.
• outline: Draws a line around an element outside the border.
• visibility: Toggles the visibility of an element (visible, hidden).

---

Conclusion

CSS attributes allow developers to fine-tune every aspect of a webpage’s appearance and behavior. With over 150 CSS properties, each with unique capabilities, mastering them is essential for creating modern, responsive, and visually engaging web pages. The list above gives an overview of the most important CSS attributes. For detailed guides on each, follow the hyperlinks provided.