Beginners Guide To CSS

The full form of CSS is Cascading Style Sheets. These are files with .css extension that contain the code which determines how web pages are formatted and presented to the users.

images/articles/css/css07.webp

Before you learn some of the basics of CSS codes, it is important to understand why it was first introduced when all styles can be added in HTML pages itself.

1. Background of CSS

When CSS was not there and all formatting was done in HTML pages. Web developers faced a lot of difficulties in creating and modifying web pages. Most part of code was repeated in all the pages. If you wanted to even change the color of page, you need to edit all the style codes in HTML pages.

With CSS, content is separated from styling of documents. HTML is used to deliver content while CSS is used to deliver all the formatting. In short, HTML + CSS combination works wonders to create web sites.

In short, CSS is used to control the style and layout of multiple web pages at once.

2. Linking Cascading Style Sheets

Now as there two files (HTML and CSS), that are used to deliver any web page (content with formatting) across browser, you need to tell HTML files to include CSS files by adding a simple line of code to your HTML files.

<link rel="stylesheet" href="/css/style.css">

3. Three Parts of CSS Code

Styles are simply a list of selectors. Each selector can have a number of style rules. Each rule describes some attribute of the selector. The basic form of style sheets contains three parts:

  1. Selector
  2. Property
  3. Value

The selector is the HTML element (like body, p, table) for which you want to create a style rule. The property defines what you want to do (size, color, border) and the value specify the exact details each property is applied to. 

selector {
  property1: value;
  property2: value;
  property3: value;
}

4. Types of Selectors

Above code is an example of Element selector that is applied to all the elements of the HTML tag. There are two more types of selectors that are frequently used - Class selector and ID selector.

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.

Class Selector: The class selector finds elements with the specific class. It uses the HTML class attribute. To find elements with a specific class, write a period (dot) character, followed by the name of the class.

5. Styling Elements

What do you actually mean by styling elements? There are six common types of styling that can be applied to any element:

  1. Background
  2. Alignment
  3. Decoration
  4. Text Font and Color
  5. Border
  6. Padding and Margin

These styling can be applied to body, paragraph, lists, tables, links, images, and so on.

6. CSS Box Model

Every element that browser displays takes some space. Consider the space as a box which has three parts - padding, border and margin. At times, there can be lot of confusion between these three elements and specially between padding and margin. Below image will clear all your doubts.

7. CSS Text Styling Properties

  • color
  • text-align
  • vertical-align
  • text-decoration
  • text-transform
  • text-indent
  • font-family
  • font-size
  • letter-spacing
  • word-spacing
  • line-height

7.1. Font Family

The generic fonts are:

  1. Serif: These fonts have little serifs (tiny cross strokes that enhance readability). Print text tends to use serif fonts, and they are the default font for most browsers. Example: Times New Roman.
  2. Sans-Serif: Sans serif fonts don't have the serifs. They are generally used for headlines or other emphasis. They are sometimes seen as more modern and cleaner than serif fonts, so they are used for body text. Example: Arial.
  3. Cursive: These fonts look a little like handwriting. In Windows, the script font is usually Comic Sans MS. Script fonts are used when you want a less formal look.
  4. Fantasy: Fantasy fonts are decorative. Fantasy fonts are used sparingly, for emphasis, as they often trade readability for visual appeal.
  5. Monospace: Monospace fonts produce a fixed-width font like typewritten text. Monospace fonts are frequently used to display code. Example: Courier.

Example:

p {
font-family: "Trebuchet MS", Helvetica, FreeSans, sans-serif;
}

First, the browser tries to load Trebuchet MS. If it is a Windows machine, this font is available. If that doesn't work, the browser tries Helvetica (a default Mac font). If that doesn't work, it tries FreeSans, a font frequently installed on Linux machines. If this doesn't work, it defaults to the sans-serif, which simply picks a sans-serif font.

Font names that take up more than one word must be in quotes, and the list of font names is separated by commas.

7.2 Font Size

The different types of measurement have different implications. There are two distinct kinds of units in CSS.

  1. Absolute measurements describe a particular size as in the real world.
  2. Relative measurements are about changes to some default value. In general, web developers are moving toward relative measurement for font sizes.

Pixels (px)

Pixels refer to the small dots on the screen. You can specify a font size in pixels, although it is not usually done. For one thing, different monitors make pixels in different sizes. You can't really be sure how big a pixel will be in relationship to the overall screen size. Different letters are different sizes, so the pixel size is a rough measurement of the width and height of the average character.

Percentage (%)

The percentage unit is a relative measurement. It is used to specify the font in relationship to its normal size. Use 50% to make a font half the size it would normally appear and 200% to make it twice the normal size. For example,

p {
font-size: 150%;
}

Percentages are based on the default size of ordinary text, so an <h1> tag at 100% is the same size as text in an ordinary paragraph.

Em (em)

In traditional typesetting, the em is a unit of measurement equivalent to the width of the "m" character in that font. In actual web use, it is another way of specifying the relative size of a font. For example, 0.5em is half the normal size, and 3em is three times the normal size.

p {
font-size: 1.5em;
}

8. CSS List Styling Properties (ul, ol)

  • list-style-type
  • list-style-position
  • list-style-image

9. CSS Table Styling Properties (table, th, td)

  • border
    • border-style
    • border-width
    • border-color
    • border-collapse
    • border-bottom
  • width
  • height
  • text-align
  • vertical-align
  • padding

10. CSS Image Styling Properties

  • float

11. CSS Margin and Padding

The margin is area outside the border. It does not have a background color, and is completely transparent. The padding is area around the content inside the border. It is effected by the background color of the element.

The top, right, bottom, and left margin or padding can be changed independently using separate properties. A shorthand margin or padding property can also be used, to change at once.

12. CSS Display

The display property specifies how an element is displayed - none, block, inline, inline-block. Every element has a default display value. However, you can override this to make the page look in a specific way.

  1. A block element is an element that takes up the full width available, and has a line break before and after it. It always starts on a new line. Examples: h1, p, div, li
  2. An inline element only takes up as much width as necessary, and does not force line breaks. Examples: a, span, img
  3. A none element (display: none;) is commonly used with JavaScript to hide and show elements without deleting and recreating them.
  4. An inline-block element is like inline element but it can have a width, height, margin or border. This is useful to create a grid of boxes that fills the browser width and wraps nicely when the browser is re-sized.