CSS Properties: Complete Guide

CSS Properties are an important part of web design as they are used to define how HTML elements look and behave on the webpage. They can be used to control the layout, fonts, spacing, and animations. This helps to make your website more attractive and engaging.

In this blog, we will talk about all the important properties of CSS that you need to build attractive and modern websites. We will also provide you with code examples so that you can apply these CSS properties. So let’s get started!

Table of Contents

• What is CSS and Why It Matters
• Basic CSS Properties
• CSS Display Properties
• CSS Position Properties
• Flexbox Layout
• Borders in CSS
• CSS Box Model
• CSS Background Properties
• Text Styling in CSS
• Working with Images in CSS
• CSS Transitions
• CSS Transform
• CSS Animations
• CSS Examples with Code
• Benefits of Using CSS
• Best Practices of Using CSS
• Conclusion

What is CSS and Why It Matters

CSS (Cascading Style Sheets) is basically used to define the visual representation of HTML. Where HTML provides the structure of the page, CSS provides styles, such as colors, font, spacing, and layout. Without this, the webpage looks plain and ordinary.

Given below are 4 important points for why CSS matters:

1. Improves Design: CSS helps to make websites look visually appealing by using colors, fonts, and layouts.

2. Ensures Consistency: It helps to make the webpage look and feel the same across all pages.

3. Responsive Layouts: It helps keep the site flexible enough to appear good across devices and screen sizes.

4. Better User experience: It makes websites easier to read, navigate, and interact with.

From Zero to Full Stack Developer

Learn to develop, deploy, and manage web applications from scratch.

Explore Program

Basic CSS Properties

CSS properties are the most important components of styling any webpage. You can use them in daily life for controlling how elements look and how they fit inside a layout. Given below are some basic CSS properties that you will use in your daily life to design web pages:

1. Margin

Margin is used to set the space outside an element. It acts like a buffer that is used to separate one element from another. This prevents them from being too close to each other. You can also create space and improve the layout of the page by adjusting the margins.

Code:

.box {
  margin: 20px;        
  margin-top: 10px;   
}

You can also use margins to create space between two elements. You just have to keep in mind that when two block elements are present on top of each other, their vertical margins merge into one instead of adding up.

2. Padding

Padding is used to set space inside an element, between the content and its border. It is the same as adding soft cushioning around the text or image inside a box. 

Code:

.box {
  padding: 16px 12px; }

Padding also increases the area of the element, until you use box-sizing: border-box;

3. Width

Width is used to control the size of the content box. This means that it will decide how wide an element will appear on the page. The width can be defined in pixels, percentages or any other unit according to the design. By using width properly, you can manage the layouts and make the elements fit nicely on multiple screens.

Code:

.container {
  width: 80%;      
  max-width: 1200px;  
}

The above CSS code makes the container cover up to 80% of the page width. But it never grows wider than 1200 pixels, even when the screen is large.

4. Height

Height defines how tall an element appears on a page. You can use fixed values like pixels or flexible values like percentages and viewport units. You should also be careful with the height because if you force the element to be too tall or too short, it can break the layouts on smaller or larger screens.

Code:

.hero {
  height: 60vh; /* 60% of viewport height */
}

The above CSS code makes the hero section cover 60% of the visible height of the screen.

5. Color

Color properties in CSS allow you to decide the way the text and backgrounds will look on a page. You may select simple names, such as “red,” or you may also use codes such as HEX and RGB to have greater control. By using the right colors, you can improve the readability and design of the webpage.

Code:

