If you want to learn CSS, first study HTML. Without understanding HTML, you’re like a home decorator who’s never seen the house.
What is HTML?
HTML is a simple markup language for creating web pages. Below is a simple HTML document from W3 Schools.
Here is what the above document will render in the browser:
One simple way to learn HTML is inside a WordPress Post or Page. Here is a post in “Visual” Mode.
Over on the right hand side of the page you will see the tabs “Visual” and “Text.” Click on “Text” and you will see the HTML of the above page.
How to look at any website in plain HTML
On any Webpage – Go to View – Page Style – No Style – and you will see what the website looks like without CSS. Try this on CSS Zen Garden to view multiple variations of one HTML file with endless CSS possibilities.
For more HTML learning, check out free:
Code Academy HTML course
HTML Dog
Or watch this video series by a cool guy:
Intro to CSS
CSS (Cascading Style Sheets) allows authors to control how a webpage looks through an external style sheet. By “Cascading” one simple style can effect multiple elements throughout the website.
Whereas HTML is used to define the structure of your content, CSS is used to style the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.
This video series is helpful for learning about CSS:
Applying CSS to HTML
3 Ways to Apply CSS. Here is an example of stying directly in HTML (called “inline”). This changes the header color to orange. I used a “style attribute” to give the h2 “type selector” the hex code “value” for orange.
This header is now orange.
In this example, only one header was changed. If I wanted to change every header, it would be time consuming to go into every H2 to change each color. If I want to do a sitewide change, I would do that in a CSS stylesheet. This is where having a “cascading” style sheet is gold. I can make changes to every header in the site from an external (or internal) style sheet.
Three Types of CSS Rules
A CSS rule defines what the HTML should look like and how it should behave in the browser window.
HTML Selector – the text portion of an HTML tag such as the p (paragraph) in the example below.
Class Selector – a rule that can be applied to any HTML tag
ID Selector – is applied only once on each page to a particular HTML tag
To play around with making changes in CSS check out How CSS Selectors work.
For CSS tutorials a great resource is W3Schools.
For styling padding, margins, and borders around content, this is a helpful diagram below.
Tools:
- Firebug
- Web Developer Toolbar
- installing Firefox Developer Edition or Chrome Dev Tools and getting familiar in-browser development tools.
Resourses for Learning CSS:
CSS Tricks
HTML Dog CSS for Beginners
Bloc.io
Dash
Shay Howe
Code Academy
Lynda.com – offers a free trial period
Here are some great books on CSS. The Head First book is very helpful for learning basic HTML and CSS. CSS3 is very detailed and comprehensive for beginners. I particularly like the CSS Mastery book, as it’s a great read and helped me understand the concepts better. I’ve seen Eric Meyer speak and his book is helpful with more advanced topics. At one time or another I grab all of these books. If you are an absolute beginner, I would start with the Head First.
