CSS Explained in Layman's Terms

CSS Explained

Whether you're a simple HTML coder or an advanced backend coder that provides dynamic web pages, you need CSS. Cascading Style Sheets (CSS) provide these web pages with a look and feel for the web page that displays to the user. In general, CSS files are the layout and design for a web page. From the placement of images and text to the font size and background color, CSS controls the way these HTML elements display in a browser.

What is CSS?

You know that CSS files contain styles in a web page, but what are web element styles and how do they fit in with HTML? CSS is designed to solve a problem of styling.

When HTML and websites began to be more public in the 1990s, old style web pages used HTML to change the font size and color, the background of a page, or display images. HTML was never intended to format pages, but technology evolved and developers needed a way to make HTML pages prettier. Not only did developers need a way to style pages, but they also needed a way to make code cleaner and dynamic. After initial versions of HTML, newer versions introduced styling elements such as the paragraph element or the font element . These elements formatted text a bit for better layouts.

As HTML became more advanced, these elements began to grow and create bulky, hard-to-read code that wasn't easily managed. When a company decided to change its website styling, developers had to go from page to page to change the style HTML tags. You can imagine how time consuming and difficult this can be when you have thousands or even just a few dozen pages.

The answer to the impending code problem was CSS styling. CSS files allowed coders to create style classes and dynamic layouts. These styles are stored in one file, and they can be applied to all pages. One CSS file can provide styles and layouts for thousands of pages.

Why Use CSS?

CSS solves many of the styling problems coders faced in the early days of HTML. CSS has become much more advanced, but initially CSS made life easier for website designers.

There are three main advantages of using CSS.

You can stop using duplicate HTML tags and repetitive HTML code.

Changing styles and redesigning pages is much more efficient since you only need to change these styles in one file instead of all your HTML files.

Maintaining changes are easier since you have one style file instead of multiple

Imagine you have 10 files for your web pages. You only use HTML tags and no CSS. When you want to make changes to your fonts, you simply change the class in the CSS file instead of going to each of your font tags and change the layouts. When you make a change in the CSS class file, the changes propagate to each of your 10 HTML pages without you changing any of them manually. When you back up your files, you only need to back up one file for all of your styles.

How Does CSS Work with HTML?

Starting with HTML 4.0, coders are able to place all styles in separate files. You can also place your CSS styles directly in the HTML within the <head> tag, but it is generally frowned upon in the coding world. For the most part unless it's extenuating circumstances, you want to place all of your CSS styles in a separate file. This file is usually just a text file, but the it has the ".css" extension. You can identify these files from your JavaScript library files with the .css file extension where JavaScript has the .js file extension.

The following code is a very basic, standard HTML file.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

 This file contains my first HTML code.

</body>
</html>

In older HTML styles, suppose you want to center your text. HTML provided you with a tag called center or <center>. The above HTML would change to:

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

 <center> This file contains my first HTML code. </center> 

</body>
</html>

The result of the center tag is that the text "This file contains my first HTML code" would be centered in the user's browser. Suppose you have several of these <center> tags throughout your code and you have them in several pages. You later decide that you want to left align this text and stop centering your text. You would need to go back to all files in each paragraph that had the <center> tag and delete the tags. As you can imagine, this process could be a nightmare, especially if you accidentally made coding errors and uploaded the errors to your production environment.

With CSS, you can center your paragraphs with limited code that doesn't need to be repeated throughout your entire file and code base. For instance, the following CSS centers your paragraph tags:

p {
text-align: center;
}

In the above CSS code, the first part of the snippet is the "p" tag. This CSS indicates that you want to change the styling of your paragraphs. You can drill down and make more distinct changes to specific paragraphs, but this particular example changes all paragraph tags on the entire page.

Interested in learning more? Why not take an online CSS course?

