Documentation Menu

Guide to CSS and HTML in the Customizr WordPress theme

If you are new to web development and/or Customizr, 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 using Customizr.

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. If you look at the Customizr Showcase, you’ll see a number of sites that have the familiar Customizr style – Logo, Header Bar (including Social Icons, Tagline and Navbar), Slider (aka Carousel), 3 featured Pages with Zoom effect, Pages/Posts, Sidebars and Footer. Look closely and you will find a handful of sites that break away from that traditional look and have used the Theme to create a very unique look. As well as using the strengths of the Theme, they have added some creative CSS that makes their site unique.

So by understanding the basics of CSS, you will be able to experiment and get your site looking perfect for your own needs.

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.

The Theme provides a Custom CSS panel which provides a very powerful way of testing the impact of a CSS change instantly. And you can Save & Publish your code when you are happy with it. We’d actually recommend that you use a Child Theme when you have mastered Customizr, 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 Customizr, with links to relevant pages in w3schools 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;
}

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;
}

 

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>

 

Option 1 : styling in the code

<h1 style=”color:blue”>  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 */

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 */

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] */
}

 

 

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 */ 

 

 

Customizr Elements

New : Check this comprehensive CSS glossary of the Customizr theme.

Now we are ready to understand the elements used in the Customizr architecture.

Here’s a simple diagram showing the core architecture:

———————————–
—        Logo —   Social Icons — Tagline         —
—                         Navbar Menu                          —
———————————–
—                     Carousel / Slider                       —

—                   FP1        FP2       FP3                     —

—                           Post/Page                            —

— Footer One – Footer Two – Footer Three —

 

Blocks

CSS selectors

Description

Logo .brand a Site Title & Logo
Logo .tc-header .brand Logo

SOCIAL ICONS

Social Icons .navbar-wrapper .social-block a Social Icons
Social Icons .social-block a Social Icons
Social Icons .navbar-inner .social-block Social Icons
Social Icons .navbar-wrapper .navbar h2 Social Icons
Social Icons a.icon-feed RSS
Social Icons a.icon-twitter Twitter
Social Icons a.icon-facebook facebook
Social Icons a.icon-google Google+
Social Icons a.icon-instagram Instagram
Social Icons a.icon-wordpress WordPress
Social Icons a.icon-youtube YouTube
Social Icons a.icon-pinterest Pinterest
Social Icons a.icon-github Github
Social Icons a.icon-dribbble Dribbble
Social Icons a.icon-linkedin LinkedIn

 TAGLINE

Tagline .inside .site-description Tagline
Tagline h2.site-description Tagline
Tagline .tc-header Tagline
Tagline .navbar-wrapper .navbar h2 Tagline

NAVBAR

Navbar Menu .navbar .navbar-inner  Navbar Box
Navbar Menu .navbar .nav > li > a  Menu item
Navbar Menu .navbar .nav > li > a:hover Menu item
Navbar Menu .navbar .nav > li > a:focus Menu item
Navbar Menu .navbar .btn-navbar 3-bar Button
Navbar Menu .dropdown-menu > li > a Dropdown Menu item

SLIDER

Slider .carousel Slider
Slider #customizr-slider Slider
Slider #customizr-slider.carousel .item Slider
Slider .carousel-caption h1 Slider Heading
Slider .carousel-caption p Slider Sub-Heading
Slider .carousel-caption .btn Slider Button

FEATURED PAGES

Featured pages .marketing h2 Header
Featured pages .fp-text-one, .fp-text-two, .fp-text-three Text
Featured pages .btn.btn-primary.fp-button Button
Featured pages .round-div White Rectangles
Divider .featurette-divider Divider
Posts/Page .tc-hot-crumble Breadcrumb
Posts/Page .entry-title.format-icon > a Post Title
Posts/Page h1.entry-title Post Title
Posts/Page .entry-meta Notice
Posts/Page .entry-meta .btn Category
Posts/Page .entry-date Date
Posts/Page .entry-meta .url.fn.n  Author
Posts/Page .comments-link .fs1 Comments Count bubble
Posts/Page .page .entry-title.format-icon Page Icon/Title
Posts/Page .blog .entry-title.format-icon Post Icon/Title
Posts/Page .page #main-wrapper h1.format-icon Page/Post Icon

FOOTER

Footer footer#Footer Footer
Footer footer#footer p Footer
Footer footer#footer a Footer
Footer footer#footer h3 Footer
Footer .footer-widgets Footer Widgets

SIDEBARS

Sidebars .tc-sidebar Sidebars
Sidebars .left .tc-sidebar Left Sidebar
Sidebars .right .tc-sidebar Right Sidebar

MISCELLANEOUS

Miscellaneous .home Front Page
Miscellaneous .blog Posts
Miscellaneous .page Pages
Miscellaneous .page-id-n Page id#
Miscellaneous body Main Body
Miscellaneous #main-wrapper Center Block

 

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.

@credits : Dave Bardell (@rdellconsulting), Nicolas Guillaume (@nikeo)