Css Commands Cheat Sheet



Css Commands Cheat Sheet

Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card.

This comprehensive CSS flexbox cheatsheet will cover everything you need to know to start using flexbox in your web projects. CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will 'flex' to different sizes to fill the space. All Cheat Sheet in one place! Stop to forget formulas or commands. Be more productive. Cascading Style Sheets is a style sheet language used for describing.

Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS3 cheat sheet that would present the main features of CSS3 in a handy, printable reference card.

So we asked our friend Chris Hanscom from Veign (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. We already encouraged you to experiment with CSS 3 in our lastposts and now you can use this handy cheat sheet to use the new CSS 3 features in some modern browsers (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.). The result is a printable CSS 3 scrib sheet, created and released exclusively for the readers of Smashing Magazine. Thank you for your great work, Chris Hanscom!

In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

Css commands cheat sheet free

The cheat sheet was done in the same format as the CSS 2 Reference Guide that you may want to use for your projects as well.

Printable

Download the CSS 3 Cheat Sheet for free!

  • preview (.gif, 1255×882px)
  • download the pdf (5 pages, 123 Kb)

Thank you very much, Chris Hanscom! We appreciate your efforts.

Css Commands Cheat Sheet 2020

Further Resources About CSS 3

  • Take Your Design To The Next Level With CSS3 In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
  • Push Your Web Design Into The Future With CSS3 A couple of HTML 5 examples and experiments.

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 Table

Using Styles

Css

An external CSS file

Within the html header

Inline in the HTML

Colours & BordersTop
color: red;Element Colour - eg. red | #FF0000
background-color: white;Background Colour of element
background-image: url(image.gif);Background Colour of element
border-color: yellow;Border Colour of element
border: 1px solid blue;Width, style and colour of border defined together
Css Commands Cheat Sheet
Text StylesTop
text-align: left;Horizontal Alignment - left | center | right
text-decoration: underline;Text Decorations - eg. none | underline | line-through
font-family: fontname;Font Face (Typeface) - eg. Verdana, Arial, Helvetica
font-size: 16pt;Font Size or Height - eg. 12pt | 15px
font-weight: bold;Font Weight (Boldness) - eg. bold | normal | 200
Size and LayoutTop
width: 400px;Width of HTML element - eg. 100px | 50%
height: 100%;Height of HTML element - eg. 20px | 100%
margin: 5px;Margin - space around an element, or distance between two elements
margin-top: 1px;Top Margin. Also try -bottom: -left: or -right:
padding: 5px;Padding - distance between an elements contents and its border
padding-top: 1px;Top Padding. Also try -bottom: -left: or -right:
CSS ListsTop
list-style: none;Clear existing bullet types set by html list tags
Prev | Top | Next