Cascading Style Sheet (CSS)
⭐Concept of CSS
CSS, or Cascading Style Sheets, is a style sheet language used for describing the
presentation of a document written in HTML or XML. It controls the layout,
formatting, and design of web pages. CSS provides a powerful tool for web
designers to create visually appealing web pages.
⭐Creating Style Sheet
A style sheet in CSS is a set of rules that define the appearance of HTML
elements. It allows web designers to control the layout and presentation of
multiple web pages from a single file.
▷Types of CSS:
1. Inline CSS: This type of CSS is applied directly to an HTML element using the
"style" attribute. It has the highest priority.
Syntax:
2. Internal CSS: Internal CSS is defined within the `<style>` element, typically
placed in the `<head>` section of an HTML document.
Syntax:
3. External CSS: External CSS is defined in a separate file with a `.css` extension
and linked to an HTML document using the `<link>` element.
Syntax (HTML FILE):
Syntax (CSS FILE):
Description:
CSS works by associating style rules with HTML elements. It allows you to
define styles such as layout, colors, and fonts for multiple web pages all at
once. By separating the presentation from the content, it enhances the
flexibility and maintainability of web pages. It offers a variety of selectors and
properties that enable precise control over the appearance of elements. CSS
provides a wide range of features, including layout adjustments, responsive
design, animations, and transitions, to create a visually engaging and user-
friendly website.
Main Parts of CSS:
1. Selectors: These determine which element to style.
2. Properties: These define the appearance of the selected elements.
3. Values: These specify the settings for the properties.
Sub-parts of CSS:
1. Box Model: It includes properties such as margin, border, padding, and
content, defining the space around and inside an element.
2. Flexbox: This is a layout model that allows elements to align and
distribute space within a container, even when the size is unknown or
dynamic.
3. Grid: CSS Grid Layout provides a two-dimensional layout system for
designing web pages using rows and columns.
4. Typography: This includes the properties related to font styles, sizes, and
colors.
5. Layout: It involves properties like margin, padding, and positioning for
arranging elements on the web page.
6. Color: This encompasses properties for defining text and background colors.
⭐CSS Properties
CSS properties define the visual style, layout, and behavior of HTML elements.
They allow designers to control the appearance of various elements on a web
page, making it visually appealing and user-friendly.
Common CSS Properties:
1. Background Properties: These properties control the background appearance
of an element. They include background color, background image, and
background positioning.
2. Text Properties: These properties manage the appearance and style of text
content. They include font size, color, alignment, and decoration.
3. Font Properties: These properties control the font style and appearance of
text elements. They include font family, style, weight, and variant.
Description:
CSS properties are essential for creating visually appealing and attractive web
pages. They enable designers to customize the look and feel of elements,
providing a unique and engaging user experience. A solid understanding of CSS
properties is crucial for effective web design and development.
Main Parts of CSS Properties:
1. Background Properties: These manage the background appearance and
settings of elements.
2. Text Properties: These control the formatting and style of text content.
3. Font Properties: These govern the style and appearance of the fonts used in
the content.