Each CSS class or code block is encased in the brackets. If you have any C, C++, Java or C# experience, you'll recognize the brackets and understand their importance. All of your class definitions must be encased in these brackets. In this example, the class definition is only one line of code. All lines of CSS code within the class definition brackets must end with a semi-colon. In this example, the class definition is "text-align: center;" It takes some time to understand and remember the CSS style codes, but this particular line of code tells the browser to center the text.

What happens when you decide you want to change all of your paragraphs to left alignment? You can do this by changing one line of code. Incidentally, left alignment is the default, so technically you don't need to specify left alignment, but for this example, we will specify left alignment for learning purposes.

To change the paragraph alignment, you would change the CSS style to the following:

p {
text-align: left;
}

You can also set your text to right alignment by using the following CSS code:

p {
text-align: right;
}

Once you've created your styles (in this case, it's only one style), you save it to a CSS file. Save one of the above CSS code snippets to a file and give the file extension a .css extension. For this example, name the file "styles.css" and save it to the same directory as your HTML file.

Now, let's take the HTML we had written out previously. Instead of using the <center> tag, let's use our new CSS file. Notice the changes in the following HTML code.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

 This file contains my first HTML code. 

</body>
</html>

Notice the "link" tag was added to the HTML. This tag is located in the <head> tag, and it links to the CSS file we just created. The properties within the <link> tag specify that the file is a style sheet, the type of text is formatted as CSS, and the name of the file. If the file was located in a directory, you would need to specify this directory, but we saved the styles.css file in the same folder as our HTML project.

This article focused on just the benefits and advantages of CSS, but it's just the beginning. Before you can decide on how to use CSS and take advantage of its functionality and classes, you need to know syntax and proper style code to insert into your projects. CSS is a fun language, especially if you like website design and want to dive into a career of UI web designer.

CSS Syntax

Now that you understand the benefits of CSS, it's time to dive into the syntax. In most cases, you don't want to make classes that change all element tags. You want to create classes that define a certain part of the web page, and then use other classes that affect other parts of the HTML. This usually means making multiple classes for different elements. This section focuses on CSS selectors, properties, values and different basic declarations you need to make basic CSS classes and styles.

CSS Syntax: Declarations, Properties, and Values

Unless you have some coding experience with web design, CSS can be a little awkward when you first get started. CSS syntax is unlike HTML and unlike any backend coding such as SQL, C#, or PHP. In other words, learning CSS is distinct from learning other languages. The only relation to other languages is that CSS works with classes. If you remember from chapter 1, you created a class style for the paragraph or tag. The following CSS is from lesson 1.

p {
text-align: center;
}

If you recall, this class aligns content in the center of the tag. The section within the brackets is the CSS declaration. You can have multiple declarations but each are separated with a semicolon. For instance, the following CSS code has two declarations.

p {
text-align: center;

color: black;
}

In the above CSS class, the second declaration tells the browser to display black text.

Declarations are separated into parts called properties and values. Take the second CSS class in the above example. The first part of the declaration is the property. There are two properties described in the above declarations. The two properties are "text-align" and "color." These are properties, because they define the layouts you can manipulate in an HTML tag. After the property comes the value. The two values in the above CSS code are "center" and "black." Values define what you want to do with the properties. In this example, you want to "center" the text and make the font black. The entire framework of CSS and how you design your layouts are based on properties and values, which define your declarations.

The CSS Selector

The first part of understanding CSS is the selector. The CSS selector lets you "select" an attribute, a specific tag, a link or any other element on the HTML page. In other words, the selector lets you drill down to a specific HTML tag to change its layout and look. CSS gives you the power to design your pages and sections of these pages individually.

There are several selectors in CSS' arsenal. In the above CSS example, the selector is the "p" part of the class style definition. This particular selector selects all elements on the HTML page regardless of the elements' names, classes, or any other HTML property.

In much of CSS design, classes and layouts are assigned to HTML tags with ID properties. An HTML tag that has the ID property basically defines a "name" for the tag. All tags on an HTML page must be unique. No two tags can have the same ID, so you know your CSS class will only be applied to one tag on the page. The following HTML code is an example of a tag with an ID.

