Learn CSS in One Day and Learn It Well
Close
    • Learn CSS In One Day and Learn It Well
    • Preface
    • Tools of the Trade
    • Opening a .HTML File
    • What is HTML
    • Basic Structure of a HTML Page
    • Elements Within the Body Element
    • This is the most important heading.
    • Elements For Adding Javascript Code to Website
    • Elements For Formatting Text
    • Elements for Defining Sections of a Webpage
    • Comments
    • Character Entities
    • Applying CSS Code
    • Syntax of a CSS rule
    • Selecting an Element
    • Selecting Classes and IDs
    • More Selectors
    • Case Insensitivity
    • Order of Precedence
    • Display Inconsistency
    • Comments
    • What is the CSS Box Model
    • Width and Height Properties
    • Overflow Property
    • Padding and Margin Properties
    • Border Properties
    • Positioning
    • Floating
    • Display
    • Visibility
    • Background Color
    • Background Image
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    • Font Properties
    • Text Properties
    • CSS Lists
    • CSS Links
    • Navigation Bars
    • Border, Padding and Margin
    • Height and Width
    • Text Alignment
    • nth-child( ) Selector
    • Bonus Project
    • Thank You
    • Exercise 3.1
    • Exercise 4.1
    • Exercise 5.1
    • Exercise 5.2
    • Exercise 6.1
    • Exercise 7.1
    • Exercise 8.1
    • Exercise 9.1
    • Exercise 9.2
    • Exercise 10.1

Introduction

Welcome to the world of CSS. I am so glad and honoured that you picked up this book. Before we embark on this learning journey together, let us first define what is CSS.

CSS stands for Cascading Stylesheet and is used for the styling and design of a website. It is one of the many languages a web programmer uses to create a website. Other web languages include HTML, Javascript and PHP, just to name a few.

HTML is concerned with the content and structure of a website. As a website’s existence is meaningless without content, knowing HTML is essential for anyone interested in web programming. This book will first start with an introduction to HTML, covering some of the essential basics you need to know about HTML. While this coverage is by no means comprehensive, it should be enough for you to perform most of the HTML tasks necessary. If you are familiar with HTML, feel free to skip to Chapter 3.

Tools of the Trade

Before we start coding our HTML and CSS pages, let us first look at some of the recommended tools for doing web programming.

At the most basic level, you only need a web browser (e.g. Internet Explorer, Chrome, Safari, Firefox) and a text editor (e.g. Notepad) to start coding websites. However, unless you belong to the school of thought that real programmers shouldn’t use any programming aid, I strongly encourage you to use some of the free tools available online to make your coding life easier.

One of the most recommended tool is an advanced text editor that offers syntax highlighting. Syntax highlighting means the editor will display text in different colors depending on the purpose of the text. For instance, the editor may use red color for keywords, blue for comments and green for variables. This simple feature will make your code much easier to read and debug. If you are on a Windows machine, I suggest Notepad++ (http://notepad-plus-plus.org/). For Mac, I suggest TextWrangler (http://www.barebones.com/products/textwrangler/). Both are free to use. 

Opening a .HTML File

An .HTML file can be opened in two ways. One way is to open it in a web browser by double clicking on the file. This is for viewing the page. Another way is to open it in a text-editor for editing. To do that, first launch your text-editor and then open the file from within the editor.

When working with HTML files, I suggest you open the file in your browser and text-editor concurrently and arrange the two windows so that they are side-by-side. That way, you can edit the code on your editor, save it, and then move over to your browser, refresh the page and immediately check the effects of the changes you made to the code. Follow this procedure when working on the exercises from Chapters 3 to 10.

Community Questions