CSS Cheat Sheet A quick reference list of basic CSS properties for changing text, layout and colour of HTML elements, as well as how to include them in your web page. Not sure what CSS is, perhaps see the cascading style sheets introduction first:-). CSS Cheat Sheet – A Complete Guide for Beginners and Professionals In this article, we’re going to share a CSS Cheat Sheet that will be useful for all of your web development projects. What is more, you’ll find 13 pages of CSS and CSS3 declarations alongside several possible properties. Cascading Style Sheets (CSS) works with HTML to simplify web page design. If you understand how to use CSS rules, you can specify a style once that can be applied to every page (or to every particular element) of your website. A list of tips and tricks can help all web designers build sites that. Complete CSS Cheat Sheet. Whether you are a savvy web developer or just someone who wants to.

• Css And Html Cheat Sheet
• Css Style Cheat Sheet

The Box Model

• The CSS Box Model

  • Starting at the content and working out:

  • • padding — space between the content & box edge; background-color fills behind this space.

  • • border — line around the edge of the box.

  • • margin — space outside the box, pushing other boxes away; can see through margin to what’s behind.

• • margin & padding can take 1–4 values.

  • With 4 values, we start at the top and continue clockwise around the box.

  • The same system applies completely to padding

Box dimensions

• margin

  • Create space outside the box, pushing other boxes.

  • Target each side individually: margin-top, margin-right, margin-bottom, margin-left

• • Because margins are outside of a box they can actually have negative numbers.

  • Instead of pushing other boxes away, negative margins pull the box in a specific direction.

  • Will pull the box to the left by 5em and can cause elements to overlap.

• padding

  • Create space inside the box, pushing text away from the edge.

  • Target each side individually: padding-top, padding-right, padding-bottom, padding-left

• • Control the horizontal space of a box.

• height

  • Controls the vertical space of a box.

  • Setting a height should be avoided at all costs.

  • Let the content inside the box dictate the height.

• • Make a box be at least a certain width, but can expand.

• min-height

  • Make a box at least a certain height, but can expand.

  • This is infinitely better than just height

• • Control how elements that break out the edges of the box are dealt with.

  • One of: visible, hidden, scroll, auto

  • Also contorl a single direction: overflow-x, overflow-y

• calc()

  • Sometimes we can’t calculate a value ahead of time because it depends on something the browser knows but we don’t, e.g. adding em + px together.

  • Always have a space around the math operator!

Colours & borders

• • Set the colour of the text.

• background-color

  • Set the colour of the box, behind the text.

• • Control the thickness of the stroke around a box.

• border-color

  • Set the colour of the box stroke.

• • Set the visual appearance of the line.

  • Possible values: solid, dashed, dotted, double, groove, ridge, inset, outset

• border shorthand

  • A short form version for setting the three border properties.

  • border:

  • • border-width

  • • border-style

  • • border-color

• • Target each side of the box using border-* properties.

  • border-top, border-right, border-bottom, border-left

  • There’s also all the other singular properties like border-top-width, border-bottom-style but I rarely use those.

• border-radius

  • Make the corners of the box slightly rounded.

  • Control each side differently, start on top-left, go clockwise around.

  • Do ovals using a / to separate the different axes

• • Make the whole box and all its content semi-transparent.

  • A number between 0 & 1

• box-shadow

  • Create a drop-shadow behind the box.

  • Requires at least 3 values:

  • box-shadow:

  • • horizontal-offset

  • • vertical-offset

  • • optionally: blur-radius

  • • optionally: spread-radius

  • • color

• • Separate each box-shadow with a comma.

• outline

  • Like a border, but outside border, doesn’t take up space, will overlap surrounding elements.

  • outline-offset — will push the outline away from the box edge.

Css And Html Cheat Sheet

Box sizing systems

• • Do not use content-box

  • The default box calculation math puts the padding & border outside the width set in CSS.

  • This causes all sorts of confusing math solutions on responsive sites and just makes our coding life annoying.

  • Example calculation:

• box-sizing: border-box

  • Always use border-box

  • Simplifies the responsive math by making the width of a box, as set in CSS, not change by adding padding and border.

  • Always include this snipped of CSS!

  • Example calculation:

Display & layout

Css Style Cheat Sheet

See the CSS layout cheat sheet for more detail.

• • Flows content together, fitting on the same line if possible.

  • margin, padding, widthdon’t work.

• display: block

  • Takes up a whole line by itself.

  • margin, padding, widthdo work.

• • A hybrid between block & inline: fits on the same line, allows padding, width, etc.

• display: none

  • Completely hide the element from the page.

  • Set to another display value to make it visible again.

A quick reference list of basic CSS properties for changing text, layout and colour of HTML elements, as well as how to include them in your web page.

Not sure what CSS is, perhaps see the cascading style sheets introduction first :-)

Using Styles

An external CSS file

Within the html header

Inline in the HTML