CSS: Making Webpages Attractive

I previously wrote a blog that barely skimmed the surface of HTML and now I would like to attempt another blog at what really gives HTML it's appearance that you see on the web today: CSS. CSS stands for Cascading Style Sheets. The styles of CSS define how to display HTML elements. Typically CSS files are saved as a seperate style sheet that is linked with an HTML file. One of the major benefits of using CSS to style your HTML files is that by updating a CSS stylesheet this update can affect the appearance/layout on all of the pages that make up a site, making CSS a huge time saver!

There are two basic parts to CSS syntax: Selectors and declarations. The selector typically is the HTML element you want to style, so for example if you remember from the HTML blog we could use CSS to set the appearance of a paragaph element <p> with <p> being the selector. Each declaration for a selector has two parts, a property and a value. Here is an example of a declaration: color:blue;. Color is the 'property' and blue is the 'value'. Typically when someone is writing code for a CSS stylesheet they write each declaration on a separate line, resulting in the following appearance:

p
{
color:blue;
text-align:center;
}

These selectors and declarations can be broken down a little more due to the fact CSS actually lets you specify your own selectors. Id selectors are used to specify a style for a single, unique element, and denoted by a "#". For example:

#topText
{
text-align:center;
color:red;
}

There are also class selectors, which are used to style a group of elements. Class selectors allow you to set a particular style for many HTML elements with the same class, and is denoted with a "." For example:

.center {text-align:center;}

There are three ways to insert CSS into your HTML code. The three ways are by using external style sheets, internal style sheets, and inline styles. External style sheets are best used when there are numerous pages for a website that are styled. External style sheets utilize the <link> tag to link to an external style sheet (an external style sheet is saved as a file with a .css file format). Internal style sheets utilize the <style> tag and are primarily used when an individual web page has a unique style. Inline styles are advised to only use sparingly. I recommend you to read up more on stylesheets as I have just covered the very basics here.

In conclusion, CSS makes your websites sexy! CSS is a huge time saver and when done properly can save a web designer/developer a ton of time when it comes to adding styles to text, paragraphs, background colors, etc. There are tons of tutorials out there on CSS and I encourage you to check them out for futher details!