CSS Tutorial – a Beginner’s CSS Guide Part 1

arp14 CSS, Tutorial Tags: , , 2

This CSS tutorial is for all beginners. In this Tutorial you’ll learn CSS syntax, notations, fonts, background, block, box, border, positioning, extensions.

CSS Tutorial - a Beginner's CSS Guide Part 1

What is CSS?

CSS – Cascading Style Sheets is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup languagemore on Wikipedia

CSS Mimetype & File Extension

Mime type for css is “text/css” and extension is “.css“.

Select your text editor

Before we start, choose your favorite text editor. For windows users, I recommend notepad++ or Komodo Edit. Mac users can try BBEdit or textmate

Requirements

CSS style up web pages. So to learn CSS, you must have a minimum knowledge of HTML.

If you don’t know HTML you should see this HTML tutorial Before start with CSS.

In a HTML document, we can use three methods for styling.

  1. External style sheet
  2. Internal style
  3. Inline style

CSS Specificity is respectively lower to higher.

External style sheet

An external style sheet should be linked like this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="FileName.css" />
</head>
<html>

Then all styling rules goes to the “FileName.css”.

Internal stylesheet

And a internal stylesheet should be like this:

<html>
<head>
<style>
<!-- Here will be all styling rules. -->
</style>
</head>
<html>

Inline stylesheet

And the last one, a inline stylesheet should be like this:

    <span style="color: #00f; background: #ebebeb;"> Here is some text ... </span>

CSS Syntax

Syntax for creating new rules in CSS is very simple. It has two parts, selector and declaration. The selector is the HTML element you want to style-up. In declaration, the property is the style attribute and value is up to you.

selector{property: value;}
<strong><span style="text-decoration: underline;">example:</span></strong> 
<em>selector declaration declaration</em>
<strong> H1 {color: blue; background: lime;}</strong>
<em> property value property value </em>

There are many ways for styling a web page. Line breaks and white spaces does not matter in CSS. You can choose any of these style from below to write your code – but I prefer the last one:

   H1 {color: blue; background: lime;}

                   or,
   H1
   {
       color: blue;
       background: lime;
   }

                   or,
    H1 {
        color: blue; 
        background: lime;
    }

CSS Notations

You can choose any of the notations to write rules like below. The first one is a shorthand notation and second one is a regular notation.

    h1 {font: 2em arial red;}
                  or,
    h1 {font-family: arial; font-size: 2em; color: red;}

When using the shorthand version of certain CSS properties like margin, padding, and border, you must put the rule in this particular order : top right bottom left – in clockwise direction. But if you leave off certain numbers you can have more control:

margin: 0px;
defines all margins as 0px.

padding: 10px 5px;
defines the top and bottom padding as 10px each and the right and left padding as 5px each.

border-width: 1px 5px 2px;
defines the top border as 1px, the right and left border as 5px and the bottom border as 2px.

margin: 1px 10px 5px 3px;
the standard usage, defining the top as 1px, the right as 10px, the bottom as 5px, 
and the left as 3px.

CSS Fonts

You can set font family, color, style, etc. using the “font” property. Example:

 body{font-family: tahoma;}

for choosing multiple font at once,

body{font-family: tahoma, arial, serif;}

This code CSS above means that if tahoma is not available on users machine, then pick arial, – if arial is also not available, then pick any of serif fonts available on users machine. If a font name contains any single white space, then font name must be declared within quotes. Example:

body{font-family: tahoma, arial, "Comic Sans MS";}

Tips: Choose font that is available to all devices / all platforms.

Font-size

Font size measured in px, pt, in, cm, mm, pc, em, ex, % (Note: px, pt, in, cm, mm are fixed sizes where em, % are relational sizes. EM means width of a ‘M‘ of current font size. This is the most standard unit.)

Font-weight

Values are normal, bold, bolder, 100-900.

Font-style

Values are normal, italic, oblique.

Font-variant

Values are normal, small-caps.

Line-height

Values are normal, value-*size*.

Text-transformation

Values are capitalize, uppercase, lowercase, none.

Text-decoration

Values are underline, overline, line-through, blink, none.

Color

Values are *color name*, #hex(6digits), #hex(3digits)*, RGB(xxx, xxx, xxx). * Hex 3 digit values are short from of hex hex 6 digit color values. If a color has value #cccccc on hex 6 then it will be #ccc on hex 3… see more on w3school

Shorthand font selector{font: style, variant, weight, size, line-height, family}

CSS Backgrounds

background-color: Values are *same as color values above*
background-image: Values are none, url(path/to/the_image.jpg).
background-repeat: Values are no-repeat, repeat, repeat-x, repeat-y.
background-attachment: Values are fixed, scroll.
background-position(x): Values are left, center, right, *value*.
background-position(y): Values are top, center, bottom, *value*.

CSS Blocks

word-spacing: Values are normal, *value*.
letter-spacing: Values are normal, *value*.
vertical-align: Values are baseline, sub, super, top, text-top, middle, bottom, text-bottom, *value*.
text-indent: Values is *value*.
white-space: Values are normal, pre, nowrap.
display: Values are block, inline, list-item, run-in, inline-block, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-coulmn-group, table-coulmn, table-cell, table-caption, inherit, none.
white-space: Values are normal, pre, nowrap.

CSS Boxes

width: Values are auto, normal.
height: Values are auto, normal.
float: Values are left, right, none.
clear: Values are left, right, both, none.
margin: Values are *value*.
margin-top/right/bottom/left: Values are *value*.
padding: Values are *value*.
padding-top/right/bottom/left: Values are *value*.

Element Border

border-top/right/bottom/left-width: Values are *value*.
border-top/right/bottom/left-style: Values are dotted, dashed, solid, double, groove, ridge, inset, outset, none.
border-top/right/bottom/left-color: Values are *same as font colors above*.
border: Values are *value* *style* *color*. This is a shorthand for borders.

Element Positioning

position: Values are absolute, fixed, relative, static.
visibility: Values are inherit, visible, hidden.
z-index: Values are auto, *value*.
height: Values are auto, *value*.
overflow: Values are visible, hidden, scroll, auto.
top: Values are *value*.
right: Values are *value*.
bottom: Values are *value*.
left: Values are *value*.
clip: Values are rect(*value*/auto, *value*/auto, *value*/auto, *value*/auto).

Extensions

page-break-before: Values are auto, always, left, right.
page-break-after: Values are auto, always, left, right.
cursor: Values are crosshair, text, wait, default, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, auto.
filter: Values are Chroma(color=?), Blend-trans(Duration=?), FlipH, FlipV, Alph(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?), Blur(Add=? Direction=?, Strength=?), Gray, Invert, DropShadow(color=?, OffX=?, OffY=?, Possitive=?), Mask(Color=?), RevealTrans(Duration=?, Transition=?), Shadow(Color=?, Direction=?), Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?), Light, Xray, Glow(Color=?, Strength=?).

See more on “Learn CSS Online – Advance in Details Part 2”

Having problems? Need help? Just comment below – Thank you !

2 thoughts on “CSS Tutorial – a Beginner’s CSS Guide Part 1

    1. Extension of an external css file is “.css” (without quotes).

      If you like to add some style to your page via an external style sheet file just add a “link” tag within your head tag of your document – as below:

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

      Now put all your css style codes in style.css fille.

      External stylesheet is for separation of style and structure.

Leave a Reply

Note: Your email address will not be published. Required fields are marked *