What is CSS?
CSS (Cascading Style Sheets) is used to control the presentation of a web page. It allows you to separate the style (visual layout) from the content (HTML structure), making it easier to manage, update, and customize your site.
CSS Syntax
A CSS rule consists of a selector and a declaration block. The selector indicates the HTML element you want to style, and the declaration block contains one or more declarations, each with a property and value.
Types of CSS
There are three main ways to apply CSS to a web page:
- Inline CSS: Style is applied directly to an HTML element using the
styleattribute. - Internal CSS: CSS is written within a
<style>tag inside the HTML<head>section. - External CSS: Styles are defined in an external file with a
.cssextension and linked to the HTML file.
CSS Selectors
Selectors allow you to target specific HTML elements to apply styles. Here are some basic types:
- Element Selector: Selects all elements of a specific type (e.g.,
p,h1). - Class Selector: Selects elements with a specific class (e.g.,
.example). - ID Selector: Selects an element with a specific ID (e.g.,
#header).
Box Model
The CSS box model describes the layout and spacing of elements. Each element has content, padding, border, and margin.
- Content: The actual text or image within the box.
- Padding: Space between the content and the border.
- Border: A line surrounding the padding and content.
- Margin: Space outside the border, separating the element from other elements.
Example: Styling a Webpage
Here's an example of how CSS styles can transform the appearance of a webpage: