The Basics of Mark Up

Hypertext Mark Up language is from the family of mark up languages: Human readable and editable text, which includes instructions, for the computer. It’s origins are from the print industry, instructions to the printer to change typeset, size, weight, line spacing ect, and this is how it’s used in HTML, instructing your browser.

CSS is a side-along file which describes re-usable instructions, so you don’t have to put all of them per line: Do it once, use many.

Mark up takes the syntax of using angle brackets, with a open and close instruction

Common tags are the same as found in word-processors

Paragraph

H1 – Main heading

H2 – Next heading

H3 – Smaller Heading

The stylesheets in your theme will have been described in it’s CSS theming for each of these types, but different browsers can display these differently, by default.

These are pretty straightforward to tweak in your additional css tool.

Divider <div> tags, the main markup and positioning tool

Looking at the code of any site, you’ll notice a lot of div tags, nested inside of each other. This is the template designers tool for positioning blocks of information and design around the site, positioning menus, with lots of positioning, alignment and scaling instructions. Each of these will often be modified by additional instructions, classes and ID, for our purposes it’s mostly the class tag you will be modifying, as if you’re doing more than this, you’re doing more than tweaking the site, and really redesigning it, and you might want a different template.

Class tags – the main part you need to change

Classes, drive the layout and design of the site, creating context sensitive changes to the main tags of HTML, only where they are applied, so for example

and the corresponding stylesheet to change this would be

.menu-header {text-color:#bbb;}

If you use the inspector you can often play with these changes, and it will auto-suggest the syntax you need

https://www.w3schools.com/ is an excellent repository for the types of syntax you can change.

If the designer has done the site properly you will find instances where they have used classes, and tweak them for your changes. Once changed they will replicate throughout the site.

The important elements of syntax here are:

.class

the dot notates a class, and must match the class name you found.

Copy the name from the inspector into your custom css box

{}

Curly brackets, must be opened and closed, and contain all the properties you want to change

Colon

Each property is divided by a colon, with the property and it’s value after, For example:

font-size: 150%

Semicolon

Each property needs to be separated by a semicolon, you can have dozens of properties, as need, for example:

font-size: 150%; color:#ccc

If you get an error on the inspector, you will have made a small error of syntax, the https://www.w3schools.com/ site has lots of examples of how the syntax works

An example project

A cool thing I found worked nicely to tweak this site, and make it work a little better, visually, was to add a slight drop shadow, so looking on w3 schools, i found https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

the header area I found has the class

h1.entry-title

so I devised the following syntax, using the example values:

h1.entry-title{text-shadow:0 0 10px #000;}

So I can copy this into the aditional css area.

The instruction there is to offset the shadow by 0 in x and y, blur it by 10 pixels and make it black, we can vary the values to suit our website.