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 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 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 can be found at http://www.w3schools.com. 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: 

 

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.

 

CSS inheritance concept (cascading)

CSS means Cascading StyleSheets. This 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.

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 :

 

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 :

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:

Further reading : 

http://www.w3schools.com/cssref/pr_text_color.asp

 

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

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

Further reading : 

http://www.w3schools.com/cssref/pr_class_position.asp

 

Sizing

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

Typical uses of sizing are:

Further reading : 

http://www.w3schools.com/cssref/pr_dim_width.asp 

 

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.

Further reading : 

http://www.w3schools.com/cssref/pr_margin.asp

 

Font styling

You can set various font attributes using CSS.

Typical uses of font attributes are:

Further reading : 

http://www.w3schools.com/cssref/pr_font_font.asp

 

Borders

You may need to add a border to an element.

Typical uses of border are:

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

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 at w3schools.com.

@credits : Dave Bardell (@rdellconsulting)