Need help with marketing? Get your personalised Marketing Support Pack.

☰

IMC90 Hack your website HTML & CSS

Ben takes you behind the scenes on your WordPress website and demonstrates how you can tweak your site with these HTML & CSS short code tricks.

Notes

What is HTML

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.Wikipedia

Core of what we know today was invented by Tim Berners-Lee. First website

HTML in WordPress

CSS Styles

  • To edit CSS in WordPress open Appearance > Customise > Additional CSS
  • Learn more about CSS at w3schools.com/css

Image by Markus Spiske, Pexel

Full example HTML content and explainer


IMC90 Hacking your website with HTML & CSS

Web development

What is HTML

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Wikipedia

Core of what we know today was invented by Tim Berners-Lee. First website

Timeline of HTML: htmlwasher.com

Example HTML code

HTML Code

<html>

<head>
  <title>This is a web page</title>
  <meta name="description" content="Outline for HTML webinar">
</head>

<body>

  <img src="/wp-content/uploads/2022/12/Icon-wireframe-1011x1024.png" width="100" height="100" alt="Wireframe icon"/>

  <h1>This is a web page</h1>

  <h2>This is my sub title</h2>

  <p><strong>First paragraph</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui erat, iaculis et aliquam a, pulvinar quis libero. Ut vehicula felis vitae tortor porttitor interdum.</p>
  
  <p><strong>Second paragraph</strong> - Nam sed justo metus, tempor imperdiet quam. Pellentesque id suscipit sapien. Donec mollis velit sit amet est bibendum id fringilla dolor volutpat. Nullam tincidunt commodo dolor, posuere rhoncus ligula faucibus vel.</p>

  <p>Emphasised <em>italic text</em></p>

  <a href="https://ratherinventive.com">Link to my website</a>

  <!-- Comment or note that won't display -->

</body>

</html>

Rendered HTML

This is a web page Wireframe icon

This is a web page

This is my sub title

First paragraph – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui erat, iaculis et aliquam a, pulvinar quis libero. Ut vehicula felis vitae tortor porttitor interdum.

Second paragraph – Nam sed justo metus, tempor imperdiet quam. Pellentesque id suscipit sapien. Donec mollis velit sit amet est bibendum id fringilla dolor volutpat. Nullam tincidunt commodo dolor, posuere rhoncus ligula faucibus vel.

Emphasised italic text

Link to my website

HTML in WordPress

Formatting problems

  • Use Shift Enter to make a line break. Demo on CTA
  • Hyper linked space
  • Alignment issues – Cleaning up HTML code from another website or MS Word file
  • Problem if adding into plain text such as WooCommerce products or some page builders

Example HTML to use with HtmlWasher

<!-- ######## This is a comment  ######## -->
<h3>This is a <span style="background-color: #89bbaa; color: #ffffff; padding: 0 3px;">sample text</span> you can play with!</h3>
<p><img style="width: 200px;" src="https://htmltidy.net/editor/images/htmltidy-logo.png" alt="HTML Tidy" /><strong>&nbsp; &nbsp;intant HTML beautifier offers you many code editing options:</strong></p>
<p>he following Tidy options are available:</p>
<ul style="background-color: #89bbaa; color: #ffffff; font-weight: bold; padding: 5px 40px;">
<li>Inline styles</li>
<li>Classes, ID's</li>
<li>Empty tags</li>
<li>Tags with one space</li>
<li>Successive spaces</li>
<li>Remove comments</li>
<li>Tag attributes</li>
<li>Make plain text</li>
</ul>

Rendered HTML

This is a sample text you can play with!

HTML Tidy   intant HTML beautifier offers you many code editing options:

he following Tidy options are available:

  • Inline styles
  • Classes, ID’s
  • Empty tags
  • Tags with one space
  • Successive spaces
  • Remove comments
  • Tag attributes
  • Make plain text

CSS Styles

  • Open Customise > Additional CSS in WP
  • Open HTML inspector. Show block highlighting
  • How to find and tweak elements in inspector
  • Add custom CSS examples
/* Change headings to red */
/* TODO: Add h3 or even .wp-block-heading */
h2 { 
	color: red;
}
/* Change link colour https://mycolor.space */
a {
	color: red;
}
/* Change text size and reduce margin */
h2 {
	margin-bottom: 5px; /* 
	font-size: 1.6em
}
/* Make icons green */
img {
 	filter: hue-rotate(280deg); /* colour wheel helpful */

}
Make media images grayscale
.wp-block-media-text__media {
	filter: grayscale()
}

Learn more about CSS at w3schools.com/css

Magic codes

  • Really called CSS classes
/* Make all icons of different size fit together */
.icons img {
	aspect-ratio: 1/1; /* 16/9 is better */
	object-fit: contain;
}
/* Highlight sections with a background colour */
.highlight {
	background-color: #5EC272;
	padding: ;
	color: ;
	border-radius: ;
}

Need some Marketing help?