Introduction to CSS
Introduction to CSS
CSS, short for Cascading Style Sheets, is a style sheet language used to control the presentation and layout of HTML documents. It allows web developers to style elements on a webpage, defining how they should appear to users.
What is CSS?
CSS describes how HTML elements should be displayed on screen, in print, or spoken by a screen reader. It allows for the separation of content and presentation, enabling developers to style the appearance of web pages independently from their structure.
Why CSS is Used?
CSS is used to enhance the visual presentation of web pages, making them more engaging and user-friendly. It allows developers to control aspects such as layout, colors, fonts, spacing, and responsiveness, leading to a better user experience.
CSS Versions and Evolution
CSS has evolved over time with various versions and specifications. The latest major version is CSS3, which introduced many new features and enhancements over its predecessors. CSS is continually evolving, with new modules and updates being developed to address the needs of modern web development.
CSS Types
CSS Types: Inline, Internal, and External Styles
This example demonstrates different ways to apply CSS styles: inline, internal, and external stylesheets.
Inline Styles
Inline styles are applied directly to HTML elements using the style attribute.
style="background-color: #f39c12; color: #fff; "
Internal Styles
Internal styles are defined within the <style> element in the HTML document.
<style>
.internal-style-box {
background-color: #0074d9;
color: #fff;
}
</style>
External Styles
External styles are defined in separate CSS files and linked to the HTML document using the <link> element.
<link rel="stylesheet" href="styles.css">
Example: <link rel="stylesheet" href="styles.css">
Explanation:
- Inline styles are applied directly to HTML elements using the style attribute.
- Internal styles are defined within the
<style>element in the HTML document. - External styles are defined in separate CSS files and linked to the HTML document using the
<link>element.