Basics of CSS and HTML for WordPress themes

html and css basics in WordPress

If you are new to web development and/or  WordPress themes, one of the key things for you to master is  Cascading Style Sheets (CSS). There is lots of information available for you to research on the web, but this Introduction is intended to give the beginner an insight into the important aspects of CSS when customizing any WordPress themes.

Where  HyperText Markup Language (HTML) is used to add content to your website, CSS is used to stylise that content and by using your own imagination, you can give your website a unique look-and-feel. So by understanding the basics of CSS, you will be able to experiment and get your site looking perfect for your own needs.

A WordPress theme like the Customizr theme generates a large part of the HTML content, leaving you to concentrate on the unique content of the Pages and Posts etc.

WordPress provides a built-in Custom CSS setting in the live customizer which is a handy way to safely test custom style, as you can Save & Publish your code when you are happy with it. You can also add custom CSS to a specific page of your WordPress site with the free Nimble Builder plugin.

For developers, we recommend using a Child Theme for larger or more complex customizations for your theme, but that is out of scope for this guide.


Cascading Stylesheets (CSS) Basics

CSS standards makers

The  W3C (World Wide Web Consortium) is the main international standards organization, and they are responsible for the latest standard (CSS3). To learn the basics of web technologies, the reference site to use is Web technology for developers of the Mozilla Developer Network. You can find Tutorials and Reference Guides for all CSS coding.

This Guide will focus on a minimum set needed to make changes in your theme, with links to relevant resources for further research.

CSS syntax principles

By familiarising yourself with the basic structures, you will be able to generate customized CSS.

To use CSS, you need to structure the code as follows:

selector {property1: value; property2:value;…property99:value;} . Each selector will have at least 1 property:value.

Several selectors may share the same property:value, and can be coded as .selector1, .selector2, #selector3 {property1: value; property2:value;…property99:value;}

To make these multiple selector {property:value} items readable, the above may be coded as follows:

selector {
property1: value;
property2:value;
<more properties here>;
property99:value;
}<br>

What is a selector ?

A selector can be either an HTML tag, a css class or a css id. This is what ties the HTML content to the CSS styling so that a piece of HTML content can be made to look completely different by using different CSS coding.

An HTML tag is contained within <> brackets, eg <div>, <ul>, <li>, <a>, and these can be given  an identifier by using the class and id attributes.

eg <div id=”my-id” class=”my-class”></div>

the “my-id ” id selector uses the id html attribute .The “my-class” class selector uses the class html attribute.

important : as per W3C requirements, a css class as attribute of several HTML tags while and id can be used to stylise only a single element.

Further reading : http://www.blooberry.com/indexdot/css/syntax/selectors/selectors.htm

CSS  {property :  value }

A CSS selector must have a property and a value.

eg : below, .my-class, h1 and my-id are three selectors sharing the same CSS property color which has a value black.

.my-class, h1, #my-id {
color: black;
}<br>

CSS inheritance concept (cascading)

CSS means Cascading Style Sheets and is the most powerful concept behind CSS. It simply says that in an HTML document, if a parent element (a tag like <body>, <header>, <div>, <span>, etc…) has been styled with properties and values, then its children (i.e. element contained inside the parent) will inherit those properties by default. This is the  inheritance concept.

For example, you don’t want to define your font-family for each single HTML tag of your webpage, do you?

That is where the inheritance comes : usually you will see that the global font-family of a website is defined for the body HTML selector. Only once.

Body is the parent of all other HTML element, they will then inherit the font-family. Isn’t that pretty cool?

Note : Some styles, like font family, text-alignment etc., are automatically inherited by child elements from their parent element but others are not automatically inherited.

Further reading : http://www.w3.org/wiki/Inheritance_and_cascade

CSS specificity concept

In CSS,  specificity determines which CSS rule is applied by the browsers. If two css selectors target the same HTML element, then the selector whith the highest specificity will “win”.

Examples of decreasing specifity for targeting an h1 html tag :

Let’s say we have this picece of HTML code and we need to style the h1 title in blue :

<div class="level1">
  <div class="level2">
    <h1>This is a Heading</h1>
  </div>
</div><br>

Option 1 : styling in the code

<h1 style=”color:blue”>...</h1>

 if you style an HTML element with the “style” attribute directly in your code, this will be applied with the maximum specificity.

