CSS

CSS is the language used to style and format web pages. It controls the layout, font, color, and other design elements of a webpage.

CSS - MDN Web Docs Glossary

This is how you can add a text stroke to your text.

h1 {-wekbit-text-fill-color: transparent; -webkit-text-stroke: 1px #000; text-stroke: 1px #000;}

Did you know you could add gradient to your text?

h2 {background: linear-gradient(to left, #F8F9FA, #F9FAFE); -webkit-background-clip: text; color: transparent;}

You can use Clamp to hide text after a certain number of lines.

p.short {display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;}

This code will style your underline as a wave.

.wavy {text-decoration: underline wavy black;}

Most Asked Questions about CSS

What is CSS specificity and how does it influence the application of styles?

CSS specificity is a set of rules used in CSS to determine which style rule is applied to an element. It's a method of conflict resolution when there are multiple conflicting CSS rules that could apply to an element. The specificity is calculated based on the different types of selectors used in the CSS rule: inline styles, IDs, classes, attributes, pseudo-classes, and element names. Each of these has a different specificity weight. In general, an ID selector has higher specificity than a class selector, which in turn has higher specificity than an element selector. If selectors have the same specificity, the one declared last in the CSS will be applied.

What are CSS variables and how are they used?

CSS variables, also known as CSS custom properties, are entities defined by CSS authors that contain specific values to be reused throughout the document. They are set using custom property notation (e.g., `--main-color: black;`). After the variable has been set, the var() function can be used to use its value, for example color: var(--main-color);. One of the advantages of using CSS variables is the ability to change a value in a single place, which then updates everywhere the variable is used, making code easier to manage.

What is the CSS Box Model?

The CSS Box Model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like layers of an onion. When you set the width and height properties of an element with CSS, you're setting the width and height of the content area of the box.

To calculate the total size of an element, you need to consider padding, borders, and margins, in addition to the width and height. However, the box-sizing property can be used to alter this default behavior. If you set box-sizing: border-box;, any padding or border of the element is laid out and drawn inside this specified width and height.