Introduction to CSS

Content of the lesson:

Development and Principles of CSS

CSS (Cascading Style Sheets) is a technology for defining the appearance of a webpage. It was created in 1996 when developers needed to separate the appearance and the content (structure). As we know, HTML is a technology for marking up any part of the document or for defining its structure. The HTML tags have simple meanings:

• this is a headline (which level) - h1, h2, ... tags
• this is a paragraph - p tag
• this is a link (and the destination) - a tag
• this is an image - img tag
• this is a table - table tag
• this is a highlighted text - em, strong tags
• this a list of items - ul, li or ol, li tags

The structure of a document is described using these tags. CSS has another task, it should describe the problem of appearance:

• how does a headline look like (which level) - tags h1, h2,... - size and type of font, which color, ...
• how does a paragraph look like - p tag
• how does a link look like - a tag
• how does an image look like - img tag
• how does a table look like - table tag
• how does a highlighted text look like - em, strong tags
• how does a list of items look like - ul, li tags

The file with CSS rules is being usually called a stylesheet. It is a simple text file which contains one or more rules which affects (using their properties and values) how any element of the page should be displayed (font type, font size, layout, position, print recommendations). Using CSS you can also define dynamic properties (appearing and disappearing of objects, drop-down lists, menus).

Nowadays there are different versions of CSS but the last relatively well supported one is CSS 2.1.

Styles are created away from a webpage (they can be written into it but they create an isolated group of rules) because they can be applied to many documents at once without the need to change every of it (for example an e-shop). If you set a rule to change a link color, it will be applied in every document which uses this stylesheet. This saves much time, the amount of transferred data and prevents you from making a mistake. You should create a proper structure of (X)HTML code to be able to apply a stylesheet.

Why can you save the amount of transferred data using a stylesheet? Imagine the following situation. You have a large website which contains many tables and you want every table to have a yellow background and the width of 100 %. You can insert this rule inside the html file using the <table bgcolor="yellow" width="100%"> command. You can also create a CSS rule table{background-color:yellow; width:100%;}. Imagine having 200 tables in your page - you would have to write this 200 times instead of once. Another advantage is that you will be able to change the appearance of all tables at once which is very effective.

Before starting to explain the CSS topic, we take a look at this website: http://www.csszengarden.com/. The CSS potential illustrated here is really huge (CSS styles can DRAMATICALLY change the whole web appearance - all you have to do is to click on the "select a design" item and all changes are done by changing one line of code - the link to a CSS file):

You should realize that the whole HTML code without using CSS styles looks like the following document:

You can view a plain HTML site using the View > Page Style > No Style option in Firefox.

CSS Rules

Every CSS rule can be divided to two parts:

• Selector – it sets which element should be formatted - you can format p or h1 element for example.
• Declaration – one of more declarations using predefined values which specify what should happen. For example a headline can have a property to be drawn in red using the Myriad font.

You can view the rules used by this page in this file: ivtstyly.css.

Writing Rules

Spaces, empty lines and tabs are ignored in a stylesheedt Every declaration should be divided by a semicolon (you do not have to add a semicolon after the last rule but in case you add another rule and forget to separate it, it will not be applied correctly). Every mistake (spelling, wrong value, ...) is ignored by the browser but it is difficult for you to find it.

Comments

You can use comments as well as in HTML, they are very useful to write your notes about the meaning of CSS rules. A comment should be written inside the /* */ marks.

Pay attention when writing comments because any user can view this file and read all your comments. Comments also enlarge the size of the CSS file.

Placement

The last thing you should know is where to define the stylesheet. You can use one of the following three possibilities:

• External file - separated file usually saved into css folder. It is inserted inside the head using one of the following lines:

  <link rel="stylesheet" href="css/název souboru se styly.css" type="text/css" />

  <link rel="stylesheet" href="název souboru se styly.css" type="text/css" />

• Head of document - CSS rules can be written directly inside the head of a document. You can use this way to add styles to an existing web structure (if you do not have access to the main css file for example). The background of the banner is predefined using this option on the GJŠ main page.

  <style type="text/css">div#banner{background-image:url(images/design/banner/34.jpg);}</style> 

• Inside the source code using the style attribute - the text of the following paragraph will be aligned to the right:

  <p style="text-align:right;"><a href="index.php"> Text v odstavci </a></p>

Individual Task

Try to find the CSS 2.1 specification or a later one.

Questions

1. What does CSS shortcut mean?
2. How can you use CSS?
3. What are the main advantages of CSS?
4. What is the main presumption for a proper CSS usage?
5. What can you achieve by using CSS styles?
6. How does a CSS rule look like?
7. Can you write a comment in CSS? How?
8. How can you place CSS rules inside a page?