CSS Properties

CSS (Cascading Style Sheets) is a language used to describe a document's presentation and formatting in HTML or XML. It allows web developers to control the appearance of elements on a web page. Here are some commonly used CSS properties. A CSS property styles an aspect of an HTML element. Here are a few examples:

<div style="border: 1px solid black;
            font-size: 18px; "> Style This </div>

In this example, two CSS properties are applied to the div element: The border and the font-size properties.

A CSS property declaration consists of a property name and a property value. The property name comes first, then a colon, and then the value. Here is the general pattern a CSS property declaration follows:

If you specify more than one CSS property, each name-value pair is separated by a semicolon like this:

property1 : property-value1;
property2 : property-value2;

The last property declaration does not have to end with a semicolon, but it makes it easier to add more CSS properties without forgetting to put in that extra semicolon.

CSS Properties

There are many CSS properties you can specify for different HTML elements. These CSS properties are covered in their own texts.

1. Background: Specifies the background color or image of an element.

The color fills the space that is not covered by the image.
url("/img/css/sunflowers.jpg") points to the background image.
no-repeat specifies that the background image is not repeated.
right places the background image to the right of the element.

Background color: Sets the background color.

.my-element {
        background-color: #f1f1f1;
        }

Background-image: Sets the background image.

.my-element {
        background-image: url('image.jpg');
        }

Background-repeat: Determines if/how the background image should repeat.

.my-element {
        background-repeat: no-repeat;
        }

Background-position: Sets the starting position of the background image.

.my-element {
        background-position: center;
        }

2. Color: Sets the text color.

Color: Sets the color of the text.

.my-element {
        color: #333333;
        }

3. Typography: Controls the font properties.

Font-family: Specifies the font family.

.my-element {
                     font-family: Arial, sans-serif;
                     }

Font size: Sets the size of the font.

.my-element {
                  font-size: 16px;
                  }

Font-weight: Sets the thickness of the font.

.my-element {
                       font-weight: bold;
                        }

Font-style: Applies italic or oblique style to the font.

.my-element {
                    font-style: italic;
                     }

4. Margin: Defines the space around an element.

Margin-top, margin-right, margin-bottom, margin-left: Sets the margin for each side of the element.

.my-element {
                    margin: 10px 20px 15px 5px;
                     }

5. Padding: Specifies the space between an element's content and border.

Padding-top, padding-right, padding-bottom, padding-left: Sets the padding for each side of the element.

.my-element {
                    padding: 10px 20px 15px 5px;
                     }

6. Border: Sets the properties of an element's border.

Border-width: Specifies the width of the border.

.my-element {
                         border-width: 2px;
                         }

Border-color: Sets the color of the border.

 .my-element {
                        border-color: #cccccc;
                        }

Border-style: Determines the style of the border (e.g., solid, dashed, dotted).

.my-element {
                         border-style: dashed;
                          }

7. Width and Height: Sets the dimensions of an element.

Width: Sets the width of the element.

.my-element {
        width: 200px;
           }

Height: Sets the height of the element.

.my-element {
              height: 100px;
                }

8. Display: Controls how an element is displayed.

Display: Specifies the display behavior (e.g., block, inline, flex).

.my-element {
               display: block;
               }

9. Positioning: Positions an element relative to its containing element or the browser window.

Position: Sets the positioning method (e.g., static, relative, absolute, fixed).

.my-element {
                position: relative;
                 }

Top, right, bottom, left: Sets the position of the element.

.my-element {
                 top: 10px;
                 left: 20px;
                 }

10. Flexbox: Defines flexible boxes for layout purposes.

Display: flex: Enables a flex container.

.flex-container {
                      display: flex;
                      }

Flex-direction: Specifies the direction of flex items (e.g., row, column).

.flex-container {
                         flex-direction: row;
                          }   

Justify-content: Aligns flex items horizontally.

.flex-container {
                           justify-content: center;
                           }

Align-items: Aligns flex items vertically.

.flex-container {
                       align-items: center;
                         }

Flex: Specifies a flex item's flex grow, flex shrink, and flex basis.

 .flex-item {
                        flex: 1 0 auto;
                         }

11. Float: Specifies whether an element should float to the left, right, or not.

Float: Sets the floating behavior of an element (e.g., left, right, none).

