Basic CSS Properties

Styling text: font-family, font-size, font-weight, text-align

In CSS, styling text is one of the core parts of creating visually attractive and readable web pages.
The main properties used for text styling include font-family, font-size, font-weight, and text-align. Each controls a different aspect of how text appears to users.

1. font-family (Choosing the Font Type)

Definition:

The font-family property specifies the typeface (font) to be used for the text inside an element.

Syntax:

selector {
font-family: “Font Name”, fallback-font, generic-family;
}

Example:

p {
font-family: “Arial”, “Helvetica”, sans-serif;
}

Explanation:

• First tries to use “Arial”.
• If “Arial” isn’t available, tries “Helvetica”.
• If neither is available, defaults to any available sans-serif font.

Best Practice: Always provide fallback fonts to ensure good rendering across different devices.

2. font-size (Controlling the Size of Text)

Definition:

The font-size property sets the size of the text, controlling how large or small the text appears.

Syntax:

selector {
font-size: size;
}

Common Units:

• Pixels (px) — fixed size (e.g., 16px)
• Em (em) — relative to the parent’s font size (e.g., 1.5em)
• Rem (rem) — relative to the root (html) font size (e.g., 1rem)
• Percentages (%) — relative to the parent element’s font size

Example:

h1 {
font-size: 32px;
}
p {
font-size: 1.2em;
}

Best Practice: Use rem or em for more responsive and accessible designs.

3. font-weight (Setting Text Boldness or Lightness)

Definition:

The font-weight property defines how thick or thin the characters of the text appear.

Syntax:

selector {
font-weight: weight-value;
}

Common Values:

• normal (default, regular weight)
• bold (makes text thicker)
• lighter (makes text thinner than its parent)
• Numeric values: 100 (very thin) to 900 (very thick)

Example:

strong {
font-weight: bold;
}
h2 {
font-weight: 600;
}

Best Practice: Prefer numeric weights for precise control, especially with modern web fonts.

4. text-align (Aligning Text Horizontally)

Definition:

The text-align property sets the horizontal alignment of text inside a block-level element.

Syntax:

selector {
text-align: alignment;
}

Common Values:

• left (default for left-to-right languages)
• right
• center
• justify (stretches text to fit the width by adjusting spaces)

Example:

h1 {
text-align: center;
}
p {
text-align: justify;
}

 

Best Practice: Use justify for longer paragraphs to create a neat column of text; use center for headings and call-to-action texts.

Combined Example:

.article-title {
font-family: ‘Georgia’, serif;
font-size: 28px;
font-weight: bold;
text-align: center;
}

.article-body {
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
font-weight: normal;
text-align: justify;
}

Explanation:

• The title (.article-title) uses “Georgia” font, large size, bold weight, and centered alignment.
• The body text (.article-body) uses “Open Sans”, standard size, normal weight, and justified text.

Summary Table:

Summary Table:

Property	Purpose	Example Value
font-family	Sets the font type	“Arial”, sans-serif
font-size	Controls text size	16px, 1.5em, 100%
font-weight	Adjusts thickness or boldness	bold, 400, 700
text-align	Aligns text horizontally	left, center, justify

Conclusion
By using font-family, font-size, font-weight, and text-align, you can control almost every important aspect of how your text looks on a web page — making it readable, visually appealing, and aligned with your design goals.

Color and background styling: background-color, background-image, color properties

Color and background styling are fundamental in web design because they control how your webpage looks and feels.
CSS provides specific properties to customize both the text color and the background of HTML elements.

1. color (Text Color)

Definition:

The color property in CSS sets the color of the text inside an element.

Syntax:

selector {
color: value;
}

Value Types:

• Named colors: red, blue, green
• Hexadecimal values: #ff5733, #000000
• RGB values: rgb(255, 87, 51)
• RGBA values (RGB + Alpha for transparency): rgba(255, 87, 51, 0.5)
• HSL values (Hue, Saturation, Lightness): hsl(12, 100%, 60%)

Example:

p {
color: #333333;
}

h1 {
color: rgb(255, 0, 0);
}

Best Practice:

Use a consistent color palette and ensure enough contrast between text and background for readability (especially for accessibility).

2. background-color (Background Fill Color)

Definition:

The background-color property sets the background color of an element.

