03/20

Beginning The Use of CSS in HTML

Cascading Stylesheet or CSS for short is one of the way web developers use to design an HTML site. With CSS and images, you can make any site design whether it’s a simple portfolio site, or a Wordpress theme.

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic CSS Style for HTML

What is CSS?

Cascading Stylesheet or CSS for short is one of the most important component in web design. As I mentioned before, HTML is simply a language that structures and puts your content on the site. CSS is where your site transforms into an actual design. CSS will provide the positioning, colors, images, and other design functions that will make your HTML site into a well designed website.

You can do a lot of things with CSS. Move your elements around, give them a different text color, change the font size, give them a specific width, center the object, giving them borders, changing the bullet image of lists, and even give them special attributes for when the user hovers or clicks on a link. We will learn about them as we continue these tutorials. In the end of all of these tutorials, we’ll be making a simple HTML website with a simple CSS based layout.

There are 3 different ways to stylize your site:

Inline Styles
Internal Stylesheet
External Stylesheet

Inline Styles

Inline styles is used within the HTML file. They are included within the tag elements that you want to style such as the div, span, ul, li, a, and other tags. You can add inline styles to these to make them unique to other elements. Saying that, when using inline styles, they take precedence over other styles set through internal and external stylesheet.

Here’s how to implement an inline style. In our case, I’m going to style the title and make it red:

<span class="titles" style="color:#ff0000;">My Title Here</span>

With this code snippet, the words “My Title Here” is now red. I used the CSS attribute of “color” and inserted the value for it. For colors, CSS recognizes different types of value for color. Two mostly used are a 6 character hex codes like #ff0000, #ffffff, #000000, and actual color names such as “red”, “blue”, and “gray”. (Look at resources below for some cheat sheets on what colors are available out there)

Personally, I don’t like to use inline styles as it clutters up the code in the HTML file, and I like to keep everything organized in their own file. HTML in html files, CSS in their separate CSS files. The only reason I’m mentioning this is because you’ll come across when looking at old sites, or perhaps a script or plugin for your site will have a markup that has inline styles.

Internal Stylesheet

Another way to style your website with CSS that’s more clean and organized than inline styles is the use of an internal stylesheet. With internal being the keyword, all the style resides within that same file that you placed it in and will ONLY affect that one file.

Internal Stylesheets are declared in the beginning of an HTML file within the <head> tag.

The code to set up the internal stylesheet is as follows:

<style type="text/css">

<style>

Internal CSS in HTML File

Once declared, you are now able to put any CSS attributes in there. Now we’re going to skip “how” to actually put it in there, as I’m going to show you what external stylesheets are. After that, then putting CSS attributes will be explained as they are the same with internal and external stylesheets.

CSS Attributes – These are attributes that will change the style of the element such as borders, width, height, color, etc…

External Stylesheets

External Stylesheets are the same as internal ones except they are located in a separate file. They are just normal documents with the file extension of “.css” at the end. They are mostly named “style.css”, “layout.css”, etc… It doesn’t matter what it’s called, as long as it has a “.css” file extension then we know it’s a CSS (Cascading Stylesheet).

You can make as many external sheets as you want, however, they won’t do anything until you link them into your HTML file or website. To do this, you insert a link tag to import the external CSS file into your HTML file. Again, this code must be placed in the <head> section.

Here’s the code snippet to import an external CSS file into your website:

<link rel="rel="stylesheet" href="style.css" media="all">

Link External CSS to HTML Website

Notice the attribute href. Just like making hyperlinks, you can direct it exactly where you put your CSS sheet, whether it be in another folder or named different. For this tutorial, the CSS sheet is located in the root directory and labeled “style.css”.

Adding CSS attributes to elements

I’ll be using the external stylesheet for our examples. However, note that the code structure for external stylesheet will be the same for an internal stylesheet.

So open up your CSS file and the first thing we are going to learn is how to comment in it. Comments are important to document what you do in your project. By using comments, you can further organize your code as in any language where you learn to comment in addition to making it easy for other people to understand it if you happen to pass this code off to someone.

To start a comment, all you need to do is add a “/*” in front of your comment and then finish the comment by adding a “*/” at the end of your comment.

As a result:

/*CSS for Creative-Le Website Tutorial*/

Commenting in CSS

For the purpose of this tutorial, there are three ways to target/select an element in your website to style.

Global elements
ID elements
Class elements

Remember on our tutorials about div, p, span and ul, li, and ol tags where we talked about giving them ID and Classes?

