BCA HTML, CSS & Bootstrap Guide
Comprehensive Study Material for BCA Students
Topic 7: CSS Properties and Values
■■■■■■■■■■■■■■
Prepared for Academic Use
7. CSS Properties and Values
Introduction
CSS properties are the building blocks of styling in web design. A property defines the aspect of an
element that is to be styled (such as color, margin, or font-size), and the value determines how that
property is applied. Together, they form a rule: selector { property: value; }. Understanding
properties and values is essential for mastering CSS and creating visually appealing, responsive
websites.
Types of CSS Properties
1. Text Properties
p {
color: blue;
font-size: 18px;
text-align: center;
}
2. Background Properties
body {
background-color: lightgrey;
background-image: url('pattern.png');
background-repeat: no-repeat;
background-size: cover;
}
3. Box Model Properties
div {
margin: 20px;
padding: 15px;
border: 2px solid black;
width: 200px;
height: 100px;
}
4. Positioning Properties
.box {
position: absolute;
top: 50px;
left: 100px;
z-index: 10;
}
5. Flexbox/Grid Basics
.container {
display: flex;
justify-content: space-between;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Types of CSS Values
p {
color: red; /* Keyword */
width: 50%; /* Percentage */
margin: 10px; /* Absolute unit */
font-size: 1.2em; /* Relative unit */
background-color: #ffcc00; /* HEX color */
}
Comparison: Absolute vs Relative Units
Unit Type Examples Characteristics Best Use Case
Absolute px, cm, in Fixed, do not scale with screen size Precise control (print, fixed layouts)
Relative em, rem, %, vw Scale based on parent or viewport Responsive design, flexible layouts
CSS Properties Cheatsheet
Property Example Value Description
color red | #ff0000 | rgb(255,0,0) Text color
background-color lightblue Background fill color
font-size 16px | 1.2em Controls text size
margin 10px 20px Space outside element
padding 5px 10px Space inside element border
border 1px solid black Element border style
width/height 200px | 50% Controls element size
text-align left | center | right Text alignment inside element
Best Practices
1. Use relative units (em, rem, %) for responsive design.
2. Apply shorthand properties (e.g., margin, padding, border) for cleaner code.
3. Keep color values consistent (HEX or RGB, not mixed).
4. Avoid using too many fixed pixel values in responsive layouts.
5. Group related properties logically for readability.
Complete Example
.card {
background-color: white;
border: 1px solid #ddd;
padding: 20px;
margin: 20px auto;
width: 300px;
font-family: Arial, sans-serif;
}
.card h2 {
color: navy;
font-size: 20px;
text-align: center;
}
.card p {
font-size: 16px;
color: #555;
}
Summary
CSS properties and values form the foundation of styling web pages. Properties define what aspect
of an element to change (color, margin, font-size), while values specify how to apply the change.
Different property groups manage text, backgrounds, spacing, layout, and positioning. By
understanding value types (absolute, relative, colors, keywords), developers create scalable and
responsive designs. With best practices like shorthand usage and relative units, websites become
more efficient, flexible, and user-friendly.
