Codely

CSS Information

Details about Cascading Style Sheets

CSS Basics

CSS is cool

What is CSS?

CSS is a stylesheet language made to define a visual display, layout, and styling of HTML elements on a web page.

Separation of Concerns

CSS allows you to separate add on to HTML. This makes websites easier & funner to maintain, style, and update.

Selectors and Properties

CSS works by using selectors to target specific HTML elements and applying properties For Example:
font-size: 7rem;
p { color: blue; }

Key Concepts:

The Box Model

Almost all HTMl elements are considered as boxes, however to edit these defeault properties you must define the padding, border, or margin values.

Responsive Design

Modern CSS is used to make websites responsive, allowing different layouts and functions like hover

Specificity

When having mutliple elements and sections, styling each and every part can become very difficult. This is why we use classes to group similar groups. For example, the cards I used to display this information is under the same class "card". Therefore, now I can reuse the same class anywhere without needing to retype the code again.

Responsive Design



CSS can allow websites to chaneg styles and designs depending on the screen width of a device like a phone or table

shhhhhh

This box is styled entirely using CSS!