css

CSS Basics

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

Display Property

Display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element is often called a block-level element. An inline element is always just called an inline element.

• Block: div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
• Inline: span is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph. The a element is the most common inline element, since you use them for links.
• None: Another common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.
• This is different from visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the space it would if it was fully visible.
• Inline-Block
• Flex
• Grid

Centering Objects

Horizontal Alignment

• Automatically: Set selector to margin: auto and width: something
• Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container.
• The element will take up the width you specify, then the remaining space will be split evenly between the two margins.

Vertical Alignment

• Automatically: Set parent selector (container) to display: flex
• Manually: Padding, line-height, or (position and transform)

Transforms, Transitions, and Animations

Transforms allow you to move, rotate, scale, and skew elements. The following are transform properties:

Transitions: A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

• The highest performance transition properties are position, scale, rotation, and opacity for maintaining high fps

Animations: If you want to perform something that does not specifically involve a start state and an end state, or you need more fine grain control over the keyframes in a transition, then you've got to use an animation.

CSS Layout (float, flex, grid)

Elements are surrounded by greater and less than angle brackets, e.g. <div>

Tags are composed of both the angle brackets and element, e.g. <div>

Opening tags look like <div>