This file contains my first HTML code.

In the above code, a paragraph tag is given the "myparagraph" ID. You can tell your CSS class to apply only to a specific tag with the given ID. The following code shows you a CSS class with the ID selector.

#myparagraph {
text-align: center;

color: black;

}

Notice the selector first has the hash character and then the name of the ID. The above code no longer applies to all tags. Instead, this class will only affect the HTML tag with the given ID, which is "myparagraph" in this example.

What if you have one paragraph CSS class that you want to use with multiple tags, but you don't want to affect all of them. Every ID must be unique within the HTML page, so you can't use the hash selector. The alternative is to use the class selector. The class selector lets you define a class for multiple tags. You can also define one class that can be used by multiple tag types. The following code is an example of a CSS class that can be used anywhere in the page.

.yellowbackground {
background-color: yellow;
}

The above code defines a class named "yellowbackground." Notice the period or dot in front of the class name. This is not a typo. You need the dot to define a global class for your HTML pages. This class highlights or colors the background of the element with yellow shading. Think of this class as a highlighter for your web page text.

After you create your class, you can now apply it to your HTML tags. The following code uses the above yellowbackground class in a div tag.

<div class="yellowbackground"> This content has a yellow background.</div>

Because you haven't specified an HTML tag or element for this class, you can use the defined yellowbackground class with other elements as well. The following HTML code will also use the CSS class.

This content has a yellow background.

As long as the class HTML property is defined, the CSS class will take effect.

You can also limit the tags that use your classes by defining a tag with your CSS class. Suppose you only want a tag to use your yellowbackground class. You can prefix your yellowbackground class with the class specifier. The following code shows you how to limit your classes to specific HTML elements, which in this example is the tag.

p.yellowbackground {
background-color: yellow;
}

With the above CSS class, you can only use the yellow highlighted class with the paragraph tag. Now, if you try to use it with the div tag, the selection will fail.

There are several other selector values you can choose. You might want to apply a CSS class that has a specific input or value. For instance, when a user checks a checkbox, maybe you want to change the font to bold. This makes the checkbox value stand out against the page when the user checks the box. The following CSS class shows you how to do this.

input:checked {
font-weight: bold;
}

The colon ( : ) separator tells the browser to apply CSS styles to HTML tags with the specified value or input. In this case, the checkbox is checked. The declaration in the CSS class tells the browser to change the font to bold. The property is "font-weight" and the value is "bold."

You can also use selectors on the value of a specific property. For instance, suppose you want to set the background as yellow for all links with the title "Yellow Flowers." You can do this with a CSS selector that specifies title and value of "Yellow Flowers." The following CSS selector shows you how to do it.

a[title~=Yellow Flowers] {
background-color: yellow;
}

Your HTML link tag would look like the following.

<a title="Yellow Flowers are Here"> Click here to view some yellow flowers. </a>

You can use this selector with any HTML attribute and a corresponding value to change the layout. Notice that the value is not exactly set to "Yellow Flowers." The "~=" tells the browser to change the CSS layout if any part of the value contains that particular text. You can limit the text, however, to only the exact value. To do this, you take out the ~ character. In the following CSS code, the title attribute must have the exact value with no extra characters.

a[title=Yellow Flowers] {
background-color: yellow;
}

In the above example, the content of the title attribute must be exact. Therefore, the HTML posted above would not work with this CSS code. However, the following code would work with the CSS class.

<a title="Yellow Flowers"> Click here to view some yellow flowers. </a>

Sometimes you want to apply CSS styles to the entire page. Specifying each HTML tag would be tedious, so CSS gives you the asterisk character as a wild card. Using the asterisk, you can tell CSS and the browser to apply a style to the entire page of elements. For instance, the following code changes the font color to black for the entire HTML page.

* {
color: black;
}

The CSS selector has several more ways of selecting HTML tags, but the above are the most common. Once you dive deeper into website design, you'll get to know about the additional selectors. The above selectors give you a good head-start, and they are supported by all browsers.