CSS stands for Cascading Style Sheets, is a style sheet language used to improve or format the look and feel of a markup document or website. It is mainly used to format web pages by adding style using different fonts, colors etc. The basic rule while designing a web page should be to use html for the content and CSS for presentation. Like HTML, CSS is also a very simple and easy to learn language.
There are two ways of using a css code within a markup document, direct and indirect usage. In the direct implementation method the css code can be used within the document for example,
<style type="text/css">
CSS codes can be inserted here.
</style>
This code can be inserted between the <head> tab of an html document.
In the indirect implementation approach, the css is written on a separate style sheet and calling it through the html document. For example
The HTML document:
<html>
<head>
<link rel =”stylesheet”
type=”text/css”
href=”test.css” /> indirectly calling the CSS test.css
</head>
</html>
The test CSS is separate,
#brighthub {
color:#006699;
font-size:15px;
font-weight:bold;
}
Here the actual styling elements are held between the curly braces ({}).
Some of the basic useful CSS properties are listed below,
Color Properties: It is used to specify the text and background color and is used in the hexadecimal color codes.
Black – #000000
Red – #FF0000
Blue – #0000FF
Image Properties: It is used to insert an image in to the markup document.
Background image: url (location of the image)
Background position: vertical (top, center, bottom) horizontal (left, right, center)
Background Attachment: scroll or fixed
Font Properties: It is used to define differ font styles that can be used within a document.
It uses the syntax, font: style weight size family;
Where,
Font-family: times, arial, serifs; etc.
Font Style: Italic;
Font weight: bold, light, 100-900;
Font size: size;
Text Properties: It is used to define the text property used within the document.
Text-align: right, left, center.
Text-Decoration: none or underline
Text-Transform- capitalize;
Border Properties: Used to style the document border.
Border Width: thin, medium, thick
Border style: none, hidden, dotted, dashed, groove etc
Border color: color
List Properties: It helps to set different list item markers for ordered and unordered lists,
The syntax is, ul { type position image}
List-style-type: none, disc, circle, square etc.
List- style-position: inside or outside
List- style-image: url (location of the image)
The above examples are just tip of the iceberg, for those of who are interested in knowing and learning the language there will be more articles on CSS. In the meantime use the list of sites below in order to gain more knowledge about the language. It is essential that you practice practice and more practice in order to gain a full grasp of the language. Here are the sites:
www.w3schools.com/css
www.csstutorial.net
www.html.net/tutorials/css
www.tizag.com/cssT
The knowledge of CSS together with a markup language is essential in order to create and design a web page. It’s not just content that attracts visitors to your web site, the look and feel of the web page also matters equally. What do you think?