vdmlovers 
What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a web page written in HTML or XHTML. CSS simplifies the process of making web pages visually appealing by controlling the layout, colors, fonts, and overall design.
Some of the things you can do with CSS include:
- Adjusting text color and font style.
- Controlling paragraph spacing.
- Managing the layout of columns.
- Applying background images or colors.
- Creating responsive designs for various devices and screen sizes.
CSS is powerful yet simple to learn and is typically used alongside HTML to enhance the visual appearance of web pages.
Key Selectors in CSS
CSS relies on selectors to apply styles to specific HTML elements. Two key types of selectors are:
- Class Selector
- Used to apply styles to multiple elements with the same class name.
- Classes are referenced in CSS using a dot (.) followed by the class name.
Example:
Output: Both paragraphs will have red text with a font size of 18px.
- ID Selector
- Used to apply styles to a single, unique element.
- IDs are referenced in CSS using a hash (#) followed by the ID name.
Example:
Output: The specific paragraph will have blue text with a font size of 20px.
Important Note: Always declare the class or ID selector in the opening tag of the HTML element you wish to style. Also, end each CSS declaration with a semicolon (;).
Types of CSS
- Inline CSS
- Written directly inside the HTML element’s opening tag.
- Not recommended for professional projects, but useful for quick testing or learning.
Example:
Output: The paragraph text will appear in green with a font size of 16px.
- Internal CSS
- Defined within a
<style>tag inside the<head>section of the HTML file. - Keeps styles centralized in the same document.
Example:
Output: The paragraph text will appear in orange with a font size of 18px.
- Defined within a
- External CSS
- Written in a separate
.cssfile and linked to the HTML document. - The most professional and maintainable approach.
Example:
HTML File:
CSS File (styles.css):
Output: The paragraph text will appear in purple with a font size of 20px.
- Written in a separate
Note: Ensure the file name in the <link> tag matches the CSS file name exactly, including the case.
Benefits of CSS
- Saves Time
- Write CSS once and apply it to multiple HTML files.
- Device Compatibility
- CSS enables content optimization for various devices, like mobile phones, tablets, and desktops, using responsive design techniques.
- Easy Maintenance
- Update styles in one place, and the changes reflect across all linked HTML documents.
