Introduction to CSS

Introduction to CSS

• CSS stands for Cascading Style Sheets
• It's a rule-based language used to format content in an HTML page
• CSS separates HTML content from formatting
• CSS code can be embedded within HTML or saved as a separate file with a .css extension
• Formatting instructions for an element are referred to as a rule set
• Rules define how elements are displayed in a web browser
• Combining and matching rules from different files is referred to as cascading

Need of Style Sheets

• CSS styles HTML elements
• Style sheets contain rules to define the appearance of HTML data
• CSS describes how HTML elements should be displayed
• CSS used to style web pages; design, layout, and display variation across devices and screen sizes.

Cascading Style Sheet (CSS)

• A language used for formatting instructions within an HTML page
• Separates HTML content from formatting
• CSS code can be embedded within HTML or stored in a separate file with a .css extension
• Formatting instructions for an element are known as rule sets
• Rule sets determine how content within an element will be displayed within a web browser
• Combining and matching rules from different files is referred to as cascading

CSS Syntax

• A CSS rule-set comprises a selector and a declaration block
• Declaration blocks contain one or more declarations separated by semicolons
• Each declaration contains a CSS property and its value, separated by a colon
• Declarations end with a semicolon, blocks surrounded by curly braces

Multiple Properties and Selectors

• Multiple property-value pairs for a selector are separated by semicolons within a declaration block
• Multiple selectors can be grouped together to apply a single property
• Multiple properties can be set for multiple selectors within a single statement

Styling HTML with CSS

• CSS added to HTML in three ways: inline, internal, and external
• Inline styles are applied directly within the HTML element
• Internal stylesheets are defined within the HTML document using the style element
• External stylesheets are separate files containing style rules linked to the HTML document

1-Inline Styles

• Inline styles are placed directly within the HTML element
• They're not reusable and can't be reused across multiple web pages
• Web designers can't use style builders to create inline styles

2-Internal Styles

• Internal stylesheets are placed within the section of an HTML document
• They are reusable within that specific webpage
• The type attribute of the style element specifies the content type, usually "text/css"

3-External Style Sheet

• External styles are saved as separate .css files
• These files contain style rules that are linked to multiple HTML pages
• External styles offer reusability, enabling consistent styling across multiple web pages

Types of Selectors

• Selectors specify elements that will be styled using CSS
• Types include: group, universal, type, ID, and class selectors

1. Type Selector

• Specifies an element's name with styles to be applied to that element
• Styles are applied to all occurrences

2. Class Selector

• Matches elements with the same class attribute value
• Starts with a "." followed by the class name

3. ID Selector

• Matches an element with a particular ID attribute
• Starts with a "#" followed by the ID value

4. Universal Selector

• Applies styles to all elements in the document
• Represented by an asterisk (*)

5. Group Selector

• Groups multiple selectors using a comma (,) separator
• Style rules apply to any element matching any of the selectors in the group

Class vs ID

• Classes can be applied to multiple elements on a single page
• Classes are assigned using a dot (.) before the class name
• Multiple classes can be applied to a single element
• IDs are unique to each element on a page
• IDs are assigned using a hash (#) symbol before the ID name

Comments

• Descriptive text for CSS code
• Makes code more readable
• Marked with '/' and '/' to make single-line comments or multi-line comments

Pseudo Classes

• Pseudo-classes apply styles to elements based on their state, such as visited, unvisited, active or hover state
• Used for styling hyperlinks, buttons or other elements based on user interaction
• Selectors can contain multiple pseudo-classes

Pseudo Elements

• Pseudo-elements style specific parts of an element
• Used for styling first-line, or inserting content before or after an element

CSS Background

• CSS background properties define background effects for elements
• Examples include background color, image, repeat, attachment, and position

Text and Font Style

• Text properties control text appearance in web pages (color, alignment, indentation, transformation)
• Font properties control font type, size, and style.

Questions (Summary from the provided text)

• What is CSS? Cascading Style Sheets; a rule-based language for formatting content on web pages.
• What are advantages of using CSS? Time-saving for reusable styles; easier maintenance (global changes update automatically), multiple device compatibility, offline browsing, platform independence.
• What are components of a CSS Style? Selector and declaration block; declarations consist of properties and values, separated by semicolons.
• What is the difference between ID and Class selectors? Classes are reusable and can be applied to multiple elements; IDs are unique to a single element.
• What are the various ways of using CSS in an HTML page? Inline, internal, and external stylesheets.
• What is an external Style Sheet? An external CSS file containing style rules linked to HTML pages, with a .css extension, promotes reusability and consistent styles across multiple webpages.