CSS - Attributes Reference

Ethan D. - May 31, 2024

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:

Inline styles
Internal and external stylesheets (in the order they appear in the document)
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:

Inline styles
IDs
Classes, attributes, and pseudo-classes
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;
}

Background

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.