1. Css Box Model Cheat Sheet Free
2. Css Box Model Cheat Sheet Download
3. Css Box Model Cheat Sheet Printable
4. Css Code Cheat Sheet

Pseudo element selectors::after: insert content after element::before: insert content before element::first-letter: first letter of element::first-line. HTML Cheat Sheet.com / CSS%DVLFV Syntax selector. Box model margin border padding content 6HOHFWRUV. div div,p div p div p div + p div p.classname #idname. Although every body calls this the Box Model it is actually a rectangle having a width & height but no depth. All the HTML elements can be regarded as a 2 dimensional box. The Box Model diagram shows the areas that CSS styles are applied too. The boxes content, text and or graphic images are in the centre of the box, which can be surrounded. CSS2 Box Model CSS2 Positi oning display clear position z-index top direction right unicod e-bidi bottom overflow left clip float visibility CSS2 Dimensions width min-height min-width max-height max-width vertic al- align height CSS2 Colour and Background color backgr oun d-r epeat background backgr oun d-image.

TL;DR – Browsers see an HTML element as a rectangular box known as the CSS box model. It includes four components: borders, padding, margins, and content.

What the box model is

Every HTML element is a box. The CSS box model helps beginners to understand the layout and web page design better.

The box model consists of several components, such as padding and margins. CSS sets the position, size, and other properties to these boxes.

Properties of the box model CSS

In the example below, you see all the properties that make up the CSS box model:

Border box CSS

The border box CSS is between the margin and padding components of the box model. The border shorthand lets you set the width, style, and color properties in on declaration.

The following code example produces borders that are 3px in thickness, dotted, and blue:

Note: if developers do not define the border box CSS, it is set to 0, and the border is invisible.

Padding box model

Padding box model in CSS refers to the space between the border and the element content. The padding shorthand defines all four sides of an element in one declaration.

This example shows how to define all four sides of an element with one value:

Note: you can also use longhand properties such as padding-top, padding-right, padding-bottom, and padding-left to define separate sides individually.

Margin box

The final component in the CSS and HTML box model is the margin. The margin is outside an element, and it surrounds other boxes with space.

The margin shorthand defines the space for all four sides of an element in one declaration. Look at this example:

Note: the margin collapsing happens when margins of separate elements touch each other. It ends with the creation of one margin.

Content box

The content box defines the area for text, links, images, or other element content. The width and height properties define the width and height of the content box.

Remember: you can define the width and height of content boxes with other properties. max-width, min-width, max-height, and min-height set constraints and not a fixed size.

You can calculate the total element width like this:
right margin + left margin + right border + left border + right padding + left padding + width.

To calculate the total element height, follow this rule:
bottom margin + top margin + bottom border + top border + bottom padding + top padding + height.

In this example, we style a <div> element to have a 400 px total width. Here is the math to count the total width of a box: 330px (width) + 30px (right + left padding) + 40px (right + left border) + 0px (right + left margin) = 400px.

CSS box model: useful tips

• You can analyze the CSS box model in every website by using Chrome DevTools.
• By setting the box-sizing property to border-box value, you indicate that the padding and the border are a part of the total width.

What is CSS?

CSS is a foundational element of the Internet. CSS stands for Cascading Style Sheets. It was created in 1994 by Håkon Wium Lie during the early days of the modern World Wide Web. The “style” term in the acronym gives the one-word explanation of what CSS is. The coding language specifies the style and design elements of a website.

CSS is distinct from HTML (Hyper Text Markup Language), which specifies the content. Separating the style from the content allows website developers to better manage websites. HTML elements could be styled in-line in the early days of the Internet. Many browsers still support some HTML attributes for style, which mimic CSS.

For example, to make an item bold in CSS, the code used is font-weight: bold;. the code used in HTML is strong. The best practice for coding is to use CSS for styling and not use any in-line HTML styles.

One advantage of using CSS is that the design style can be separated from the in-line, on-page code. This means that developers can edit the text in one location and the changes will be reflected across the website.

This benefit is realized if the developers specifies the names of CSS Classes and IDs in the code on the page. In conjunction the developer writes the CSS code to style elements in an external CSS file. Which will be placed in the head of your document.

With CSS code, all sorts of element design parameters can be specified. The color, size, spacing alignment, and other characteristics of blocks of text, images, and many other elements can be controlled. Modern CSS continues to evolve to give developers more and more control and creativity with design. The latest set of guidelines being developed is CSS3.

CSS Selectors

CSS Selectors are the foundation of using CSS. You use selectors to target specific elements that you want to style. Below is how the syntax works.

Descendant

Selects all li within an unordered list ul

• ul li

Adjacent

Selects all p elements that are placed immediately after ul elements

• ul + p

Direct children

Selects all a elements where the parent is a p element

• p > a

Sibling combinator

Selects every a element that are preceded by a p element

• p ~ a

Attributes

Selects all elements with a target attribute

• a[target]

Backgrounds

Property

Values

background

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

background (shorthand)

Example

Property

Values

background-position

• top left
• top center
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-%
• y-%
• x-pos
• y-pos

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Borders

Property

Values

border (shorthand)

Example

Property

Values

border-style

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• dashed
• ridge
• inset
• outset

Property

Values

border-bottom

• border-bottom-width
• border-style
• border-color

border-left

• border-left-width
• border-style
• border-color

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

border-top

• border-top-width
• border-style
• border-color

Property

Values

Property

Values

Property

Values

Property

Values

border-right

• border-top-width
• border-style
• border-color

border-radius

• border-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-top-left-radius

Property

Values

Property

Values

Box Model

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

margin

• margin-top
• margin-right
• margin-bottom
• margin-left

margin (shorthand)

Example

Property

Values

Property

Values

Property

Values

Property

Values

padding

• padding-top
• padding-right
• padding-bottom
• padding-left

padding (shorthand)

Example

Property

Values

Property

Values

Property

Values

Property

Values

display

• inline
• inline-block
• block
• flex
• inline-flex
• grid
• inline-grid
• table
• none
• initial
• inherit

Property

Values

Property

Values

Property

Values

Property

Values

Text

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

text-decoration

• none
• underline
• overline
• line-thorugh
• blink

Property

Values

word-break

• normal
• keep-all
• loose
• break-strict
• break-all

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Font

Property

Values

font

• font-style
• font-weight
• font-size/line-height
• font-family

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

font-weight

• lighter
• normal
• bold
• bolder
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• inherit

Lists

list-style

Css Box Model Cheat Sheet Free

• list-style-type
• list-style-position
• list-style-image

These are just a few. To see all list style types visit w3schools.

Property

Values

Colors

Property

Values

Tables

Property

Values

Property

Values

Property

Values

Property

Values

Property

Values

Animations

Property

Values

animation

Css Box Model Cheat Sheet Download

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

Property

Values

Property

Values

Property

Values

animation-timing-function

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-Bezier

Property

Values

Transitions

Property

Values

transition

• transition-property
• transition-duration
• transition-duration
• transition-timing-function
• transition-delay

Property

Values

Property

Css Box Model Cheat Sheet Printable

Values

Property

Values

transition-timing-function

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubicBezier

Recieve resources directly to your inbox

Sign up to get weekly insights & inspiration in your inbox.

Css Code Cheat Sheet