M2R5 / introduction-to-web-design
Overview
Learn the basics of CSS, the language used to style the visual presentation of web pages, controlling colors, fonts, and layouts.
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in HTML (or XML). CSS separates the content (HTML) from its visual presentation, making web design more flexible and efficient.
What is CSS?
- It's a style sheet language, not a programming language.
- It controls the look and feel of a web page, including colors, fonts, spacing, layout, and responsiveness.
- It allows designers to apply consistent styling across multiple web pages from a single file.
Why Use CSS?
- Separation of Concerns: Keeps HTML focused on content and structure, while CSS handles presentation. This makes code cleaner and easier to manage.
- Efficiency: Styles can be defined once and applied to many HTML elements or even multiple pages, saving time and effort.
- Consistency: Ensures a uniform look and feel across an entire website.
- Responsiveness: Essential for creating layouts that adapt to different screen sizes and devices.
Basic CSS Syntax:
A CSS rule consists of a selector and a declaration block.
selector {
property: value;
property: value;
}
- Selector: Points to the HTML element(s) you want to style (e.g.,
pfor paragraphs,h1for headings). - Declaration Block: Contains one or more declarations separated by semicolons.
- Declaration: Includes a CSS property and a value, separated by a colon (e.g.,
color: blue;).
Example:
p {
color: blue;
font-size: 16px;
}
h1 {
color: #FF0000;
text-align: center;
}
How to Include CSS:
- Inline CSS: Using the
styleattribute directly in an HTML tag. (Not recommended for large projects). - Internal CSS: Placing
<style>tags within the<head>section of an HTML document. - External CSS: Linking to a separate
.cssfile from the HTML document using the<link>tag in the<head>section. (Most recommended method).
CSS is indispensable for creating modern, visually appealing, and responsive web designs.
Exam Tip:
Define CSS, explain its purpose, and briefly describe its basic syntax (selector, property, value). Know the different ways to include CSS in an HTML document.