.my-element {
                  float: left;
                    }

12. Clear: Specify whether an element should be positioned next to floating elements or clear them.

Clear: Sets the clearing behavior of an element (e.g., left, right, both, none).

.my-element {
                              clear: both;
           }

13. Opacity: Specifies the transparency level of an element.

Opacity: Sets the opacity of an element (0.0 to 1.0).

 .my-element {
                               opacity: 0.5;
                               }

14. Visibility: Controls the visibility of an element.

Visibility: Sets the visibility of an element (visible, hidden, collapse).

.my-element {
                            visibility: hidden;
                             }

15. Text Alignment: Sets the alignment of text within an element.

Text-align: Specifies the horizontal alignment of text (left, right, center, justify).

.my-element {
           text-align: center;
           }

16. Text Decoration: Adds decorative effects to text.

Text-decoration: Sets the decoration of text (underline, overline, line-through, none).

.my-element {
               text-decoration: underline;
                }

17. Text Transformation: Controls the capitalization of text.

Text-transform: Sets the capitalization of text (none, uppercase, lowercase, capitalize).

.my-element {
                text-transform: uppercase;
                  }

18. Text Overflow: Determines how text is handled when it overflows its container.

Text-overflow: Sets text behavior when it exceeds its container's width (ellipsis, clip).

 .my-element {
                 text-overflow: ellipsis;
                 }

19. Box Shadow: Adds a shadow effect to an element's box.

Box-shadow: Sets the shadow properties (color, horizontal offset, vertical offset, blur radius, spread radius).

.my-element {
                  box-shadow: 2px 2px 4px rgba (0, 0, 0, 0.5);
                  }

20. Transition: Specifies the transition effect for a property.

Transition: Sets the transition properties (property, duration, timing function, delay).

.my-element {
           transition: background-color 0.3s ease-in-out;
               }

21. Overflow: Specifies how content that overflows its container should be handled.

Overflow: Sets the overflow behavior (visible, hidden, scroll, auto).

.my-element {
  overflow: hidden;
}

22. Box Sizing: Determines how an element's total width and height are calculated.

Box-sizing: Sets the sizing behavior (content-box, border-box).

.my-element {
                box-sizing: border-box;
                 }

23. Position: Specifies the positioning of an element.

Position: Sets the positioning method (static, relative, absolute, fixed).

.my-element {
                    position: absolute;
                      }

24. Z-index: Specifies the stacking order of positioned elements.

Z-index: Sets the stacking order (integer value).

.my-element {
            z-index: 2;
             }

25. Cursor: Specifies the type of cursor to be displayed when hovering over an element.

Cursor: Sets the cursor type (pointer, default, help, etc.).

.my-element {
  cursor: pointer;
}

26. Text Shadow: Adds a shadow effect to the text of an element.

Text-shadow: Sets the shadow properties for text (color, horizontal offset, vertical offset, blur radius).

.my-element {
                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
                   }

27. List Style: Sets the style of list markers on ordered and unordered lists.

List-style-type: Sets the type of list marker (disc, circle, square, decimal, etc.).

ul {
                 list-style-type: disc;
                  }

28. Animation: Applies animation effects to an element.

Animation-name: Specifies the name of the animation.
Animation-duration: Sets the duration of the animation.
Animation-timing-function: Sets the timing function for the animation (linear, ease, ease-in, ease-out, etc.).
Animation-delay: Specifies a delay before the animation starts.
Animation-iteration-count: Sets the number of times the animation should repeat.
Animation-direction: Specifies whether the animation should play in reverse or alternate directions.

