CSS Italic: How Basic CSS Code Works and How to Italicize Your Font With it

cssitalicWhen you were in high school did you have to learn a new language? Most kids studied languages like Spanish, French, German or Italian. If so, you know how when you first start speaking and writing in this new language – you fumble – it can be hard to get your flow and to make sense of the structure, right? Well, computer programming languages like CSS are no different. They are whole languages into themselves and they require practice to become fluent in. So let’s get you started on your journey to fluency in CSS. Get prepared to learn CSS in this CSS prep course.

What is a computer programming language?

A computer programming language is a tool for us mere mortals 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.

What is CSS?

As we’ve already gone over, CSS is a computer programming language. It stands for Cascading Style Sheet. A style sheet is basically a note we write up for the computer to tell it what we want our software to look like. So, instead of saying “I want the font on all of my pages to be red” we use a command that tells our computer to make our font red.

I say could, because CSS code “calls” an object (like the body text) by its defined name. Your defined name for the main pages of your website may not be body, it may be main. This is where things can get a little tricky.  Each object has its own name. In code, sometimes these are written just by their natural name (link is a link, button a button). But sometimes, the code writer calls it by a different name. It’s important to know what they chose to call the object you’re trying to edit so that you can access it.

If you have a black menu bar on your website but you want it to be red, you need to tell the computer not only that you want the color to be red, but what you want to turn red. This is done by “calling” an object and then telling it what you want it to do.

An example of a call looks likes either of these:

#menu

.menu

If the call has a # sign in front, it stands for a ID. If it has a . in front, it stands for class. If you aren’t trying to do any DHTML or Javascript coding, then go ahead and stick with using class as your command choice. ID’s (#) are for doing more complex things. Total beginner? CSS made easy.

Where Can I Find the Name?

These names are defined in a language called PHP. A PHP file is created to define what the CSS file calls. They work together like a team. So, if my PHP file appropriately names the header, header, and I want to change the header width, I would call the header to change using CSS on my CSS file by writing:

.header {

width: 600px;

}

If you use a program like Mozilla you can “inspect an element” on a website and it will tell you what the name of it is.

Finally, How Do I Italicize My Text?

Okay, you made it. Let’s italicize. Say you want to change the main text of your site to be italic instead. Your CSS command would look like this:

.main {

font-style: italic;

}

By using “.main” I am calling the main text of my site or document (after I figured out that this is what it’s called). By using “font-style” I am telling the computer that I would like to alter the font-style of the main text on my site. I then defined what I wanted the font style to be by specifying “italic” (you can also use bold here). You’ll also see that the “font-style” is surrounded by brackets. This is just to contain the call so it doesn’t run over into another one you write up. The semi-colon used after “italic” is used to separate different commands within a call. Here’s another example:

.main {

Font-style: italic;

Font-color: FF0000;

}

 

This example will make the main font both red and italic.

You want to place this code between your STYLE tags. A tag is similar to the brackets above as it begins and ends a command except tags are written in HTML and look like <> and </>. So, style tags would look like <style> </style> with the directions in-between both of those, like this:

 

<STYLE>

.p {

Font-style: italic;

Font-color: FF0000;

}

</STYLE

 

The “.p” class here often calls paragraphs. The STYLE tags can be found at the top and bottom of your HTML document. Most of the information on your document will fall between these two tags.

HTML and CSS can be used together in one document but it’s not recommended. Try to use all CSS when you’re developing, or all HTML if you must.

If you’re stoked about CSS and want to learn more, check out this CSS for beginner’s online course.