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

<html>
<head>
   <title>Title of the website<title>
</head>
<body>
   <p>Paragraph goes here…</p>
</body>
</html>

HTML 5 Page Structure

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
   <title>Title of the website</title>
</head>
<body>

<header>
   <nav>
     <ul>
         <li>Link 1</li>
         <li>Link 2</li>
         <li>Link 3</li>
     </ul>
   </nav>
</header>

<section>
   <img src=”banner goes here” />
</section>

<article>
   <p>Article goes here…</p>
</article>

<aside>
   <h2>Supporting Content</h2>
   <p>Text goes here…</p>
</aside>

<footer>
   <p>Copyright 2017</p>
</footer>

Common tags

For formatting texts

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Attributes that you can use (example below)

<h1 style=”css styling goes here”></h1>
<h1 class=”class name”></h1>
<h1 id=”id name”></h1>

<strong>Bold text and convey importance</strong>
<b>Bold text</b>
<em>Italicize text and convey emphasis</em>
<i>Italicize text</i>
<u>Underlines text</u>
<blockquote>Adds quote to text</blockquote>

For content containers or sections

<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

<div>division of content</div>
<span>section of content within a content</span>
<p>Paragraph of Text</p>

Attributes that you can use (example below)

<header style=”css styling goes here”></header>
<header class=”class name”></header>
<header id=”id name”></header>

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

<br /> Adds a line break
<hr /> Horizontal Rule - adds a basic line

Lists

<ul>Unordered List</ul>
<ol>Ordered List</ol>
<li>List items inside ordered or unordered list</li>

Adding Images

<img src=”url” alt=”text” />

Adding Links

<a href=”url”>link text</a>

Adding Tables

<table></table>
<tr></tr>
<th></th>
<td></td>

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

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Internal

<style>
   p { color: red; }
</style>

Inline

<p style=”color: red;”>Paragraph goes here…</p>

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;

How to register and display a custom navigation in WordPress?

WordPress navigation

Adding custom navigation to your own WordPress theme is simple. You do not need any advance skill to do it yourself.

The only pre-requisite to accomplish this is to know where your functions.php is located.

The functions.php is located in your themes folder inside your WordPress project. That is in wp-content/themes/THEMENAME/functions.php.

Step 1: Add function THEMENAME_custom_new_menu() in your functions.php


<?php
function THEMENAME_custom_new_menu() {
     register_nav_menu('primary-menu',__( 'Primary Menu' ));
}
add_action( 'init', 'THEMENAME_custom_new_menu' );
?>

Note: THEMENAME is user-defined. You may change this anytime.

Step 2: Print your menu anywhere in your theme file (e.g. in your index.php or page.php


<?php wp_nav_menu( array(
     'theme_location' => 'my-custom-menu',
     'container_class' => 'custom-menu-class'
) );
?>

How to dynamically print post and page content to the WordPress Theme?

In your page.php, add the following code to dynamically fetch data (in loop) from the WordPress database.


<?php
if ( have_posts() ):
while( have_posts() ): the_post();
?>           
<?php the_title();?>
<?php the_content();?>

<?php endwhile;
endif;
?<

How to add and define a widget area in WordPress?

How to add and define a widget area in WordPress?

In your functions.php, simply add the following code:


<?php
function THEMENAME_widgets_init() {      
register_sidebar( array(           
    'name' => __( 'My Widget Area', 'THEMENAME' ),           
    'id' => 'sidebar-1',           
    'description' => __( 'Add widgets here to appear in your sidebar.', 'THEMENAME' ),           
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',           
    'after_widget' => '</aside>',           
    'before_title' => '<h2 class="widget-title">',           
    'after_title' => '</h2>',      
) );
}
add_action( 'widgets_init', 'THEMENAME_widgets_init' );
?>

Note:
1. THEMENAME is user-defined, you may change this to your actual theme folder name.
2. You need to add a separate code in your HTML structure (e.g. page.php file) to call out the defined widget area.

To print your widget area to your theme file, add the following code:

<?php dynamic_sidebar( 'sidebar-1' ); ?>

Note: sidebar-1 is the class name in the functions.php definition.

How to add a CSS in WordPress?

How to add a CSS in WordPress?

Here are three methods on how you can add a CSS in WordPress.

First option: The standard and static way of adding a link between your stylesheet and html file.

Add the following to your HTML code.

Inside the <head> of your HTML.


<link rel="stylesheet" type="text/css" href="css/style.css" />

Note:

1. css/style.css is only an example directory and file. It may be different on your case, it is dependent on your actual stylesheet directory and file name.
2. For JS, the code should be <script src=”js/code.js”></script>. Similar with note #1, js/code.js is only an example directory and file.

Second option: Add an @import in your CSS file. Example In your CSS file, add the code above. @import ‘css/bootstrap.min.css’;

Third option: Create a functions.php in your selected WordPress theme folder with the following script.

Example


<?php
function THEMENAME_script_enqueue() {
     wp_enqueue_style('stylename', get_template_directory_uri() . '/css/style.css');
     wp_enqueue_script('jsname', get_template_directory_uri() . '/js/code.js');
}
add_action( 'wp_enqueue_scripts', 'THEMENAME_script_enqueue');

Note:
1. THEMENAME should be replaced with the actual theme folder name.
2. wp_enqueue_script is an additional code where in you add javascript files within your WordPress project. It is not mandatory.
3. You need to add wp_head() in the <head> section of your HTML and add wp_footer() before the end of your tag to make sure that the scripts are added to your HTML structure.