CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML. CSS is used to style all HTML tags, including the document's body, headings, paragraphs, and other pieces of text. CSS can also be used to style the display of table elements, grid elements, and images.

font-family

The font-family property sets the font for text. The value can be a font name, such as Arial, or a generic family name, such as serif or sans-serif.

The font-size property sets the size of the font. The value can be a number, such as 12px, or a relative value, such as larger or smaller.

font-style

The font-style property sets the style of the font. The value can be normal, italic, or oblique. font-weight The font-weight property sets the weight of the font. The value can be normal, bold, or lighter or heavier.

line-height

The line-height property sets the height of lines of text. The value can be a number, such as 1.5, or a relative value, such as larger or smaller.

background-color

Sets the color for the background.

text-align

Alignment of the horizontal text alignment for an HTML element.

In CSS, you can inherit the properties of elements. This means that you can define an element in such a way that its properties are also transferred to the subordinate elements.

The inheritance of properties in CSS works as follows:

First, you define a basic element. This basic element has certain properties that are transferred to all subordinate elements.

Subordinate elements can now adopt these properties or define their own properties.

The basic element can also pass on properties to its subordinate elements.

The inheritance of properties in CSS also works in the opposite direction: subordinate elements can also pass on properties to their basic element.

Picture from michaelkipp.com

Here you can see that multiple <p> inherit from <article>. For this reason, it makes sense that the style for <p> is set in the body so that it is the same everywhere.

Override in CSS

In CSS, the "override" refers to the ability of a later style declaration to override or replace an earlier declaration. If two conflicting styles are applied to an element, the later style will take precedence and will be the one that is used to determine the element's presentation. This allows you to create more specific styles that can override more general styles, and to ensure that the styles applied to an element are the most appropriate for that element.

This code sets the default font size for all <p> elements to 14px and the default color to blue. However, if you want to override these styles for a specific element, you can use the !important rule like this:

In the code above, the font-size and color styles are marked as !important, which means that they will be applied to all <p> elements on the page, even if the default styles try to override them. CSS override codes are commonly used when you want to change the default styles of a website or web application without modifying the original stylesheets. By using the !important rule, you can ensure that your styles will be applied to the elements you want to target, regardless of any other styles that may be applied to those elements.

Classes in CSS

In CSS, a class is a group of elements that share the same styling. Classes are defined using a . followed by the class name, and they can be applied to any element on the page.

For example, suppose you want to create a class called highlight that makes text bold and red. You can define this class in your stylesheet like this:

To apply the highlight class to an element on the page, you would add the class attribute to the element and set its value to the name of the class you want to apply, like this:

In the code above, the <p> element has the class attribute with a value of highlight, which means that it will be styled according to the rules defined in the .highlight class in the stylesheet.

Classes are a powerful tool in CSS because they allow you to apply the same styles to multiple elements on a page without repeating the same code multiple times. This makes your stylesheets more modular and easier to maintain.