ByteMinds PH Blog - Introduction to CSS and Its Basic Concepts

Introduction to CSS and Its Basic Concepts

CSS (Cascading Style Sheets) is the language used to style and layout web pages. It allows you to control the visual appearance of HTML elements, from fonts and colors to layout and spacing. CSS works alongside HTML to create visually appealing and interactive web pages.

In this post, we’ll explore the basics of CSS, how it works, and some fundamental concepts through clear examples.

Why CSS?

HTML provides the structure of a webpage, but without CSS, all elements would be displayed in a very basic, unstyled way. With CSS, you can:

Control the layout of the page
Style text and fonts
Set backgrounds, borders, and shadows
Create responsive designs for different devices

How CSS Works

CSS is applied to HTML elements using selectors to target elements and properties to style them. You can write CSS in three main ways:

1. Inline CSS

Inline CSS is applied directly within an HTML element using the style attribute. This is not a recommended approach for larger projects but can be useful for quick, specific styles.

<p style="color: blue; font-size: 18px;">This text is blue and 18px in size.</p>

2. Internal CSS

You can define styles within a <style> tag inside the HTML <head>. This approach is suitable for smaller projects or when working on a single page.

<head>
	<style>
		p {
			color: green;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p>This text will be green and 20px in size.</p>
</body>

3. External CSS

The best practice for larger projects is to use external CSS files. You link the CSS file to your HTML using the <link> tag in the <head> section.

<head>
	<link rel="stylesheet" href="styles.css" />
</head>
<body>
	<p>This text will be styled using the external stylesheet.</p>
</body>

Basic Concepts of CSS

Let’s go over some fundamental CSS concepts with examples.

1. Selectors

Selectors are used to target the HTML elements you want to style.

Element Selector: Targets all elements of a specific type.

p {
	color: red;
}

Class Selector: Targets elements with a specific class. Prefixed with a dot (.).

.highlight {
	background-color: yellow;
}

ID Selector: Targets an element with a specific ID. Prefixed with a hash (#).

#header {
	text-align: center;
}

2. Properties and Values

CSS is composed of properties (like color, font-size, margin) and values (like red, 20px, 10px).

p {
	color: blue;
	font-size: 16px;
	margin: 20px;
}

3. Box Model

The CSS Box Model is a fundamental concept that describes how elements are structured on a web page. Every element is essentially a rectangular box that consists of:

Content: The actual content of the element.
Padding: Space between the content and the border.
Border: A border around the element.
Margin: Space outside the border, separating the element from other elements.

Here’s an example:

div {
	width: 200px;
	padding: 10px;
	border: 2px solid black;
	margin: 15px;
}

4. Color and Background

CSS allows you to change text colors, background colors, and even use images as backgrounds.

h1 {
	color: #3498db; /* Hex code for a blue color */
	background-color: #f1c40f; /* Yellow background */
}

You can also use images as backgrounds:

div {
	background-image: url('background.jpg');
	background-size: cover;
}

5. Font and Text Styling

You can style text with various font properties like font-family, font-size, font-weight, and more.

p {
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

6. Layout (Display, Flexbox, and Grid)

CSS provides several ways to control the layout of your page. The display property is a key part of layout control.

Flexbox: A layout model for flexible and responsive layouts.

.container {
	display: flex;
	justify-content: space-between;
}

Grid: A powerful layout system for creating complex, grid-based designs.

.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}

Conclusion

CSS is a powerful language that allows you to transform plain HTML into visually appealing, interactive websites. By mastering the basics like selectors, properties, and layout techniques, you’ll be well on your way to creating stunning web designs.

In future posts, we’ll dive deeper into advanced CSS topics like animations, responsive design, and more.

Stay tuned, and happy coding!