Syntax:

selector {
background-color: value;
}

Value Types: (Same as the color property — names, hex, rgb, rgba, hsl)

Example:

div {
background-color: lightblue;
}

section {
background-color: rgba(0, 128, 0, 0.3);
}

Best Practice:

Use semi-transparent backgrounds (rgba) if you want backgrounds that allow layering effects without hiding everything underneath.

3. background-image (Setting Images as Backgrounds)

Definition:

The background-image property places an image behind the content of an HTML element.

Syntax:

selector {
background-image: url(“path-to-image”);
}

Example:

header {
background-image: url(‘banner.jpg’);
}

Additional Properties for Better Control:

• background-repeat: controls if/how the background repeats (e.g., no-repeat, repeat-x, repeat-y).
• background-size: controls the size of the background image (e.g., cover, contain, specific sizes like 100px 200px).
• background-position: controls where the background image is positioned (e.g., center center, top right).

Complete Example:

section {
background-image: url(‘background.jpg’);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

Best Practice:

Optimize background images for web to reduce page load times (use compressed .jpg, .webp, or .avif formats).

Combined Example: Styling Text and Background Together

.hero-banner {
color: white;
background-color: #333;
background-image: url(‘hero.jpg’);
background-size: cover;
background-position: center;
text-align: center;
padding: 100px 20px;
}

Explanation:

• White text color on a dark background.
• A background image that covers the entire section without repeating.
• Centered text with spacious padding.

Summary Table:

Summary Table:

Property	Purpose	Example
color	Sets text color	color: #333;
background-color	Sets background color	background-color: lightblue;
background-image	Adds an image as background	background-image: url(‘bg.jpg’);

Important Accessibility Note

• Always maintain high contrast between text and background.
• Dark text on a light background or light text on a dark background improves readability.
• Tools like the WCAG Color Contrast Checker can help you design accessible websites.

Conclusion:

Using color, background-color, and background-image properly in CSS allows you to create visually engaging, readable, and aesthetically pleasing web pages. Combining colors smartly improves both user experience and design professionalism.

Box model: margin, padding, border, and content areas

In CSS, every HTML element is treated as a rectangular box, and the box model describes how the size of that box is calculated and how its parts (content, padding, border, and margin) interact.
Understanding the box model is crucial for layout, spacing, and proper element alignment in web design.

1. Content Area

Definition:

• The content area is where text, images, or other child elements are displayed.

Key Points:

• It’s the innermost part of the box.
• Its size can be controlled using width and height properties.

Example:

div {
width: 200px;
height: 100px;
}

• This sets the content width to 200px and height to 100px (excluding padding, border, and margin).

2. Padding Area

Definition:

Padding is the space between the content and the border. It pushes the border outward and adds extra space around the content.

Syntax:

selector {
padding: value;
}

Example:

div {
padding: 20px;
}

• Adds 20px of padding on all four sides (top, right, bottom, left) of the content.

Best Practice:

• Use padding when you want to increase spacing inside the box without affecting the outer layout.

Individual sides can be controlled:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;

3. Border Area

Definition:

• The border wraps around the padding (if any) and content areas.

Syntax:

selector {
border: width style color;
}

Example:

div {
border: 2px solid black;
}

• Adds a solid black border that is 2px thick around the padding/content.

Best Practice:

• Borders are great for separating or highlighting sections of a webpage.

Border shorthand example:

border: 1px dashed red;

• Creates a 1px thick, dashed red border.

4. Margin Area

Definition:

Margin is the outermost space that separates the element from other elements.
It creates space between different boxes on the page.

Syntax:

selector {
margin: value;
}

Example:

div {
margin: 30px;
}

• Adds 30px of space around the entire box.

Best Practice:

• Use margin to position elements by creating space between them.

Individual sides can be controlled:

margin-top: 20px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 10px;

Visual Structure of the Box Model:

+—————————+
| Margin |
| +———————+ |
| | Border | |
| | +—————+ | |
| | | Padding | | |
| | | +———–+ | | |
| | | | Content | | | |
| | | +———–+ | | |
| | +—————+ | |
| +———————+ |
+—————————+

Example: Full Box Model Code

.box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
background-color: lightgray;
}

Explanation:

