Loading ...
CSS Tutorial
Main principles and mechanisms of work with the style sheets are considered in this guide to CSS. We’ll touch upon the most popular questions about CSS templates and their usage. Each point will be considered separately and comprehensibly in this CSS manual.
CSS tutorial – advantages
CSS saves time
Many of us learn HTML from the issue on how to set the size, color, style, font face etc. when they occur on a page. That means we’re constantly typing/copying/pasting one and the same thing all over again.
Many of us learn HTML from the issue on how to set the size, color, style, font face etc. when they occur on a page. That means we’re constantly typing/copying/pasting one and the same thing all over again.
CSS help consists in specifying these details one time for every element separately. CSS templates automatically apply the chosen styles for the elements whenever they appear.
With CSS you get faster pages
Less code means faster download times.
Less code means faster download times.
CSS Maintenance
To change element style, you just need to make an edit once.
To change element style, you just need to make an edit once.
Superior styles to HTML
With CSS templates, you control your web pages layout much better. You can specify exactly how big a font will be, where an element will be placed, what the page will look like when printed, and much more.
With CSS templates, you control your web pages layout much better. You can specify exactly how big a font will be, where an element will be placed, what the page will look like when printed, and much more.
CSS tutorial – disadvantages
Browser compatibility
CSS templates don’t support cross-browser ability in full. Fortunately, recent browser versions are more compliant than before. So, according to our CSS manual, this disadvantage is almost eliminated with the new browser versions.
CSS templates don’t support cross-browser ability in full. Fortunately, recent browser versions are more compliant than before. So, according to our CSS manual, this disadvantage is almost eliminated with the new browser versions.
CSS coding
CSS help for selectors and declarationsYou code CSS following a set of rules. A rule can be as follows: H1 { color: blue } This means that during CSS coding all text surrounded by <H1></H1> will be blue. Rules consist of selectors and declarations. In this example H1 is the selector, the rest is the declaration and consists of a property (color), and a value (blue). Any HTML tag can be used as a selector.
CSS classes and ID’s
With CSS coding you can make up your own classes. That is a possibility to apply different formatting depending on their class for a given HTML tag.
CSS media types
You can specify a certain style sheet for different media types. The names of the different media types are:
- all
- aural
- braille
- embossed
- handheld
- projection
- screen
- tty (for media using a fixed-pitch character grid)
- tv
Your code must always be commented. Our guide to CSS explains the way to make comments within a style sheet by using /* at the start of the first line, and */ at the end. Example: /* this is a comment */
CSS guide for implementing
Following our guide to CSS, there are 4 ways of implementing CSS.Inline
You apply style sheet information to the current element. Instead of specifying the style once, then applying it against all instances of an element (say the <P> tag), you only apply the style to the instance you want the style to apply to. For example: <p style=”color:#ff9900″>CSS tutorial.</p>
Embedded
You embed CSS information into an HTML document using the ’style’ element. You do this by embedding the CSS information within tags in the head of your document. Please follow this CSS guide carefully not to miss a thing.
For example, place the following code between the <head>…</head> tags of your HTML document:
<style type=”text/css” media=screen>
p {color:#ff9900;}
</style>
So, no matter when any of those elements are used within the document body, they will be formatted as instructed in the above style sheet.External Style Sheets
CSS help for external style sheets: An external style sheet is a separate file that you can declare all the styles you want to use throughout your website in. Then you link to the external style sheet from all your HTML pages. Our CSS help guide tells, this means you only need to set the styles for each element only one time. If you want to update the style of your website, you only need to do it once.
For example:
Type the following into a plain text file, and save with
a .css extension (i.e. external_style_sheet.css)
.p {font-family: georgia, serif; font-size: x-small;}
hr {color: #000000; height: 1px }
Add the following between the <head>…</head> tags of all HTML documents that you want to reference the external style sheet.
.p {font-family: georgia, serif; font-size: x-small;}
hr {color: #000000; height: 1px }
<link rel=”stylesheet” href=”external_style_sheet.css” type=”text/css”>
Importing Style Sheets
Use the @import rule to import rules from other style sheets. Add either of the following between the <head>…</head> tags of all HTML documents that you want to import a style sheet into.
@import “imported_style_sheet.css”;
@import url(”imported_style_sheet.css”);
@import construction is to be the first one in the style list. Otherwise, many browsers will just ignore it. It works correctly in all browsers, except all the versions of IE.
@import url(”imported_style_sheet.css”);
CSS manual – exercise
In this section of guide to CSS, we will create two files; an HTML file, and a CSS file. We’ll then link them together.
Create an HTML document using the code below, and save it as ‘cooltafe.html’:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum</title>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra suscipit porttitor.</p>
</body>
</html>
Note: TAFE college is a way cool learning institution…;)
Create a new file called, ‘csstalk.css’ and type the following:
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333333;
}
h1{
font-family:Georgia, "Times New Roman", Times, serif;
color:#006699;
}
.box{
width:100px;
background:#FFFFFF;
padding:10px;
margin:10px 0px 15px 0px;
}
</style>
Finally, add the following line of code between the </title> tags and </head> tags in the HTML file.
<link rel="stylesheet" type="text/css" href="style.css">
Summary
Those hints for CSS help cover almost all aspects of the CSS manual. Now you already know that CSS stands for Cascading Style Sheets and we use it for applying styles to web pages. You have learnt what CSS templates and CSS coding are, you know about implementing CSS with the “inline”, “embedded”, and “external” methods. And we finished this guide to CSS with creating an example using the “external” method.
CSS guide for the next steps
Of cause, there’s much more for you to learn about CSS templates, much more in different CSS guide to read and much more to study from another CSS manual than what we covered here. However, we dropped light on the general aspects of CSS coding, provided you some information on CSS help and tried to make this guide to CSS short and simple to use and remember.
No comments yet.
RSS feed for comments on this post.
Leave a comment