Basic CSS for the Absolute Beginners
Beginning to learn CSS is never to late, you may have noticed that most websites today are CSS-based, you too could create one in no time, just stick with me you will surely learn a thing or two on creating a website that you can be truly proud of.
After the discussion about the use of CSS and HTML tag in A Tiny Signs’ CSS and (X)HTML Introduction, we go into the basic of CSS.
This tutorial is for novice, those who have not used CSS with HTML and do not know how to create one. Although this is for beginners, advance CSS programmers are also welcome to read as they might also give some insights about the topic.
Adding CSS to your HTML document
There are different ways of adding CSS to your HTML but using the <link> tag is always a best practice. The <link> tag is used to connect one document to another, which can also be used with CSS as external style sheets, like:
<link href=”tiny-signs.css” rel=”stylesheet” type=”text/css” />
This merely tells the HTML document to use the file tiny-signs.css for the CSS information. Calling the CSS document reference in this way is called external style sheets. This tag must be placed inside the <HEAD> element of your HTML document.
The href attribute declares the URL of the style sheet file to be attached to your document. The rel attribute, describes the sort of relationship the linked file to the HTML file calling it. With CSS style sheets, the value will always be stylesheet. The type attribute, should always be text/css for CSS style sheets. The tiny-signs.css created could have the following codes:
/* CSS Document */
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
With the use of the <link> tag, you are able to declare multiple CSS documents. The most common use of creating multiple CSS documents is to separate different media types for style sheets which is a good practice if I may add. This provides specific styles to appropriate media types.
Another way of adding CSS to a HTML document is embedding it to the HTML itself or internal style sheet. Although this seems convenient at first, the embedded CSS is not reusable, so other pages cannot use the same style you used on the HTML with embedded CSS in it. If you want to use internal style sheet in the HTML document, you just have to put the code inside the <HEAD> element just like the previous one. Here is an example:
<style type=”text/css”>
<!–
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
–>
</style>
This may be best used when doing a special page wherein the styles would not be used by other HTML documents in your website.
Lastly, the inline style sheet works similarly to font in that they appear with the markup they affect.
<h1 style=” font-size: 150%; “>Page Title</h1>
<h2 style=” font-size: 120%; “>Header 2</h2>
<p style=”font-family: Verdana, Arial, Helvetica, san-serif;“>Hello, Philippines and Hello, World!</p>
This is used when there is only one specific element to style. You do not want to add it to your inline or external CSS since it is not needed by any other element in your website.
Different Media Types for style sheets
Here are some of the media types that appear on the CSS 2.1 Specification:
- all - used for all media types
- aural - applies styles when listening to the document with a screen reader or similar audio-rendering device
- braille - used for Braille presenting the document with a Braille device
- embossed - used for printing the document with a Braille device
- handheld - used for handheld devices such as PDAs and smartphones
- print - used for printers and print preview
- projection - used for projected presentations such as a digital projector
- screen - used for color monitors
- tty - used for displaying the document in a fixed-character width such as teletypes and terminals
- tv - applies styles when the document is being presented on a television-style screen
For an external style sheet, you just need to add media=”[media-type]” for each specific CSS file to be used for the selected media type. Here is an example:
<link href=”tiny-signs-screen.css” rel=”stylesheet” type=”text/css” media=”screen”/>
<link href=”tiny-signs-print.css” rel=”stylesheet” type=”text/css” media=”print”/>
For an inline style sheet, you have to specify the media type using the @media rule followed by the media-type, like the following:
<style type=”text/css”>
<!–
@media print {
body { font: 12pt tahoma }
}
@media screen {
body { font: 12pt verdana }
}
@media projection {
body { font-size: 16pt }
}
@media screen, print, projection {
body { line-height: 120% }
}
Alternate style sheets
Alternate style sheets works similarly to the media type style sheets but Instead of creating styles for media-types, you’re providing users with multiple choices of styles for the screen. Furthermore, this technique doesn’t require using JavaScript. This does not work on all modern browsers (know to work with Mozilla, Firefox, and recent versions of Netscape though), on Firefox View > Page style > [style title].
All you have to do is make a copy of your default style sheet and rename it. Make the changes to the style sheet and add the link element with a title such as this:
<link href=”tiny-signs-style1.css” rel=”stylesheet” type=”text/css” title=”default”/>
<link href=” tiny-signs-style2.css” rel=”stylesheet” type=”text/css” title=”Black Background” />
<link href=” tiny-signs-style3.css” rel=”stylesheet” type=”text/css” title=”Red Background” />
Here are the sample styles for the external styles:
tiny-signs-style1.css
/* Default */
body {
background-color: #EFEFEF;
}
tiny-signs-style2.css
/* Black */
body {
background-color: #000000;
}
tiny-signs-style3.css
/* Default */
body {
background-color: #FF0000;
}
There you go with the first part of learning CSS. So far you have learned the different ways of adding CSS to a HTML Document - external, internal, and inline style sheets, different media types that could be used for various media available, and alternate style sheets which gives you the ability to switch style sheets without Javascipt.
April 29th, 2007 at 6:19 am
Good stuff! Keep up the great work!