CSS - Attributes Reference


Syntax and Usage

CSS attributes style HTML elements by specifying visual properties. The basic syntax for applying CSS attributes consists of a selector, followed by a set of curly braces {} containing one or more property-value pairs separated by semicolons.

Example: Basic CSS Syntax

selector {
  property1: value1;
  property2: value2;

The selector can be an HTML element, class, ID, or a combination of these. The properties are the CSS attributes you want to apply, and the values are the specific settings for those attributes.

There are three ways to include CSS in your HTML document:

Method Description Example
Inline styles CSS attributes can be applied directly to an HTML element using the style attribute. html <p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
Internal stylesheet CSS rules can be defined within the <style> tag in the <head> section of an HTML document. This allows you to apply styles to multiple elements on a single page. html <head><style>p {color: blue;font-size: 16px;}</style></head>
External stylesheet CSS rules can be defined in a separate .css file and linked to an HTML document using the <link> tag in the <head> section. This allows you to apply styles consistently across multiple pages. html <head><link rel="stylesheet" type="text/css" href="styles.css"></head>

When multiple styles are applied to the same element, the cascading order and specificity determine which styles take precedence. The cascading order follows this priority:

  1. Inline styles
  2. Internal and external stylesheets (in the order they appear in the document)
  3. Browser default styles

Specificity refers to the weight given to different types of selectors. The more specific a selector, the higher its priority. The specificity order, from highest to lowest, is:

  1. Inline styles
  2. IDs
  3. Classes, attributes, and pseudo-classes
  4. Elements and pseudo-elements

Common CSS Attributes

CSS has many attributes to style HTML elements. Here are some common CSS attributes, grouped by their purpose:

Text Formatting

Attribute Description
color Sets the text color. Values can be color names, hexadecimal codes, RGB, or HSL.
font-family Specifies the font for the text. Multiple fonts can be listed as fallbacks.
font-size Sets the size of the text. Values can be in pixels, ems, or percentages.
font-weight Sets the boldness of the text. Values can be normal, bold, or a number (100-900).
text-align Aligns the text horizontally within its container. Values can be left, right, center, or justify.
text-decoration Adds decorations to the text, such as underline, overline, or line-through.

Text Formatting Example

p {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;

Box Model

Attribute Description
width and height Set the dimensions of an element. Values can be in pixels, percentages, or auto.
padding Sets the space between the element's content and its border. Values can be in pixels, percentages, or ems.
border Sets the element's border. It's a shorthand for border-width, border-style, and border-color.
margin Sets the space outside the element's border. Values can be in pixels, percentages, or ems.

Box Model Example

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;


Attribute Description
background-color Sets the background color of an element.
background-image Sets an image as the background of an element. The value is a URL to the image file.
background-repeat Specifies how a background image should be repeated. Values can be repeat, repeat-x, repeat-y, or no-repeat.
background-position Sets the starting position of a background image. Values can be in pixels, percentages, or keywords (e.g., top, center, bottom, left, right).

Background Example

body {
  background-color: #f0f0f0;
  background-image: url('pattern.png');
  background-repeat: repeat-x;
  background-position: center top;

Layout and Positioning

Attribute Description
display Specifies the display behavior of an element. Values include block, inline, inline-block, flex, grid, and none.
position Sets the positioning method for an element. Values can be static, relative, absolute, fixed, or sticky.
top, right, bottom, left Specify the position of an element relative to its positioned ancestor. Used with position: relative, absolute, fixed, or sticky.
float Floats an element to the left or right of its container, allowing text and inline elements to wrap around it.
clear Specifies whether an element can be next to floating elements that precede it or must be moved down below them.

Layout and Positioning Example

.box {
  display: inline-block;
  position: relative;
  top: 20px;
  left: 50px;
  float: left;

Flexbox and Grid

Attribute Description
display: flex Enables a flex container for one-dimensional layouts.
flex-direction Specifies the direction of the main axis in a flex container. Values can be row, row-reverse, column, or column-reverse.
justify-content Aligns flex items along the main axis. Values include flex-start, flex-end, center, space-between, and space-around.
align-items Aligns flex items along the cross axis. Values include flex-start, flex-end, center, baseline, and stretch.
display: grid Enables a grid container for two-dimensional layouts.
grid-template-columns Defines the columns and their widths in a grid layout.
grid-template-rows Defines the rows and their heights in a grid layout.
grid-gap Sets the gap (gutters) between grid rows and columns.

Flexbox Container Example

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

Grid Container Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px;

These are some of the many CSS attributes for styling HTML elements. By learning these common attributes, you can create good-looking and well-structured web pages.

Advanced CSS Attributes

In addition to the common CSS attributes, there are several advanced attributes that let you create more complex and dynamic styles for your web pages. These attributes can control transparency, apply transformations, create transitions and animations, add shadows, and apply visual filters to elements.

Attribute Description
opacity Sets the transparency of an element. Values range from 0 (fully transparent) to 1 (fully opaque).
transform Applies 2D or 3D transformations to an element, such as rotate, scale, skew, and translate.
transition Creates smooth transitions between different states of an element, such as hover or active states. It's a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.
animation Applies keyframe-based animations to an element. It's a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode.
box-shadow Adds shadow effects around an element's frame. You can set the horizontal and vertical offsets, blur radius, spread radius, and color.
text-shadow Adds shadow effects to text. You can set the horizontal and vertical offsets, blur radius, and color.
filter Applies graphical effects like blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow to an element.

Opacity Example

.semi-transparent {
  opacity: 0.5;

Transform Example

.rotated {
  transform: rotate(45deg);

.scaled {
  transform: scale(1.5);

Transition Example

button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s ease;

button:hover {
  background-color: red;

Animation Example

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  100% {
    transform: translateX(0);

.animated {
  animation: slide-in 1s ease-out;

Box Shadow Example

.shadowed {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

Text Shadow Example

h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);

Filter Example

.grayscale {
  filter: grayscale(100%);

.blurred {
  filter: blur(5px);

These advanced CSS attributes give you more control over the appearance and behavior of elements on your web pages. By combining them with the common CSS attributes, you can create visually appealing and interactive designs that engage your users.