The reason why it’s important to have classes and ID is because you can use those names to target and select them in your CSS. Not all the divs in your html site are going to function the same, so it’s important to give them a special name, so that you can target them specifically and style them in a special way without having to mess up the other elements.

Global Elements

Global elements isn’t the actual name, but I’m naming it that because it basically covers all the basic html elements that it recognizes such as body, div, p, span, ul, li, etc… It’s not specific, so if you target a basic div and make all the text inside a div red, then all the divs in your website will have red text, unless specified otherwise by their ID or Class name.

Here’s a snippet of how to target a global element:

body{ font-size: 14px; }

ul, li{ list-style:none; }

Stylizing Global Elements in CSS

Notice how each element is followed by an open-bracket “{“ and ends with a closed-bracket “}”. And also, any CSS attribute line has a semi-colon “;” at the end. This is the standard CSS coding syntax. And so, if there are any errors on your site, and you believe it’s an error in the CSS file, then it might be your syntax. Make sure you don’t miss any brackets or semi-colons.

With this code in the CSS file, we make all the text located within the body tag to 14px and we made all ul and li tags to have no bullets on them. list-style:none makes it so the list will not have any bullets. This is useful because many times, designers use lists for their navigation for semantic purposes but they don’t want the ugly bullets to be in the way.

Note: If multiple elements on site requires the same styling, you can include them in a series instead of declaring each of them individually. From the example above, I have “ul, li” and then my code. That means, all ul and all li elements will have that style. It’s a shorter way than typing:

ul{ list-style:none; }

li{ list-style:none; }

There are lots of global elements that you can target and style. It’s good practice to use them because the less CSS write, the less size the file will be. Try not to give every class a font-size: 14px; if you can just do that in one swoop by putting that in the body tag.

Class Elements – HTML Tags that have Classes

HTML tags that have class names are targeted and selected a different way than global elements. To target class objects, you need to have a period “.” in front of the class name. For example:

.copyright{ color: #ff0000; font-size: 10px; }

Targeting Class Elements in CSS

From our last website tutorial, we fully had a site with a few classes and IDs. Here I’m targeting the span class “copyright“. Notice the period “.” in front of it. Through CSS, I’m adding a color to it, in addition to making the font size of it 10px.

Also a note, that once you start selecting and targeting elements specifically, they override the pre-existing files. Everything in the body is supposed to be 14px but now that I targeted “copyright” specifically, it now changes to what I told it to be. Also, once stylized, any tag that has the class name of “copyright” will have the styling that I put in. So whether it’s a div or even a p tag, if it’s given a class name of “copyright” then they will also inherit the styles.

That’s what makes CSS very versatile and useful. To be able to change multiple elements instantly and to be able to change them individually, gives websites a lot of options for designs.

ID Elements – HTML Tags that have IDs

Similar to classes, targeting IDs require something special in front of the name. Instead of the period “.”, we use the number sign “#”. Keep in the mind the differences between ids and classes.

To target an ID, the code would look like the following, except the name will be replaced by whatever ID of an element you want to target.

#footer{
text-align:center;
}

Targeting ID elements in CSS

This makes all text everything within the footer to be center aligned. And that’s how you target IDs.

Most commonly used CSS Attributes

There are many attributes that you can add to an element. Some elements are restrictive in that you may not be able to position, you may not be able to color it, etc… I personally don’t remember all the rules, but I know enough to just do a trial and error to see if it works for that html tag or not.

Below are just a few links to most commonly used CSS attributes that you can add in your code. At the end of this whole tutorial session I’ll make a quick cheat sheet with most of them so that you can download and don’t have to worry about researching it again unless you wanted to learn more.

Commonly Used CSS Terms
CSS Code Gallery of Terms
CSS Cheat Sheet
30+ CSS Cheat Sheets and Reference Guides

Conclusion

In this tutorial we have learned a lot about CSS (Cascading Stylesheets). We know how to do inline styles, internal stylesheets, and making our own external stylesheets. In the download below, I have included the files that I’ve used for this lesson. There is the index.html, about.html, images folder, and now a new file called “style.css”.

What I’ve done in the source was linked the external stylesheet with index.html, and put some CSS coding to stylize certain parts. What you can do is link the style.css file to the about.html and also mess around with targeting different elements in the html files.

I hope you enjoy the tutorial and begin to learn how powerful CSS is for a website. If it wasn’t for CSS, all websites would relatively look the same. Any questions, comments, feedback are appreciated. Make sure to comment below, and I’ll get back to you.