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 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 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 :

 

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 aSite Title & Logo
Logo.tc-header .brandLogo

SOCIAL ICONS

Social Icons.navbar-wrapper .social-block aSocial Icons
Social Icons.social-block aSocial Icons
Social Icons.navbar-inner .social-blockSocial Icons
Social Icons.navbar-wrapper .navbar h2Social Icons
Social Iconsa.icon-feedRSS
Social Iconsa.icon-twitterTwitter
Social Iconsa.icon-facebookfacebook
Social Iconsa.icon-googleGoogle+
Social Iconsa.icon-instagramInstagram
Social Iconsa.icon-wordpressWordPress
Social Iconsa.icon-youtubeYouTube
Social Iconsa.icon-pinterestPinterest
Social Iconsa.icon-githubGithub
Social Iconsa.icon-dribbbleDribbble
Social Iconsa.icon-linkedinLinkedIn

 TAGLINE

Tagline.inside .site-descriptionTagline
Taglineh2.site-descriptionTagline
Tagline.tc-headerTagline
Tagline.navbar-wrapper .navbar h2Tagline

NAVBAR

Navbar Menu.navbar .navbar-inner Navbar Box
Navbar Menu.navbar .nav > li > a Menu item
Navbar Menu.navbar .nav > li > a:hoverMenu item
Navbar Menu.navbar .nav > li > a:focusMenu item
Navbar Menu.navbar .btn-navbar3-bar Button
Navbar Menu.dropdown-menu > li > aDropdown Menu item

SLIDER

Slider.carouselSlider
Slider#customizr-sliderSlider
Slider#customizr-slider.carousel .itemSlider
Slider.carousel-caption h1Slider Heading
Slider.carousel-caption pSlider Sub-Heading
Slider.carousel-caption .btnSlider Button

FEATURED PAGES

Featured pages.marketing h2Header
Featured pages.fp-text-one, .fp-text-two, .fp-text-threeText
Featured pages.btn.btn-primary.fp-buttonButton
Featured pages.round-divWhite Rectangles
Divider.featurette-dividerDivider
Posts/Page.tc-hot-crumbleBreadcrumb
Posts/Page.entry-title.format-icon > aPost Title
Posts/Pageh1.entry-titlePost Title
Posts/Page.entry-metaNotice
Posts/Page.entry-meta .btnCategory
Posts/Page.entry-dateDate
Posts/Page.entry-meta .url.fn.n Author
Posts/Page.comments-link .fs1Comments Count bubble
Posts/Page.page .entry-title.format-iconPage Icon/Title
Posts/Page.blog .entry-title.format-iconPost Icon/Title
Posts/Page.page #main-wrapper h1.format-iconPage/Post Icon

FOOTER

Footerfooter#FooterFooter
Footerfooter#footer pFooter
Footerfooter#footer aFooter
Footerfooter#footer h3Footer
Footer.footer-widgetsFooter Widgets

SIDEBARS

Sidebars.tc-sidebarSidebars
Sidebars.left .tc-sidebarLeft Sidebar
Sidebars.right .tc-sidebarRight Sidebar

MISCELLANEOUS

Miscellaneous.homeFront Page
Miscellaneous.blogPosts
Miscellaneous.pagePages
Miscellaneous.page-id-nPage id#
MiscellaneousbodyMain Body
Miscellaneous#main-wrapperCenter 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)