Css Style Cheat Sheet

Posted : admin On 1/29/2022
  1. Css Style Rule 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 :-)

Using Styles

CSS stands for Cascading Style Sheets and it is the language used to style the visual presentation of web pages. CSS is the language that tells web browsers how to render the different parts of a web page. Every item or element on a web page is part of a document written in a markup language. CSS in one page html (css.su) CSS Cheat Sheet.png CSS Cheat Sheet.pdf CSS Level 1 Quick Reference DeepX Ltd.pdf. List-style-image Image to be used as the bullet in a list. The properties for each selector are in the order they should appear when using shorthand notation.

An introduction to cascading style sheets, proper CSS syntax, the use of hooks to target web page elements, methods of linking styles to an HTML document, inheritance and specificity, and links to advanced CSS resources.

An external CSS file

Sheet

Within the html header

Inline in the HTML

Sheet
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 selectors 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

Css Style Rule Cheat Sheet

Prev Top Next