Option 2 ; CSS stylesheet

Then, if you style this h1 tag with a style sheet :

.level1 .level2 h1 {color:blue} /* Most specific */
.level2 h1{color:blue}
h1 {color:blue} /* Least specific */<br>

Further reading :

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

http://www.w3.org/TR/css3-selectors/#specificity

http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html

Color styling

A color can be represented in CSS by different value types :

  • name: eg red
  • hex: eg #FF0000
  • rgb: eg rgb(255,0,0)
  • rgba: eg rgba(255,0,0,1)

hex is usually # followed by 6 hex characters (0-9, A-F). Sometimes you will see only 3 (eg #2F9). This is shorthand for #22FF99.

rgba is used to add an ‘alpha’ channel that impacts opacity (aka transparency). Opacity can be 0 (invisible), 0.1 – 0.9 (transparent), 1 (visible).

Typical uses of color are:

selector {color: black;} /* The color of the text */
selector {background-color: #FF0000;} /* The color of the background */<br>

Further reading : https://developer.mozilla.org/en-US/docs/Web/CSS/color

Positioning

Repositioning an element is often required. It can be quite tricky to grasp all the aspects of this, and you are recommended to do some further research.

Typical uses of positioning are:
selector {position: relative; top: 0px; left 0px)} /* You can move an element by adjusting the left/top values */

selector {float: left;} /* Element floats to the left */ 

selector {float: right;} /* Element floats to the right */

There is no float:center command. This can often be achieved by using margin: 0px auto; (see margin/padding).

Further reading : https://developer.mozilla.org/en-US/docs/Web/CSS/position

Sizing

The dimensions of an element (typically an image) can be set using width/height.

Typical uses of sizing are:

selector {width: 200px; height: 100px;}

selector {max-width: 200px; max-height: 100px;}

selector {min-width: 200px; min-height: 100px;}

Margin/Padding

If you can imagine that an element is contained in a box. Margin determines the area surrounding the outside of the box. Padding determines the area surrounding the inside of the box.

Both margin & padding are represented by 4 values in a fixed order: top-right-bottom-left.
eg selector {margin 10px 15px 10px 5px;}

Sides of the box can be targetted using:

  • margin-top, margin-right, margin-bottom and margin-left
  • padding-top, padding-right, padding-bottom and padding-left

Again, you will find lots of shorthand with:

  • 2 values – margin: 0px 10px; which means margin: 0px 10px 0px 10px;
  • 1 value – margin: 0px; which means margin: 0px 0px 0px 0px;

3 values can be found but is not recommended (the 2nd value right/left are the same value).

Margin and Padding are often coded together:

selector {margin: 0px 0px; padding: 10px 5px;}

Although px (pixels) is the most common value, you will also find:

  • em – 1em is equal to the current font size. 2em means 2 times the size of the current font. So if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
  • % – % is often used (eg width: 80%;) as a better way of controlling x-axis dimensions on different devices. 200px will look different on a widescreen monitor (1920px x 1080px) and a tablet (768px x 1024px). You will see references to ‘Responsiveness’, and this is one of the impacts.

Font styling

You can set various font attributes using CSS.

Typical uses of font attributes are:

body {
font-family: Garamond; /* Adjust sitewide (Garamond) font family */
color: #5A5A5A; /* Adjust sitewide (#5A5A5A) text color */
font-size: 14px; /* Adjust sitewide (14px) text size */
font-weight: bold; /* Adjust sitewide (bold) text weight [normal(400)-bold(700)-bolder-lighter-100-900] */
}<br>

Borders

You may need to add a border to an element.

Typical uses of border are:

selector {border: 2px solid green;}

/* 2px=thickness, solid=style (dotted - dashed - solid - double - groove - ridge - inset - outset), green=color */

Sides of the box can be targetted using:
border-top, border-right, border-bottom and border-left

Hiding elements

The most common way to hide an element uses:

selector {display: none;}

Comment your code!

It is always useful to comment your code as you may forget over time what it was intended to do. Comments can be included between /* and */
eg /* This is a comment */ 

With these basics, you should now be able to use the  Snippets with some greater understanding. There are more CSS items used, but you can either trust what has been included or research further on the Mozilla Fundation website.

image source : pxhere.com

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles