This is a brief tutorial to help CSS newbies get the ‘hang’ of CSS in no time. In this tutorial, (I wouldn’t call it a tutorial, just a hand-book) I will briefly explain some basic stuff in CSS and what they do.
CSS is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS simplifies Web authoring and site maintenance.
There are three ways of attaching a CSS file to your web page:
– Inline Styles
– Internal Style Sheet
– External Style Sheet
In using external style sheets, you can link to the file externally by placing this in the head section of every (X)HTML file you want to style with the CSS file.
<link type = “text.css” rel = “stylesheet” href=”path_to_stylesheet.css”
you can also use the @import method, e.g.
<style type=”text/css”>@import url(path_to_stylesheet.css)</style>
To demonstrate, this is how the code looks like:
<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head>
<body>
CSS Syntax
I covered this in my last post about css, but for repetition sake, a CSS rule has two main parts: a selector, and one or more declarations:
1. Selectors: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. Example:
p {
color:red;
text-align:center;
}
body {
background: #eeeeee;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}
2. Comments: Comments can be used to explain why you added certain selectors within
your css file. Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
Example:
/*This is a comment*/
3. ID and class Selectors: The class selector allows you to style items within the same (X)HTML
element differently. You can use the same class selector again and again within an (X)HTML file. The class selector is most often used on several elements. The class selector uses the HTML class attribute, and is defined with a “.”
Example:
<p>
This <span class=”blueboldtext”>CSS thingy </span> you are reading is not as hard as you think. Seriously!
</p>
Then in the .css file, it will be
.blueboldtext{
font-size: small;
color: blue;
font-weight: bold;
}
translated to: “This CSS thingy you are reading is not as hard as you think. Seriously!”
The ID selector, on the other hand, is used to specify a style for a single, unique element. It uses the id attribute of the HTML element, and is defined with a “#”. IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file.
4. Divisions: Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. A division creates a linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.
You define a division within an (X)HTML file by placing the following between the <body></body> tags:
<div> Site contents go here </div> or, with style,
<div id=”container”> Site contents go here </div>
And in the CSS file,
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
And everything within that division will be styled by the “container” style rule.
I’m going to stop here. For the past 4 months, I have been working on CSS codes with this blog, and learning from Siteground’s css video tutorials. No designer should say he doesn’t know a thing about css, because in the next 1-2 years, css will be the only living and working code alive! (let’s bet!) The only conclusion I’ve come to is that css is a powerful tool that will turn your designer instincts around. In compiling this brief css overview, I had help from w3c’s site and cssbasics.com. Don’t take my word for it; like they say, ‘a trial will convince you’.
Next thing I know, you will be the one writing the next CSS tutorial.
Z
Comments are closed.