WhatsApp

If you are introduced to the website world, you must have heard the three letter word - CSS. It is not one word, but short form of three words. The full form os CSS is Cascading Style Sheets. These are simple files with .css extension that contain some piece of code. The code determines how web pages are formatted and presented to the users.

Before you learn some of the basics of CSS codes, let's see why it was first introduced when all styles can be added in HTML pages itself.

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.

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="/style.css">

Three Parts of Every 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 syle 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;
}

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.

Styling Elements

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

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

These styling can be applied to body, paragraph, lists, tables, links, images, etc.

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.

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

Font Family

The generic fonts are:

  1. Serif: These fonts have little serifs (the tiny cross strokes that enhance readability). Print text tends to use serif fonts, and they are the default font for most browsers. The most common serif typeface is Times New Roman or Times.

  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 clean than serif fonts, so sometimes they are used for body text. Arial is the most common sans-serif font.

  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. Courier is a common monospace font.

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.

Font Size

The different types of measurement have different implications. There are two distinct kinds of units in CSS. Absolute measurements describe a particular size as in the real world. 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.5 em is half the normal size, and 3 em is three times the normal size. The term em is used to specify this measurement.

p {
font-size: 1.5em;
}

CSS List Styling Properties (ul, ol)

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

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

CSS Image Styling Properties

  • float

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.

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 of block elements - h1, p, div, li

  2. An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements - 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.

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive