bunch of code in one place

CSS tutorial - part 4: text

Posted by admin in css, Tutorial

Adding layout to text on webpage is very important and useful. Here are text properties that will help you layout and style text on your website.

• The ‘text-indent‘ property applys an indent to the first line of the paragraph.
  

  p {
    text-indent:20px;
  }

• The ‘text-align‘ property sets text alignment. You can align text to left, right, center or justify.
  

  h1 {
    text-align: center;
  }

• The ‘text-decoration‘ property sets different decorations to text. You can undeline it, have line trough or above it.
  

  p {
    text-decoration: line-through;
  }
  h1 {
    text-decoration: underline;
  }

• The ‘letter-spacing‘ property sets the space between text characters.
  

  p {
    letter-spacing: 2px;
  }

• The ‘text-transform‘ property defines the capitalization of a text. You can use capitalize (first letter of each word), uppercase (all letters), lowercase (all letters) or none (no transformation).
  

  h1 {
    text-transform: uppercase;
  }

Applying layout and style to text - checked.

CSS tutorial - part 3: fonts

Posted by admin in css, Tutorial

Let’s see how you can change font properties on your website.

• The ‘font-family‘ property sets the font. It’s recomended to use basic font families like: serif (Times New Roman, Garamond, Georgia), sans-serif (Trebuchet, Arial, Verdana) and monospace family (Curier, Curier New, Andele Mono).
  

  p {
    font-family: Arial, Verdana, sans-serif;
  }

  Paragraf will be displayed using the font ‘Arial’. If the font is not installed on user’s computer, ‘Verdana’ will be used instead. If both these fonts are unavaliable, a font from sans-serif family will be used.

• The ‘font-style‘ property defines the font apperance: normal, italic or oblique.
  

  p {
    font-style: italic;
  }

• The ‘font-variant‘ property defines variants of a font. By dafault it’s set to normal. You can also set it to small-caps, which uses smaller sized capitalized letters.
  

  p {
    font-variant: small-caps;
  }

• The ‘font-weight‘ property displays font normal or bold.
  

  p {
    font-weight: bold;
  }

• The ‘font-size‘ property sets the size of a font. You can use units like px (pixels), pt (points), % (percent) or em (width of the letter ‘M’).
  

  p {
    font-size: 20px;
  }

• There is also ‘font‘ property that can combine all previous font properties. The order of properties is: font-style font-variant font-weight font-size font-family. So in one line you can define:
  

  p {
    font: italic bold 20px Arial;
  }

Defining font properties is very important for websites, so now that part is covered. Now you can display fonts on your site in various ways.

CSS tutorial - part 2: colors and backgrounds

Posted by admin in css, Tutorial

If you don’t want your website to be black and white, here is how you can color it up.

• The ‘color‘ property sets the color of an element.
  

  p {
    color: #FF0000;
  }

• The ‘background-color‘ property sets the background color of an element.
  

  body {
    background-color: #FF0000;
  }

• The ‘background-image‘ property inserts a background image.
  

  body {
    background-image: url(”image.jpg”);
  }

• The ‘backgroung-repeat‘ property controls background image behaviour.
  There are four different values:
  • background-repeat: repeat-x; - the image is repeated horizontally
  • background-repeat: repeat-y; - the image is repeated vertically
  • background-repeat: repeat; - the image is repeated both horizontally and vertically
  • background-repeat: no-repeat; - the image is not repeated

  For example I want image to apear only once:

  body {
    background-repeat: no-repeat;
  }

• The ‘background-attachment‘ property defines whether a background picture is fixed or scrolls along with the containing element.
  There are two different values:
  • background-attachment: scroll; - the image scrolls with the page - unlocked
  • background-attachment: fixed; - the image is fixed on one place - locked

  body {
    background-attachment: fixed;
  }

• The ‘background-position‘ property defines the background image position on the screen. By default it’s set to top left corner. The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The code looks like this:
  

  body {
    background-position: right bottom;
  }

• There is also ‘background‘ property that can combine all previous background elements. So you get only one line of code which makes it easier to read. The order of properties is: background-color background-image background-repeat background-attachment background-position. If the property is not set, the default property is used.
  

  body {
    background: #FF0000 url(”image.jpg”) no-repeat fixed right bottom;
  }

So now you can colorize your website. There is so much more that you can do with CSS, basicaly everything!

CSS tutorial - part 1: basics

Posted by admin in css, Tutorial

CSS (Cascading Style Sheets) is a style language that defines layout of HTML documents. With CSS you can assign properties to HTML elements like fonts, size, colors, margins, paddings, height, width, images, backgrounds and more. HTML is used to structure content. CSS is used for formatting structured content.

Here is an example for assigning body background color in HTML code:

<body bgcolor=”#FF0000″>

And the same in CSS code:

body {backgroung-color: #FF0000;}

So why should you even use CSS if you can do just the same in HTML? Imagine you have 20 HTML pages and you decide to change body backgroung color. You can make the change 20 times on each HTML page or just one in CSS file. I choose CSS!

The fundamendal CSS model looks like this:

selector {property: value;}

How to apply CSS to HTML?
There are three ways:

• In-line.
  

  <body style=”backgroung-color: #FF0000;”>

• Internal. The code is inserted between <head> tags.
  

  <style type=”text/css”>
  body {background-color: #FF0000;}
  </style>

• External. You create CSS file containing CSS attributes and link it to the HTML document. The code is inserted between <head> tags.
  

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

I recommend applying external style sheet file as one change in it affects all HTML documents.