Role of CSS

The primary role of CSS is to separate the content of a web page from its visual presentation.

This separation allows web developers to create more flexible and maintainable websites.

With CSS, developer can control the layout, colors, fonts, and overall visual appearance of web pages without altering the HTML structure.

One of the most powerful aspects of CSS is its ability to create responsive designs.

With CSS, developer can make the website look great on any device; like in a desktop computer, a tablet, or a smartphone.

CSS allows developer to adjust layouts, font sizes, and other visual elements based on the screen size of the device viewing the website.

Another important feature of CSS is its cascading nature, which is where the "cascading" in its name comes from.

The styles can be inherited and overridden, allowing for a hierarchical structure of styling.

CSS also supports the use of external stylesheets.

Developer can keep all their styling rules in a separate file, which can then be linked to multiple HTML pages.

This feature greatly enhances the maintainability of websites, especially larger ones.

Instead of having to change styles on each individual page, you can make changes in one CSS file that will affect all linked pages.

Basic Syntax

A CSS rule is made up of two main parts: a selector and a declaration block.

If developer want to apply the same set of styles to multiple selectors, they can create a selector list with each selector separated by a comma.

A selector is a pattern used in CSS to identify and target specific HTML elements for styling.

Example; Type Selectors, Class Selectors, ID Selectors, Universal Selector, Attribute Selectors, and Combinator Selectors.

The curly braces provided in the basic syntax are known as a declaration block.

A declaration block applies a set of styles for a given selector, or selectors.

Inside the declaration block, it will have a series of declarations.

Each declaration consists of a property and a value.

The property is the CSS identifier that specifies which feature is being styled.

The value would be the specific setting applied to that property

After each property name, developer need to place a colon, and after each value, they should have a semicolon.

Inline CSS

Inline CSS is written directly within an HTML element using the style attribute.

It applies styles to a specific element.

Inline CSS is generally used for quick, one-off styles or to override other styles for a specific element.

However, it should be avoided in most cases because it can clutter the HTML and make the code harder to maintain.

Internal CSS

Internal CSS is written within the style tags inside the head section of an HTML document.

It applies styles to the entire page and is useful when developer need to style a single document.

Internal CSS is best used when developer need to apply styles to a specific page rather than across multiple pages.

It's useful for single-page websites or when the styles don't need to be reused elsewhere.

However, there are some downsides, such as not promoting reusability across multiple pages.

Additionally, like inline CSS, it mixes HTML and CSS, making the code harder to maintain in larger projects.

External CSS

External CSS is written in a separate CSS file and linked to the HTML document using the link element in the head section.

It allows developer to style multiple pages consistently and is the preferred method in professional web development.

External CSS is ideal for large projects where you want to maintain a consistent style across multiple pages.

It promotes separation of concerns by having HTML handle the structure and CSS handle the styling, which makes the code more maintainable and scalable.

Most of the time, it's better to use external CSS to keep the styles organized and maintainable.

Type Selectors

Class Selectors

All class selectors must start with a dot.

ID Selectors

All ID selectors must start with a hash symbol.

Universal Selector

Attribute Selectors

mySelector[myAttribute] { myProperty: myValue; }

It is used to select elements with the specified attribute.

mySelector[myAttribute="myValue"] { myProperty: myValue; }

It is used to select elements with the specified attribute and the exact value.

mySelector[myAttribute~="myValue"] { myProperty: myValue; }

It is used to select elements with an attribute value containing a specific word.

mySelector[myAttribute|="myValue"] { myProperty: myValue; }

It selects elements with the specified attribute with the exact specified value, or the exact specified value followed by a hyphen (-).

mySelector[myAttribute^="myValue"] { myProperty: myValue; }

It matches every element whose attribute value begins with the specified value.

mySelector[myAttribute$="myValue"] { myProperty: myValue; }

It matches every element whose attribute value ends with the specified value.

mySelector[myAttribute*="myValue"] { myProperty: myValue; }

It matches every element whose attribute value containing a specified value.

Combinator Selectors

CSS combinators are used to define the relationship between selectors in CSS.

They help in selecting elements based on their relationship to other elements, which allows for more precise and efficient styling.

Descendant Combinator

myAscendantSelector myDescendantSelector { myProperty: myValue; }

A space is used between the parent and child selector.

A descendant combinator is used to target elements matched by the second selector if they are nested within an ancestor element that matches the first selector.

An ancestor can be a parent element or a parent's parent.

Child Combinator

myParentSelector > myChildSelector { myProperty: myValue; }

A child combinator is used to select elements that are direct children of a specified parent element.

This combinator targets only elements with a specific parent, making the CSS rules more precise and preventing unintended styling of deeper nested elements.

Next-sibling Combinator

mySelector1 + mySelector2 { myProperty: myValue; }

A next-sibling combinator selects an element that immediately follows a specified sibling element.

This combinator is useful when you want to apply styles to an element that directly follows another element, allowing for targeted styling based on the element's position relative to its siblings.

Subsequent-sibling Combinator

mySelector1 ~ mySelector2 { myProperty: myValue; }

A subsequent-sibling combinator selects all siblings of a specified element that come after it.

The combinator can target any siblings that follow the specified element, offering greater flexibility in styling.

Group Selectors

mySelector1, mySelector2 { myProperty: myValue; }

A group selector select a group of selector that has same CSS rules.

Instead of writing the same CSS rule for each selector one by one, a group selector can be used to avoid time consume.