The presentation, style, and design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their web-sites and take them to the next level. In order to know how CSS works you need to have a solid understanding of HTML standards and elements. In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of.
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
First let’s learn some important facts about CSS:
- CSS is used to separate design from content. It is good for presentation, usability, accessibility, and formatting.
- CSS is composed of statements for specific elements, classes, Ids, or images.
- CSS specify in English the names of each element and its properties.
- The specification of each element is called a rule or a declaration.
- With the help of CSS you can stylize every element in your HTML page.
- You can add as many CSS as you like, but is better to maintain a single main sheet.
- You can use and add different CSS for specific tasks; for example, you can create a specific CSS if the viewer wants to print the website.
Now let’s see how the basic syntax of CSS looks like:
Image may be NSFW.
Clik here to view.
First we need to specify which element we want to style, in this case h1.
Second, we need to add braces {}.
Inside the braces we put what property or properties we want to add to our element. I wanted to add color to my headings, so I wrote color and give it a gray value of #333.
After each property remember to add a semicolon (;).
Here is another example:
Image may be NSFW.
Clik here to view.
As you can see, each rule/declaration always contains a property and a value. It allows you to add as many properties and values as you like.
Let’s take a look at a basic HTML page and how I stylized each element using a Cascading Style Sheet:
<!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>Fundamentals of CSS Syntax</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header"> <!-- end .header --></div> <div class="container"> <div class="content"> <h1>Fundamentals of CSS Syntax</h1> <p>The presentation, style, design of a web site is accomplished by using Cascading Style Sheets (CSS). CSS helps web developers and web designers to control the layout of their web-sites and take them to the next level. In order to know how CSS work you need to have a solid understanding of HTML standards and elements. In this CSS tutorial you will learn the fundamentals of CSS and what its syntax consists of. </p> <br /> <!-- end .content --></div> <!-- end .container --></div> <div class="footer"> <p>This tutorial is provided in part by <a href="http://www.serverintellect.com/" title="Server Intellect" target="_blank">Server Intellect</a> Web Hosting Solutions. <br /> Visit <a href="http://cssatoms.com/" title="www.cssatoms.com" target="_blank">www.cssatoms.com</a> for more CSS tutorials.</p> <!-- end .footer --></div> </body> </html>
@charset "utf-8"; /* This tutorial is provided in part by Server Intellect Web Hosting Solutions (www.serverintellect.com. Visit www.cssatoms.com for more CSS Tutorials. */ body { margin: 0; padding: 0; color: #000; background-color: #FFF; font-family: Tahoma, Geneva, sans-serif; font-size: 80%; line-height: 1.4; } h1 { color: #333; font-family: Arial, Helvetica, sans-serif; padding-top: 20px; text-align: center; } p { margin-top: 0; padding-right: 15px; padding-left: 15px; } a:link { color: #42413C; text-decoration: underline; } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .header { background-image: url(images/HeaderBg.jpg); background-repeat: repeat-x; height: 121px; } .container { width: 960px; background: #FFF; margin: 0 auto; } .content { padding: 10px 0; } .footer { background-image: url(images/FooterBg.jpg); background-repeat: repeat-x; height: 101px; padding-top: 30px; padding-right: 0; padding-left: 0; text-align: center; color: #666; }
That’s all readers! Practice by styling more elements and you will see that is not that hard as it looks. If you know HTML you know CSS. Best of luck!
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!