A CSS Onclick Event Crash Course for the Beginner and All the Rest of You

Ever wondered how a website knows what to display? In the developing world we use what are called computer programming languages to communicate what we want to happen on the screen, to the computer. CSS is an example of a popular computer programming language. Here, we’ll go over what CSS onclick means, how to use it, and how to code it! CSS made easy.

What is a computer programming language?

A computer programming language is a tool for us humans to communicate with our computers. If we didn’t have a go-between language it would be really hard for developers to create software or design websites. Instead of typing out our language, like I am here, or trying to understand binary code, we meet in the middle with a language that consists of familiar symbols and letters. Other examples of a programming language include: HTML, PHP, Java, Javascript, and Python. It’s easy to learn but will take a time commitment and patience – just like learning a foreign language, say German, or French, will.

What is CSS?

CSS stands for Cascading Style Sheet and it’s another language that allows you to define more specific rules for your website to display. You can use CSS to customize pretty much anything you want like, website container size, logo position, menu color, link-selected actions and much, much more. CSS has rules you must follow in order to enable the code to do what you want. Just like the English language has rules of word order or grammar to make it understandable, and universal. CSS can be intermingled with other programming languages like HTML, but it’s not good practice. You should keep your CSS statements in a separate file called a style sheet. The file would be called stylesheet.css, or something of that nature.

How do you use it?

Web developers often create their code in a program called a text editor. Text editors, like browsers, are plentiful which allows the developer to choose one that works best for them. You know the Notepad feature that comes on your computer? This is the most basic type of text editor. When working in this environment, programmers can use CSS and HTML to create customized content for their websites. They can then use a WYSIWYG (what you see is what you get) editor that allows them to see the changes they’ve made to their code in a preview format. Notepad++ is the enhanced version of Notepad and it’s used primarily by coders, or people interested in learning code. It’s simple like Notepad but has additional features like line count, and it’s responsive to the code you are typing. For example, you type out the CSS onclick statement and it will highlight the code in several colors so it’s more organized. It will also turn red if you have incomplete code. For beginners, it can be a really helpful tool. A couple other good text editors are Bluefish Editor, and TextWrangler.

CSS onclick

An onclick event is when you click on an image, or a link, or a button on a menu – something happens. Either the background color changes, an image appears or changes, the text changes – again, something happens. It’s kind of like the hover event or active event. With hover, when you hover over an element, it changes to your specifications. With active, when you’ve clicked on something and it’s “active” it will stay a certain way until you click on another element. With onclick, the change happens, well, on click.

Now, an onclick event uses CSS and Javascript to call a function to action when the element is clicked on. Let’s go over how to write the code.

Step 1

Okay, to get started with the onclick event, we’re going to need to create some code in a text editor to put everything into context. I’m going to create a simple outline that looks like this:

You can name your div whatever you want, I used AFAR after one of my favorite magazines. Now, in order to have something that you can click on, you need to create what is called an anchor. The anchor opening and closing tag is: <a> </a>.

Step 2

In-between the anchor opening and closing tag, you want to put what you want to be clickable. For example, if you are looking to have a clickable text, you will need to put the text between these tags. If you are looking to put an image, you will need to put the image source URL. The code will look something like this:

You’ll notice that there is no information between the “ “ part of that code. We are going to get into what to put there next. Learn more CSS to create beautiful webpages.

Step 3

The onclick part of the above code will indicate what we want to happen when the text is clicked. We have to define what div we want the function to interact with and the code for doing so looks like this:

This code will be placed within the existing anchor tags:

Step 4

Okay, so you have the onclick event embedded in your anchor tags. Now, you need to define the function. What do you want your element to do when it’s clicked on? You need to change the CSS attribute by using a Javascript reference. Here, we’ll use .cssText Do you want the text and background of the text to change color? Here’s how to do that.

You see that the background will turn black and the text white when the words “Click me to trigger a function” are clicked on. This basically inverts the color of the text.

Pay close attention to the two semi-colons at the end of the highlighted code above. If you forget to include ;’; your code will not work.

If you want to learn more about CSS or more about Javascript references, here are a few great online courses to help you out.