CSS Ruleset

A CSS ruleset is the foundation of how styles are applied to HTML elements on a web page. It consists of a selector and one or more declarations, which define how elements are displayed.

• A CSS ruleset is made up of a selector and declarations.
• The selector targets HTML elements to apply styles.
• Declarations are pairs of property names and values that define how the selected elements should be styled.
• The declarations are enclosed in curly braces {}.

• The selector is p, which targets all <p> (paragraph) elements in the HTML.
• The declarations define how the <p> element should look. The color property changes the text color to blue, and the font-size property sets the text size to 16px.

Declarations

A declaration specifies a CSS property and its value, separated by a colon (:). Declarations must end with a semicolon (;).

1. Color and Background

The declaration block to style the body of an element can be written by keeping body as a selector and the declaration must be kept within these {} braces.

2. Font and Text

The declaration block to style the h1 element by using an element selector.

3. Box Model (Margin, Padding, Border)

The box model describes the structure of an element as a rectangular box consisting of content, padding, border, and margin.

4. Positioning of elements within the width and height of the screen

CSS positioning controls how an element is placed on a page using properties like static, relative, absolute, fixed, and sticky.

5. Flexbox

Flexbox is a layout model that provides efficient alignment and distribution of space among items in a container, even if their size is dynamic.

6. Responsive Design

Using media queries to adjust styles for different screen sizes.

7. Advanced Selectors

• Advanced selectors in CSS allow for more precise targeting of elements, such as using pseudo-classes (e.g., :nth-child()), pseudo-elements (e.g., ::before), attribute selectors, and combinators like > or ~.
• They enhance styling capabilities by enabling dynamic and contextual styling based on states, relationships, and element attributes.

8. Pseudo-classes

A pseudo-class is a keyword added to a selector that defines a special state of the selected elements. For example, you might want to style an element when the user hovers over it, or when a link has been visited.

9. Pseudo-Elements

A pseudo-element allows you to style specific parts of an element, such as the first letter or the first line, or even insert content before or after the element.

Note: Double colons :: are recommended for pseudo-elements, but some older browsers also support a single colon :

10. Combining Pseudo-Classes and Pseudo-Elements

You can use pseudo-classes and pseudo-elements together for advanced styling. On hovering the button a flame symbol will appear before the content ie Click me in the button.