p { color: #333; }
.header { background-color: rgb(255, 230, 230); }

The above CSS code is used to make the whole paragraph text in dark grey and gives the header a dark pink background.

CSS Display Properties

The CSS display property is used to determine whether an element acts like a block, inline, flex, or grid element. It is used to control how the elements sit next to each other or are placed on top of each other. Choosing the right display type will help you to structure and organize your layout properly. Given below are some CSS display properties that you will use in your daily life to design web pages:

1. Block

Block-level elements always start on a new line and stretch across the entire width of the container. Some common examples include: <div>, <p>, and <h1> tags. They can be useful when you want sections of content stacked on top of each other.

Code:

The corresponding CSS code for the above HTML code is given below:

.block { display: block; }

The above code is used to create a <div> that is styled in such a way that it behaves like a block element. This means that it will use the full width and will start on a new line.

2. Inline

The inline elements in CSS are present inside a line of text, similar to the words in a sentence. They only use the space that the content requires. Examples of inline elements in CSS include <span>, <a>, and <strong>.

Code:

The corresponding CSS code for the above HTML code is given below:

.inline { display: inline; }

You can use inline elements when you want to style text that is present within a line, like making words bold or colored. Spacing in inline elements works only sideways, as they don’t interfere with the top and bottom margins.

3. Flex

When you use display: flex, it allows you to arrange items in a row or column easily. It adjusts the spacing and alignment automatically, which makes layouts more flexible and responsive.

Code:

The corresponding CSS code for the above HTML code is given below:

.row {
  display: flex;
  gap: 12px;
  align-items: center;
}

Flex is the best option if you want to arrange the elements in a straight line, either side by side in a row, or elements stacked in a column.

4. Grid

By using display: grid, you can arrange the items in both rows and columns at the same time. It provides you with better control to build complex layouts. This makes it easier for you to design structured and organized web pages.

Code:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}

Grid is a perfect choice when you want to create complex layouts. This is because it allows you to align items neatly in both rows and columns. It makes the process of arranging content on a page simple and well-organized.

CSS Position Properties

The position property of CSS allows you to decide exactly where an element should appear on a page. You can place things on top of each other, like fixing them while scrolling, or moving them a little from their normal spot. It is also useful for creating designs like menus, popups, or sticky headers. Given below are some CSS position properties that you will use in your daily life to design web pages:

1. Static

The default position is called static. This means that the elements appear in the natural order of the page. They don’t overlap with each other or move around unless you change their position. This is the most common and simple positioning of elements.

Code:

.item { position: static; }

Static elements stay in their normal position on the page, and you cannot move them using top, left, right, or bottom values. 

2. Relative

Relative positioning means that the element stays in the normal flow of the page. But you can shift the element using top, left, right, or bottom. It is useful when you want to make small adjustments without affecting the layout.

Code:

.box { position: relative; top: 10px; left: 5px; }

Relative positioning is used to set a reference point so that any child element with absolute positioning will be placed based on it. This makes it easier for you to control where the child elements appear.

3. Absolute 

Absolute positioning means that the element is placed based on the nearest parent element that already has a position set (like relative, absolute, or fixed). If there is no such parent element, it will be positioned relative to the page itself. This provides you with accurate control over placing elements.

Code:

.container { position: relative; }
.tooltip { position: absolute; top: 0; right: 0; }

Absolute elements don’t follow the rules of a regular page layout. This means even when an element is positioned absolutely, it is removed from the usual layout. Therefore, other elements on the page behave as if they don’t exist.

4. Fixed 

Fixed positioning helps to keep an element stuck to the window of the browser, no matter how much you scroll. This is often used for sticky headers, menus, or chat buttons. It helps to make sure that the element is always visible on the screen.

Code:

.header { position: fixed; top: 0; left: 0; width: 100%; }

For sticky headers, you can use fixed positioning or menus so that they stay visible while you are scrolling. You should also be careful while layering (stacking) and make sure that it does not block the important content of the users.

5. Sticky

Sticky positioning works like relative positioning at first. After you scroll past a certain point, it sticks to the screen like “fixed” positioning. This can be useful for things like table headers and navigation bars.

Code:

.sticky {
  position: sticky;
  top: 10px;
}

Sticky positioning is a perfect choice for sidebars or table headers. This is because it keeps them visible, even while you are scrolling. 

Flexbox Layout

In CSS, flexbox is a modern layout system that allows you to easily organize items either into a row or a column. It adjusts the spacing, alignment, and size of the element, which helps you to build responsive designs easily. You can also center items, distribute space evenly, or make elements grow and shrink when required.

Code:

The corresponding CSS code for the above HTML code is given below:

Code:

.container {
  display: flex;            
  justify-content: center; 
  align-items: center;    
  height: 200px;
  background: #f0f0f0;
}

