CSS Basics Tutorial: Part 1

CSS lets you control all the elements of your document’s appearance – fonts, text, colors, backgrounds, sizes, borders, spacing,positioning, visual effects, tables, and lists. However, the real power of using CSS for styles is that you can change the appearance of every page on your Web site by changing only a few lines of CSS code.

I am going to cover important and informative concepts that will help you to understand CSS basics in the Part 1 and Part 2 of the tutorial.

1. The Basic CSS Selectors

CSS works by defining the styles of the elements on a Web page using CSS rules. Rules are applied using selectors, which come in three basic varieties.

  • HTML Selectors: These are used to reference a specific tag.
  • Class Selectors: These are applied individually to elements.
  • ID Selector: These are applied to a single element on the page.

Following information will help you to understand the concept of CSS basic selectors.

FormatSelector NameWhat Elements Are Styled
aHTMLAll specified HTML tags
.myClassClassAny HTML tag where class is applied
a.myClassDependent ClassSpecified HTML tag where class is applied
#myIDIDAny HTML tag where ID applied
a#myIDDependent IDSpecified HTML tag where ID is applied
*UniversalAll HTML tags

2. Inline: Adding Styles to an HTML Tag

Adding Styles to an HTML Tag

Although using CSS means you do not have to set the appearance of each tag individually, you still have the freedom to set a style within an individual tag, which is referred to as an inline style

An Example to set the style properties of individual HTMl tags

1. Add the style property to the HTML tag. Type style= in the HTML tag to which you want to apply styles.

<h1 style=

2. Add your CSS declarations in a comma-separated list. In quotes, type your style declarations in the format property: value, using a semicolon (;) and separating individual declarations. Be sure to close the declaration list with quotation marks.

"font:italic bold small-caps 3em/.9 Constantia, Georgia, Times, 'Times New Roman', Serif; color:red"

3. Finish your HTML tag and add content. After closing the tag, add the content to be styled. Then close the tag pair with the corresponding end tag.

>TutorialChip</h1>

Full Example

<!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>CSS Basic Selectors</title>
</head>

<body>

<h1 style="font:italic bold small-caps 3em/.9 Constantia, Georgia, Times, 'Times New Roman', Serif; color:red">TutorialChip</h1>

</body>
</html>

Avoid Using Inline Styles in the Final Web Site

Inline styles are the last line of styling, you cannot override them using embedded or external style sheets. As a result, you are either stuck with this style permanently or you have to change it manually, which may not always be possible. If you are working on a large scale Web site, the HTML code is often set independently of the styles, and designers may not be able to access that code or easily change it.

3. Embedded: Adding Styles to a Web Page

To add styles that apply to a single Web page, rather than just a single element (inline) or an entire Web site (external), you embed the <style> rules in the Web page using the style tag, which in turn will hold all your style rules.

Adding Styles to a Web Page

Let set the style for tags in an HTMl document:

1. Type the opening style tag in the head of your document

<style type="text/css" media="all">...</style>

2. Add your CSS rules.

h1 {...}
h2 {...}

Full Example

<!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>CSS Basic Selectors</title>
<style type="text/css" media="all">
h1 {
  color:#30F;
}
h2 {
  font-size: 18px;
  color:#F00;
}
</style>
</head>

<body>

<h1>TutorialChip</h1>
<h2>Web Development and Designing Tutorials</h1>

</body>
</html>

4. External: Adding Styles to a Web Site

A major benefit of CSS is that you can create a style sheet once and use it either in a single Web page or throughout your entire Web site. To do this, you create an external CSS file separate from the HTML document that contains only CSS code – no HTML, JavaScript, or any other code.

The first step in using an external style sheet globally on a Web site is to create the external file that contains all the CSS code.

Let Set Up an External CSS File

1. Create a new text file: You can use a text editor or Web-editing software. Save the file using the .css extension. For example, default.css.

2. Import CSS files: This is optional, but you can create as many external style sheets as you want and import style sheets into each other to combine their styles. However, if an import rule is included in an external style sheet, it must be placed before all other CSS code.

@import{default.css}

3. Add your CSS rules to the text file:

body { padding: 200px 0 0 175px; }

4. Connect this file to your Web pages by using one of the following method.

Link: Use the <link> tag to connect external CSS files to an HTML file.

Link Stylesheet

Import: Use @import to connect external CSS files to an HTML file.

Import Style Sheet

Full Example: default.css

@charset "utf-8";
/* CSS Document */

body {
	font-size: 12px;
	background-color:#36F;
}

h1 {
	color:#FFF;
}

p {
	font:Verdana, Geneva, sans-serif;
}

Full Example:

<!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>CSS Basic Selectors</title>
<link rel="stylesheet" href="default.css" type="text/css" media="all" />
</head>

<body>

<h1>TutorialChip</h1>
<p>Web Development and Designing Tutorials</p>

</body>
</html>

You may also be interested to learn the following important CSS concepts in Part 2,

  1. Re-Defining HTML Tags
  2. Reusable Classes
  3. Defining Unique IDs
  4. Universal Styles

One thought

Comments are closed.