Introduction to CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements on a webpage. While HTML provides the structure and content of a webpage, CSS is responsible for how that content looks—its colors, fonts, spacing, positioning, and overall design. By separating content (HTML) from presentation (CSS), developers can create more maintainable, consistent, and visually appealing web pages.
Key Features of CSS:
Separation of Content and Design: CSS enables the separation of structure (HTML) from style (CSS), which makes it easier to maintain and update a website’s design.
Cascading Nature: CSS follows a cascading priority system. If multiple rules are applied to the same element, the browser decides which one takes precedence, based on specificity and source order.
Responsive Design: CSS makes it possible to create flexible, responsive designs that adapt to different screen sizes, making your website mobile-friendly.
How CSS Works:
CSS works by selecting HTML elements and applying specific style rules to them. These rules can target elements by their ID, class, or HTML tag. Here's a simple example of a CSS rule:
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
This rule applies to all
(header) elements on the page, changing the text color to blue, setting the font size to 36 pixels, and centering the text.
Basic Syntax of CSS:
A CSS rule consists of a selector and a declaration block:
Selector: Specifies which HTML element the rule applies to (e.g., h1, .class-name, #id-name).
Declaration Block: Contains one or more style properties and their values, enclosed in curly braces {}.
Example:
selector {
property: value;
}
Types of CSS:
Inline CSS: Styles applied directly to an HTML element using the style attribute.
Example:
Welcome
Internal CSS: Styles defined within the tag in the <head> section of an HTML document.<br> Example:</p> <style> body { background-color: lightblue; }
External CSS: Styles are stored in a separate .css file, which is linked to the HTML document using the tag.
Example:
Common CSS Properties:
Color & Background: color, background-color, background-image, etc.
Text Style: font-size, font-family, line-height, text-align, etc.
Box Model: width, height, margin, padding, border.
Positioning: position, top, right, bottom, left, z-index.
Layout: display, flex, grid, float, clear.
Borders & Shadows: border, box-shadow, text-shadow.
Animation & Transitions: animation, transition.
Why Use CSS?
Consistency: CSS allows for consistent styling across multiple web pages. You can define styles once and apply them to any number of pages.
Efficiency: Using CSS, changes to the design can be made globally without altering individual HTML files.
Flexibility: CSS provides many ways to customize the layout and design of elements, from simple color changes to complex animations and grids.
Performance: External CSS files are cached by the browser, improving loading times and performance across multiple pages.
Top comments (0)