.item {
  background: #4CAF50;
  color: white;
  padding: 20px;
  margin: 10px;
}

The above code creates a horizontal row continuing three green boxes. Each of them is centered in the middle of the container.

Borders in CSS

Borders in CSS allow you to draw lines around elements to make them look good. You can control the thickness, style, and color of the borders as well. Borders also help you to define the shape of the elements, like converting a square box into a circle.

1. Border Styles

The border-style property of CSS decides how the border should look. You can make it a solid line, a dashed or dotted line, a double line, or you can remove it completely as well. Hence, you should choose the right style so that it matches the design of your webpage.

Code:

.box { border: 2px dashed #777; }

The above CSS code is used to add a grey dashed border that is 2 pixels thick around the box element.

2. Border Colors

You can also set border colors by using different formats like hex codes (#ff0000), RGB values (rgb(255, 0, 0)), or CSS values for reusability. This provides you with the flexibility to match your design and also helps to keep your styles consistent.

Code:

.box { border-color: var(--accent-color, #ff6b6b); }

The above code is used to set the border color of the box by using a custom variable. If that variable is not defined, it uses a fallback red shade.

3. Border Radius

The border-radius property of CSS allows you to make the corners of an element smooth or round. You can make slight curves to get a softer look, or you can also turn a square into a circle. It is a simple way to improve the design and style of your elements.

Code:

.round { border-radius: 8px; }
.circle { border-radius: 50%; }

In the above CSS code, the first style gives rounded corners to the elements, and in the second style, the square element is converted into a circle.

CSS Box Model

The CSS Box Model is used to show how every element is built, layer by layer. At the center, the content is present (like text or images), and after that, padding is used to add space inside the element, borders wrap around the element, and margins are responsible for creating space outside. It is important for you to know the CSS box model, as it will help you to control spacing and layout in a more accurate way.

1. Margin

Margin is basically the space outside an element that separates it from other elements on the page. It also helps to avoid elements that are too close or cluttered. By adjusting the margins, you can also control how much space each element has.

Code:

The corresponding CSS code for the above HTML code is given below:

Code:

.box {
  background: #4CAF50;
  color: white;
  padding: 20px;
  margin: 30px;      
}

The above code is used to separate two boxes containing green backgrounds. Each box consists of a 30px space around it, so that they don’t look too close to each other.

2. Border

In the CSS box model, the border is present between the padding and the margin. It wraps itself around the content and padding, and also adds thickness to the element. By default, the border increases the total size of the element unless you use box-sizing: border-box. This helps to keep height and width fixed.

Code:

The corresponding CSS code for the above HTML code is given below:

Code:

.box {
  background: #f0f0f0;       
  padding: 20px;            
  border: 3px solid #4CAF50; 
  margin: 20px;             
}

The above HTML and CSS code is used to create a box with padding inside, a green border of 3px around it, and a margin outside it. 

3. Padding

In the CSS box model, padding is basically the space between the content and the border. It pushes the border outwards. This makes the area inside larger without affecting the spacing outside. Padding is a useful property for improving readability and making buttons or links easier to click.

Code:

The corresponding CSS code for the above HTML code is given below:

Code:

.box {
  background: #4CAF50;   
  color: white;          
  padding: 30px;       
  border: 2px solid #333;
}

The above HTML and CSS code are used to create a padding of 30px. This adds space between the content and the border. It helps to make the content look neat and readable.

4. Content

In the CSS Box Model, content is basically the core part of the element where text, images, or other data appear. By adding padding and borders, the total size of the element goes beyond its height and width. When you use box-sizing: border-box, the browser counts the padding and borders as part of the width and height of the element. This helps to keep the size consistent and makes layouts easier for you to handle.

Code:

The corresponding CSS code for the above HTML code is given below:

Code:

.content-box {
  width: 300px;                
  padding: 20px;               
  border: 5px solid #4CAF50;   
  box-sizing: border-box;     
  background: #f0f0f0;       
}

In the above code, since we have used box-sizing: border-box, the total width of the box will stay the same (300px), although it has padding and a border.

CSS Background Properties

CSS Background properties allow you to style the space behind the content with colors, images, or gradients. They help to make a webpage look more attractive, engaging, and highlight all the important parts. You can also control whether the background repeats, where it appears, and resize it so that it looks good on all screen sizes.

1. Background Color

The background-color property helps you to fill the background of an element with any solid color you like. The code for this is given below for your reference:

Code:

.hero { background-color: hsl(210, 30%, 96%); }

The above code adds a light blue background color to the hero section by using the HSL format.

2. Background Image

The background-image property of CSS allows you to set a picture as the background of an element. The code for this is given below for your reference:

Code:

.banner {
  background-image: url('pattern.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

The above code is used to set a background image for the banner. It at first centers it, stops it from repeating, and then stretches it to cover the area fully.

3. Background Gradient

The background-image: linear-gradient property allows you to fill the background of an element with a mix of two or more colors. The code for this is given below for your reference:

Code:

.gradient {
  background-image: linear-gradient(90deg, #ff7a7a, #ffcc70);
}

The above code creates a background that shifts from pink to yellow in a left-to-right direction.

Text Styling in CSS

Text styling in CSS allows you to control the way text looks on a webpage, like its font, size, color, and alignment. These type of properties helps to make the content easy for you to read and also make it look attractive. By styling the fonts properly, you can make your webpage look appealing and also capture the reader’s attention.

1. Font

Fonts in CSS allow you to decide how your text looks, like its style, size, and type. The code for this is given below for your reference:

Code:

body { font-family: 'Inter', system-ui, sans-serif; }

The above code is used to set the text on the page in order to use the ‘Inter’ font, or any other font system if ‘Inter’ is not available.

2. Font Size 

The font-size property of CSS is responsible for controlling how big or small the text appears on the webpage. The code for this is given below for your reference:

Code:

h1 { font-size: 2rem; } /* scalable with root font-size */

The above code is used to make the size of the main heading (h1) twice the size of the root font size, so that it adjusts well across all devices.

3. Text Alignment

The text-align property of CS is used to decide whether the text lines up to the left, right, center, or stretches across a container. The code for this is given below for your reference:

Code:

.center { text-align: center; }

The above code is used to align the text inside the element to the center.

4. Text Decoration

The text-decoration property lets you add or remove effects like underlines, overlines, or strikethroughs on text. The code for this is given below for your reference:

Code:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

The above code is used to make links appear without any underline. But it adds an underline when you hover over them.

Working with Images in CSS

Working with images in CSS lets you control the way pictures fit and appear inside their containers. You can resize those images without stretching them too much, crop them so that you can focus on the most important part, or position them exactly where you want them to be. This helps to make your design look neat and responsive on all screen sizes.

1. Object-fit

The object-fit property of CSS is responsible for controlling how an image or video is resized to fit inside its container without looking too stretched. The code for this is given below for your reference:

Code:

The corresponding CSS code for the above HTML code is given below:

Code:

.cover {
  width: 300px;
  height: 200px;
  object-fit: cover; /* cover, contain, fill, none, scale-down */
}

2. Object-position

The object-position property is used to control which part of the image is shown inside its container, like aligning the image to the center or shifting it to the top or left.

Code:

.cover { object-position: 20% 30%; }

The above code is used to move the image inside its container in such a way that it is positioned 20% from the left and 30% from the top.

CSS Transitions

CSS Transitions allow you to smoothly animate the changes in color, size, or position when some event occurs, like hovering over a button. Instead of changing instantly, the change takes place in a step-by-step manner over a course of time. This helps to make your webpage look polished and attractive.

Code:

.button {
  background-color: #0077ff;
  transition: background-color 250ms ease, transform 200ms ease;
}

.button:hover {
  background-color: #005fcc;
  transform: translateY(-4px);
}

The above CSS code changes the color of the button smoothly and makes it slightly move up when you hover over it.

CSS Transform

CSS Transforms allow you to move, rotate, scale, or tilt elements on a page without disturbing the other content around them. You can use CSS transforms to make the elements bigger, smaller, or even spin in one place. They are great for adding interactive effects to your webpage or making more dynamic designs.

1. Rotate 

Rotate in CSS allows you to spin an element around a point. This is the same as turning a picture clockwise or counterclockwise. The code for this is given below for your reference:

Code:

.rotate { transform: rotate(10deg); }

The above code turns the element slightly by 10 degrees, similar to tilting a picture to the side.

2. Scale

Scale in CSS is used to make an element smaller or bigger, the same as zooming in or out on a picture.  The code for this is given below for your reference:

Code:

.scale { transform: scale(1.05); }

The above code increases the size of the element by 5% of its normal size.

3. Translate

Translate in CSS helps to move an element from its original position without disturbing other elements.  The code for this is given below for your reference:

Code:

.move { transform: translateX(10px); }

The above code is used to move the element by 10 pixels to the right from its normal position. 

4. Skew 

Skew in CSS is used to tilt an element diagonally along the X or Y axis. It slants the shape of the element without rotating it.

Code:

.skew {
  transform: skew(20deg, 10deg);
}

The above code is used to slant the element 20 degrees horizontally and 10 degrees vertically. This makes the element look tilted.

CSS Animations

CSS Animations allow you to define multiple steps of animations using keyframes. You can make the elements move, change color, or fade in and out without using JavaScript. Animations also help you to control speed, timing, and other effects.

1. Keyframes

Keyframes in CSS are used to set the steps of an animation. It tells the element how it should look at different points in time.

Code:

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.icon {
  animation: float 3s ease-in-out infinite;
}

The above code is used to make the icon move up and down like it is floating.

2. Animation Effects

CSS animation effects let you control how an animation looks and behaves, including duration, timing, and repetition.

Example:

.icon {
animation-name: float;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

You can also use prefers-reduced-motion for users who want less animation.

Code:

@media (prefers-reduced-motion: reduce) {
  .icon { animation: none; transition: none; }
}

CSS Examples with Code

Below is an example of a small card that uses multiple CSS properties together, like layout, background, border, transform, transition, and variables.

Code: HTML

Code: CSS

:root {
  --bg: linear-gradient(180deg, #ffffff, #f7fbff);
  --accent: #0b63ff;
  --radius: 12px;
  --gap: 12px;
}

* { box-sizing: border-box; }

.card {
  width: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(12, 24, 48, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 16px 40px rgba(12, 24, 48, 0.12);
}

.card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-body {
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-title { margin: 0; font-size: 1.125rem; }
.card-text { margin: 0; color: #444; font-size: 0.95rem; }

.card-btn {
  align-self: start;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}
.card-btn:hover { transform: translateY(-3px); background-color: #094fc6; }

Output:

Explanation: The above HTML and CSS codes are used to create a card containing an image, text, and a button. All the elements are styled with hover effects and modern CSS design.

Benefits of Using CSS

Some benefits of using CSS include:

1. Better Design: CSS helps you make your website look more attractive by adding colors, layouts, and styles.
2. Consistency: You can style multiple pages at once, so your whole website looks uniform.
3. Saves Time: One CSS file can control styles across multiple pages, so you don’t have to repeat code.
4. Responsive Layouts: CSS allows websites to adjust nicely on mobiles, tablets, and desktops.
5. Faster Loading: Clean CSS reduces repeated styling in HTML, which helps your website load quickly.

Best Practices of Using CSS

Here are five best practices for using CSS:

1. Keep it Organized: You should always write clean, neat CSS so it becomes easier to read and update later.
2. Use Classes, Not Inline Styles: You should arrange your styles in CSS files instead of directly inside HTML for better control.
3. Reuse Styles: You should also create reusable classes instead of repeating the same styles again and again.
4. Use Variables: Store colors, spacing, or fonts in CSS variables to keep things consistent and easy to change.
5. Test on Different Screens: Always check how your design looks on mobile, tablet, and desktop

Conclusion

CSS is responsible for making websites look friendly, attractive, and well-arranged. You can transform a normal HTML into a beautiful design by learning how to apply styles to text, layouts, animations, and handling of images. By using best practices, the CSS will be more maintainable, reusable, and scalable to other devices. As a good designer, you can create clean, modern, and responsive designs that enhance the overall user experience.

If you are an aspiring Front-End Developer, explore the CSS Interview Questions and enroll in your Web Development Course.

CSS Properties – FAQs