Welcome to this comprehensive CSS Reference Guide designed to help beginners understand CSS properties and how they can be used to style web pages. Each section summarizes the properties, provides practical examples, and explains their application. Let’s get started!
I. CSS Background Properties
CSS background properties allow you to control the background of elements on your webpage.
Property | Description | Example |
---|---|---|
background | Shorthand for setting all background properties. |
|
background-attachment | Defines whether a background image is fixed or scrolls with the page. |
|
background-color | Sets the background color of an element. |
|
background-image | Sets an image as the background. |
|
background-position | Defines the starting position of a background image. |
|
background-repeat | Sets how the background image will repeat. |
|
background-size | Specifies the size of the background image. |
|
II. CSS Border Properties
The border properties in CSS allow you to control the appearance of element borders.
Property | Description | Example |
---|---|---|
border | Shorthand for defining all border properties. |
|
border-bottom | Defines the bottom border. |
|
border-bottom-color | Sets the color of the bottom border. |
|
border-bottom-left-radius | Defines the radius for the bottom-left corner. |
|
border-bottom-right-radius | Defines the radius for the bottom-right corner. |
|
border-bottom-style | Sets the style of the bottom border. |
|
border-bottom-width | Sets the width of the bottom border. |
|
border-color | Sets the color of all borders. |
|
border-left | Defines the left border. |
|
border-left-color | Sets the color of the left border. |
|
border-left-style | Sets the style of the left border. |
|
border-left-width | Sets the width of the left border. |
|
border-radius | Sets the rounded corners of an element. |
|
border-right | Defines the right border. |
|
border-right-color | Sets the color of the right border. |
|
border-right-style | Sets the style of the right border. |
|
border-right-width | Sets the width of the right border. |
|
border-style | Sets the style of all borders. |
|
border-top | Defines the top border. |
|
border-top-color | Sets the color of the top border. |
|
border-top-left-radius | Defines the radius for the top-left corner. |
|
border-top-right-radius | Defines the radius for the top-right corner. |
|
border-top-style | Sets the style of the top border. |
|
border-top-width | Sets the width of the top border. |
|
border-width | Sets the width of all borders. |
|
III. CSS Color Properties
The color properties in CSS are used to set the color of text and control its opacity.
Property | Description | Example |
---|---|---|
color | Sets the color of text. |
|
opacity | Sets the transparency level of an element. |
|
IV. CSS Display Properties
The display properties control how elements are rendered on the page.
Property | Description | Example |
---|---|---|
display | Specifies the display behavior of an element. |
|
visibility | Specifies whether an element is visible or hidden. |
|
V. CSS Flexbox Properties
Flexbox properties make it easier to design flexible responsive layout structures without using float or positioning.
Property | Description | Example |
---|---|---|
flex | Shorthand for the flex-grow, flex-shrink, and flex-basis properties. |
|
flex-basis | Defines the default size of an element before the remaining space is distributed. |
|
flex-direction | Defines the direction of the flex items. |
|
flex-flow | Shorthand for flex-direction and flex-wrap. |
|
flex-grow | Defines the ability for a flex item to grow if necessary. |
|
flex-shrink | Defines the ability for a flex item to shrink if necessary. |
|
flex-wrap | Defines whether flex items should wrap onto the next line. |
|
justify-content | Aligns flex items along the main axis. |
|
align-items | Aligns flex items along the cross axis. |
|
align-content | Aligns flex lines within the flex container. |
|
align-self | Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. |
|
VI. CSS Font Properties
Font properties in CSS allow you to specify the styling of text.
Leave a comment