Introduction
In today’s digital world, website design is crucial for making a good first impression on users.
While HTML is responsible for the structure of web pages, CSS (Cascading Style Sheets) handles the visual styling.
CSS allows you to turn a plain HTML page into an aesthetically pleasing and interactive experience.
In this article, we’ll explore CSS Basics, including how to add it to a webpage, the syntax, and key concepts like selectors, text styling, the box model, layout techniques, and responsive design.
By the end of this guide, you’ll be equipped with the tools to style your first webpage and beyond.
Table of Contents
What is CSS?
Definition of CSS
CSS, or Cascading Style Sheets, is a language used to describe the presentation of a document written in HTML or XML.
It enables developers to control the layout, color schemes, fonts, and overall appearance of web pages.
Role of CSS in Web Development
While HTML defines the structure of a webpage, CSS handles the look and feel. CSS can change how elements are displayed without altering the HTML structure.
It allows developers to apply styles globally across a website, making it easy to maintain and update.
For example, if you want to change the color of all headings across a website, you can make one change in the CSS file, and it will apply everywhere.
This saves time and ensures consistency.
Difference Between HTML and CSS
HTML (HyperText Markup Language) structures the content, such as headings, paragraphs, and images. CSS, on the other hand, is used to style this content.
Without CSS, a webpage would be just a text document without visual appeal.
An analogy: Think of HTML as the skeleton of a building and CSS as the paint, furnishings, and decorations.
Related Post:
Getting Started with CSS Basics
There are three main ways to add CSS to an HTML document: inline, internal, and external. Let’s explore each one.
Adding CSS to a Web Page
1- Inline CSS
Inline CSS is added directly to the HTML elements using the style attribute. Although easy to apply, it’s not a recommended practice for larger projects since it makes the code harder to maintain.
Example:
<h1 style="color: blue;">This is an inline styled heading</h1>2- Internal CSS
Internal CSS is placed inside the <style> tag within the <head> section of an HTML document. It is useful when you want to apply styles to a single page.
Example:
<head>
<style>
h1 {
color: green;
}
</style>
</head>3- External CSS
External CSS is the most widely used method. Styles are written in a separate .css file and linked to the HTML document using the <link> tag.
This approach makes your website easier to manage, especially when multiple pages share the same style sheet.
Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>Basic Syntax of CSS Rules
A CSS rule consists of a selector, property, and value:
selector {
property: value;
}For example:
p {
color: red;
}This rule applies the color red to all <p> (paragraph) elements.
CSS Selectors
CSS selectors determine which HTML elements a set of styles applies to.
Types of Selectors
1. Element Selectors
An element selector targets a specific HTML tag. For instance, the following rule styles all <h1>
elements:
h1 {
font-size: 24px;
}2. Class Selectors
Class selectors target elements with a specific class attribute. Use a period (.) before the class name:
.button {
background-color: blue;
}To apply this style in HTML:
<button class="button">Click Me</button>3. ID Selectors
ID selectors target a single element with a unique id attribute. Use a hash (#) symbol before the ID name:
#header {
background-color: grey;
}In HTML:
<div id="header">Header Content</div>4. Attribute Selectors
These selectors target elements with specific attributes, such as a type in <input> :
input[type="text"] {
border: 1px solid black;
}Specificity and Inheritance
CSS follows rules of specificity to determine which styles apply when multiple rules target the same element.
For example, ID selectors have higher specificity than class selectors. CSS styles also inherit, meaning some properties are passed from parent to child elements.
Styling Text
Text styling is one of the most common uses of CSS. You can modify font properties, alignment, spacing, and more.
Changing Font Properties
1. Font Family
Specify the font family for text using the font-family property. It’s good practice to list multiple font options in case the user’s device doesn’t support the first choice:
body {
font-family: Arial, sans-serif;
}2. Font Size
Use font-size to control text size. Common units include px, em, and rem:
p {
font-size: 16px;
}3. Font Weight
You can change the boldness of text using font-weight:
h1 {
font-weight: bold;
}4. Text Alignment
Align text horizontally with the text-align property:
p {
text-align: center;
}5. Line Height and Letter Spacing
Control the vertical spacing between lines and the horizontal spacing between letters:
p {
line-height: 1.5;
letter-spacing: 2px;
}Colors and Backgrounds
CSS provides multiple ways to define colors and options for styling backgrounds.
Color Formats
1. HEX
A six-digit code representing red, green, and blue values:
h1 {
color: #ff0000;
}2. RGB
RGB uses numerical values to specify red, green, and blue:
p {
color: rgb(255, 0, 0);
}3. HSL
HSL stands for hue, saturation, and lightness, allowing for more flexibility in color manipulation:
h2 {
color: hsl(0, 100%, 50%);
}Background Properties
1. Background Color
Apply a solid background color to an element:
div {
background-color: #f0f0f0;
}2. Background Images
You can use an image as a background:
body {
background-image: url('background.jpg');
}3. Background Size
Ensure background images are properly sized using background-size:
body {
background-size: cover;
}Box Model
The CSS box model is fundamental to web layout. It defines how elements are displayed in terms of space.
Understanding the Box Model
Each element on a webpage is represented by a rectangular box that includes the content, padding, border, and margin.
- Content: The actual content of the element.
- Padding: Space between the content and the border.
- Border: The edge surrounding the padding.
- Margin: Space outside the border, separating the element from others.
Practical Applications of the Box Model
You can adjust padding and margins to create spacing around elements:
div {
margin: 20px;
padding: 10px;
border: 1px solid black;
}Layout Techniques
CSS provides powerful tools for controlling layout, including display, positioning, and more advanced features like Flexbox.
1. Display Properties
The display property determines how elements are rendered. The most common values are block and inline.
Block vs Inline
- Block elements take up the full width available (e.g.,
<div>,<h1>). - Inline elements take up only the space their content requires (e.g.,
<span>,<a>).
2. Flexbox Introduction
Flexbox is a layout module designed to align items flexibly, which is useful for building responsive layouts.
Example:
.container {
display: flex;
justify-content: space-between;
}3. Positioning Elements
CSS provides different positioning options:
- Static: The default, normal flow of the document.
- Relative: Positioned relative to its normal position.
- Absolute: Positioned relative to the nearest positioned ancestor.
- Fixed: Positioned relative to the viewport and remains in place when scrolling.
Example of absolute positioning:
.element {
position: absolute;
top: 50px;
left: 100px;
}Responsive Design Basics
Responsive design ensures that websites look good on all screen sizes, from mobile phones to large monitors.
Importance of Responsive Web Design
With mobile traffic surpassing desktop traffic, websites must adapt to different devices.
Introduction to Media Queries
Media queries allow you to apply CSS rules depending on screen size:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}Fluid Layouts and Flexible Images
Use percentage-based widths and the max-width property to create layouts that adjust dynamically.
Example:
img {
max-width: 100%;
height: auto;
}Conclusion of CSS Basics
In this post, we’ve covered the foundational concepts of CSS Basics, from basic syntax and selectors to more advanced topics like layout and responsive design.
Practicing is key to mastering CSS, so don’t hesitate to experiment with different styles and techniques.
As you continue your journey in web development, explore additional features like animations, transitions, and CSS Grid.
With consistent learning, you’ll soon be able to build beautiful, responsive websites that users will love.
If you have any questions about CSS Basics, all you have to do is contact us from here.
We hope that this article will be useful to you, and we are happy to share with you the latest technicals and learn together the most famous programming languages.
