HTML and CSS Cheat Sheets for Beginners

Are you having a difficult time learning HTML and CSS? It’s okay! Everyone has to start at some point. The question is are you willing to take the time to understand how to create a basic page design and layout? You can do it. You just need to find the time. I’ve collated some common HTML tags, attributes and CSS properties that you can use. Use it as reference whenever you need to.

HTML and CSS Cheat Sheets for Beginners

Basic HTML Structure


   Title of the website<title>


   

Paragraph goes here…

HTML 5 Page Structure




   Title of the website



  
  
  

Article goes here…

  

Copyright 2017

Common tags

For formatting texts

Heading 1

Heading 2

Heading 3

Attributes that you can use (example below)

Bold text and convey importance Bold text Italicize text and convey emphasis Italicize text Underlines text
Adds quote to text

For content containers or sections

division of content
section of content within a content

Paragraph of Text

Attributes that you can use (example below)

Note: You can change header to nav, section, article, aside, footer, div, span and p.


Adds a line break
Horizontal Rule - adds a basic line

Lists

    Unordered List
    Ordered List
  • List items inside ordered or unordered list
  • Adding Images

    ”text”
    
    

    Adding Links

    link text
    
    

    Adding Tables

    Some attributes you can use for Tables.

    border cellspacing cellpadding align bgcolor width height

    For td.

    colspan rowspan width height bgcolor align Note: You can use style, class and id attributes in a list, image and hyperlink.

    CSS

    External

    
    
    

    Internal

    
    
    

    Inline

    Paragraph goes here…

    CSS properties and values

    color: red; background-color: green; background-image: url(image.jpg); border-color: blue; border: 1px solid red; text-align: left; text-decoration: underline; font-family: fontname; font-size: 14px; font-weight: bold; width: 100%; height: 100%; margin: 10px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; list-style: none;