.my-element {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

29. Transform: Applies transformations to an element, such as rotation, scaling, or skewing.

transform: Applies a 2D or 3D transformation to the element.

.my-element {
           transform: rotate(45deg);
                }

30. Flexbox: Controls the flexible layout of elements within a flex container.

Display: flex: Enables a flex container.
Flex-direction: Specifies the direction of flex items within the container (row, column, row-reverse, column-reverse).
Justify-content: Aligns flex items along the main axis (flex-start, flex-end, center, space-between, space-around).
Align-items: Aligns flex items along the cross axis (flex-start, flex-end, center, baseline, stretch).
Flex-grow: Specifies the ability of a flex item to grow.
Flex-shrink: Specifies the ability of a flex item to shrink.
Flex-basis: Specifies the initial size of a flex item.

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

These additional CSS properties provide more options for controlling web elements' layout, interactivity, effects, and transformations.

You style HTML elements via CSS properties. Different HTML elements may have different CSS properties you can set. CSS properties can be organized into CSS rules. A CSS rule groups a set of CSS properties and applies all properties to the HTML elements matched by the CSS rule.

Benefits of CSS Properties

CSS properties have several benefits for web development, such as:

Control over presentation: CSS properties allow developers to control the visual appearance of elements on a web page. Developers can create visually appealing designs and ensure consistent website styling by defining properties like background color, font styles, borders, and spacing.
Separation of concerns: CSS properties enable the separation of presentation from content and behavior. This separation allows developers to maintain clean and organized code, making updating and modifying the styling easier without affecting the underlying HTML structure or JavaScript functionality.
Responsive design: CSS properties are crucial in implementing responsive web design. Properties like media queries, flexbox, and grid layout enable developers to create flexible and adaptive layouts that adjust seamlessly to different screen sizes and devices, providing a better user experience.
Efficiency and consistency: Using CSS properties, developers can simultaneously apply styles to multiple elements, reducing code duplication and improving efficiency. CSS also provides inheritance and cascading rules, allowing consistent styling across a website or specific elements.
Ease of maintenance: With CSS properties, making changes to the styling of a website becomes more manageable. Developers can easily update properties in a single CSS file, and the changes will be automatically reflected across all pages that reference that stylesheet, ensuring consistency and reducing maintenance efforts.
Accessibility: CSS properties offer accessibility benefits by allowing developers to control text contrast, font sizes, and element visibility. This enables the creation of web pages that are more readable and usable for individuals with visual impairments or other accessibility needs.
Animation and interactivity: CSS properties can add animation and interactivity to web elements. With properties like transitions, transforms, and animations, developers can create engaging user experiences by adding movement, hover effects, and transitions between different states of an element.
Performance optimization: Proper use of CSS properties can improve website performance. By optimizing properties like image sizes, reducing unnecessary styles, and utilizing CSS preprocessors or minification techniques, developers can minimize file sizes, reduce page load times, and enhance overall performance.
Modularity and reusability: CSS properties promote modularity by allowing developers to define reusable styles and apply them to multiple elements throughout a website. This promotes code reusability, reduces redundancy, and makes maintaining a consistent design across different pages and sections easier.
Browser compatibility: CSS properties are designed to work consistently across different web browsers. They provide a standardized way of specifying styles, ensuring that a website's visual presentation remains consistent across various browsers and platforms.
Print-friendly styling: CSS properties provide specific features for optimizing web pages for print. Using properties like @media print, developers can create print-friendly stylesheets that adjust the layout, font sizes, and colors to ensure a more readable and visually appealing printed output.
Ease of updating and scalability: With CSS properties, updating the style of a website becomes easier and more efficient. By modifying the values of properties in a CSS file, developers can make site-wide changes without needing to edit each individual HTML file. This scalability allows for faster iterations, redesigns, and adaptations to evolving design requirements.
Accessibility enhancements: CSS properties offer various features to improve web accessibility. Using properties like focus, hover, and :active, developers can provide visual feedback and enhance usability for users navigating a website with assistive technologies. Additionally, outline and text-indent can improve keyboard navigation and readability for users with disabilities.
Integration with JavaScript: CSS properties can be manipulated and animated using JavaScript, allowing developers to create dynamic and interactive web experiences. Developers can create advanced animations, transitions, and effects by utilizing JavaScript libraries and frameworks that work with CSS properties.
Simplifies multi-device development: CSS properties make developing responsive and optimized websites for various devices easier. Using media queries, developers can adapt the layout and styling based on the screen size, enabling a consistent and user-friendly experience across desktops, tablets, and mobile devices.
Faster page rendering: CSS properties are designed to be lightweight and efficient, resulting in faster web page time. By keeping the styles separate from the HTML structure, browsers can process and apply the styles more quickly, leading to improved performance and faster page loading.
Maintains semantic structure: CSS properties allow developers to focus on the presentation layer without compromising the semantic structure of the HTML. CSS allows the HTML markup to remain clean and organized, making it easier for search engines, screen readers, and developers to understand and navigate the content.