CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS defines how elements should be displayed on screen, paper, or in other media. It controls the layout of multiple web pages all at once and allows you to separate the content of your web pages (HTML) from the presentation of your web pages (CSS).
Key Concepts of CSS
Selectors: Patterns used to select the elements you want to style.
Properties: The aspects of the elements you want to change, like color, font, or layout.
Values: The specific settings for those properties.
Basic Structure of a CSS Rule
Example : selector {
property: value;
}
Explanation of the Example
Linking the CSS File to HTML:
The < link> element in the < head> section of the HTML file links to the external CSS file (styles.css).
Basic Body Styles:
The body selector targets the entire page, setting a font family, removing default margins and padding, and setting a background color.
Header Styles:
The header selector styles the header section, setting a background color, text color, padding, and text alignment.
Navigation Styles:
The nav selector styles the navigation bar, setting a background color, text color, padding, and text alignment.
The nav a selector styles the links within the navigation bar, setting the text color, margin, and removing the default underline.
Main Content Styles:
The main selector adds padding to the main content section for better spacing.
Footer Styles:
The footer selector styles the footer section, setting a background color, text color, text alignment, padding, and fixing its position at the bottom of the page.
How CSS Works
Cascading: Styles can be applied to the same element from different sources, including external stylesheets, internal stylesheets, and inline styles. The cascading rules determine which styles are applied.
Inheritance: Some CSS properties are inherited from parent elements to child elements, while others are not. For example, font-related properties are inherited, while layout-related properties (like margins and padding) are not.
Specificity: Determines which CSS rule is applied if multiple rules match the same element. Specificity is calculated based on the types of selectors used.