Web pages are styled and laid out using CSS (Cascading Style Sheets) attributes. The following lists several popular CSS attributes along with their functions:
Basic css properties
The basic CSS properties are color, background, box-model, text-positioning, grid-layout and other properties also. we will see the properties briefly here.
Color and Background
color: Modifies the color of the text.
background-color: Determines an element’s background color.
background-image: Assigns an element a backdrop image.
background-repeat: Indicates whether or not a background picture will be repeated.
background-size: Indicates the dimensions of the photos used as the backdrop.
opacity: Determines an element’s opacity level (0 to 1).
Text Formatting
text’s font is set using the font-family property.
font-size: Determines how large the text will be.
The font-weight property determines the text’s weight, or boldness.
oblique, italic, and normal text styles are all set using the font-style property.
The text-align property determines the text’s horizontal alignment (justify, center, left, right).
text-decoration: Adds embellishment to text by using line-through, underlining, and overlining.
Text case control (uppercase, lowercase, capital) is provided via text-transform.
The height between text lines is set with the line-height property.
Box Model
width: Defines an element’s width.
height: Determines an element’s height.
margin: Defines the space between an element’s margins.
padding: Defines the internal padding of an element.
border: Defines the edge surrounding an object.
border-radius: Determines the corner radius of the element.
Positioning
position: Indicates which positioning type is being used (static, relative, absolute, fixed, sticky).
top, right, bottom, and left: Indicates the distance from the corresponding edge.
An element’s stack order is set by its z-index.
Display and Visibility
display: Indicates the type of display that an element will have (block, inline, inline-block, flex, grid, none).
visibility: A component’s level of visibility (visible, hidden).
overflow: Indicates what occurs when content beyond the bounds of an element’s box (visible, hidden, scroll, auto).
Flexbox
Flexbox layout is enabled with display: flex.
flex-direction: Specifies the row, row-reverse, column, and column-reverse directions of the flex elements.
justify-content Flex items (flex-start, flex-end, center, space-between, space-around, space-evenly) are aligned along the main axis.
align-items: Aligns flex items (center, baseline, stretch, flex-start, flex-end, and so on) along the cross axis.
Flex-wrap: Indicates whether or not flex items (nowrap, wrap, wrap-reverse) should wrap.
Grid Layout
display: grid: Makes grid layout possible.
defines the grid’s columns (grid-template-columns).
rows in the grid are defined by grid-template-rows.
grid-gap: Indicates the spaces that exist between grid elements.
grid-column: Indicates the column that a grid item begins and ends.
grid-row: Indicates the row at which a grid item begins and ends.
Animation and transition
transition: Defines the effect of a transition when altering CSS properties.
transition-duration: Defines how long the transition will last.
animation: Defines a motion picture.
animation-name: Specifies the @keyframes animation’s name.
animation-duration: Defines how long the animation will last.
Other Properties
cursor: Indicates the kind of cursor that will be shown (text, move, pointer, default, etc.).
box-shadow: Produces shadows surrounding the frame of an element.
text-shadow: Gives text shadow effects.
float: Indicates if an element should float entirely to the left, entirely to the right, or neither.
clear: Indicates which elements are allowed to float next to the cleared element.
Example
/* Text Styling */
p {
color: blue;
font-size: 16px;
line-height: 1.5;
text-align: justify;
}
/* Box Model */
div {
width: 300px;
height: 200px;
margin: 20px;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
/* Background */
header {
background-color: #f8f9fa;
background-image: url('header-bg.jpg');
background-size: cover;
}
/* Flexbox */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
/* Grid Layout */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
/* Animation */
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #007bff;
}
A wide number of attributes are available in CSS to efficiently style web pages. Designing responsive and aesthetically pleasing designs is made possible by mastering these features.