• Content area: 300px x 150px
• Padding: 20px on each side (increases total visual space)
• Border: 5px thick
• Margin: 30px space around the outside of the box

Box Sizing: How Total Size is Calculated:

Default Behavior:

By default (box-sizing: content-box), the width and height only apply to the content. Padding and border are added outside of it, increasing the total size.

Example:

• width: 300px
• padding: 20px
• border: 5px

Total Width = 300 + (20 × 2) + (5 × 2) = 350px
Total Height = height + padding + border (similar calculation)

Tip:

Use box-sizing: border-box; to make width/height include padding and border inside the defined size.

* {
box-sizing: border-box;
}

• This makes layouts much easier to manage.

Summary Table:

Summary Table

Box Part	Purpose
Content	Holds text, images, or other elements
Padding	Space between content and border
Border	Surrounds padding and content
Margin	Space between elements outside the border

Conclusion:

The CSS Box Model is foundational for building and styling web layouts. Mastering margin, padding, border, and content areas ensures you have precise control over element size, spacing, and positioning on the page.

Working with images: width, height, object-fit

When adding images to a webpage, controlling their size and appearance is crucial for maintaining a clean, responsive, and visually balanced design.
CSS properties like width, height, and object-fit allow you to scale, resize, and fit images properly without distortion.

1. width and height (Setting Image Dimensions)

Definition:

The width and height properties define the dimensions of an image element.

Syntax:

selector {
width: value;
height: value;
}

Value Types:

• Fixed units (e.g., px, em)
• Relative units (e.g., %, vw, vh)

Example: Setting Fixed Width and Height

img {
width: 300px;
height: 200px;
}

• This sets the image to exactly 300px wide and 200px tall.

Tip:

When setting only width or height, the browser automatically maintains the aspect ratio (original proportions) unless you set both, which might cause distortion.

Example: Responsive Image

img {
width: 100%;
height: auto;
}

• The image stretches to fill the width of its parent container while keeping its natural height proportionate.

Best Practice:

Use width: 100% and height: auto for responsive designs so that images adjust gracefully across devices.

2. object-fit (Controlling How the Image Fills Its Container)

Definition:

The object-fit property specifies how an image (or video) should be resized to fit its container box.

Syntax:

selector {
object-fit: value;
}

Available Values:

• fill — stretches the image to fill the container (may distort).
• contain — fits the entire image inside the container (no distortion, may leave empty space).
• cover — fills the container, cropping the image if necessary (no distortion).
• none — keeps original size, no scaling.
• scale-down — acts like none or contain, whichever is smaller.

Examples:

Fill the container (might distort):

img {
width: 400px;
height: 300px;
object-fit: fill;
}

Fit the image without cutting (contain):

img {
width: 400px;
height: 300px;
object-fit: contain;
}

Fill the container completely and crop excess (cover):

img {
width: 400px;
height: 300px;
object-fit: cover;
}

• This is great for profile pictures, banners, or galleries where the aspect ratio must be preserved but empty space is not desired.

Best Practice:

object-fit: cover; is widely used for background images, profile avatars, and any case where you want the image to fill a specific frame without distortion.

3. Complete Working Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Image Styling Example</title>
<style>
.responsive-image {
width: 100%;
height: auto;
}

.cover-image {
width: 300px;
height: 200px;
object-fit: cover;
border: 2px solid #333;
}

.contain-image {
width: 300px;
height: 200px;
object-fit: contain;
border: 2px dashed #666;
background: #f0f0f0;
}
</style>
</head>
<body>

<h2>Responsive Image</h2>
<img src=”your-image.jpg” class=”responsive-image” alt=”Responsive Example”>

<h2>Cover Image</h2>
<img src=”your-image.jpg” class=”cover-image” alt=”Cover Example”>

<h2>Contain Image</h2>
<img src=”your-image.jpg” class=”contain-image” alt=”Contain Example”>

</body>
</html>

Summary Table:

Summary Table

Property	Purpose	Example Usage
width	Sets the image width	width: 300px; or width: 100%;
height	Sets the image height	height: auto; or height: 200px;
object-fit	Controls how image fits container	object-fit: cover;, contain;

Conclusion:

By mastering width, height, and object-fit, you can make sure your images fit beautifully into your layouts, remain responsive across devices, and maintain their visual integrity — crucial for professional, modern web design.