What is CSS?

There are many code schools that will teach you how to code in CSS — indeed, you can become an expert in CSS3 right here at FVI — but before you get started on that, you might just want to get a basic idea of:

What is CSS?

CSS (Cascading Style Sheets) is a simple, fun coding language that you can use to tell the browser how to display an HTML document (click here to view our “What is HTML?” tutorial, if you haven’t already).

Think of it this way: the HTML provides the content of the web page, while the CSS styles that content so that the web page comes out looking pretty, rather than just a mess of unstyled content.

How to Use CSS:

There are three basic ways to style HTML content with CSS:

  1. inline styling: inserting CSS directly into a line of HTML code
  2. putting the CSS code into the <head> section of the HTML document
  3. putting the CSS code into a separate text file, and then linking it to the HTML document

Confused?  Don’t worry.  We at FVI believe that the best way to explain something is by using practical, real-world examples… so let’s try playing with some CSS code ourselves to see what this all means.

Open up the HTML file that you created in the “What is HTML?” tutorial (if you didn’t create this HTML file yet, please do so before continuing with this tutorial).  Make sure it is open in both the browser and in your text-editing program (double-clicking the file will most likely open it in the browser; right-clicking will usually give you the option to “open with” your choice of text-editing program).

Here is the code again for easy reference:

<!doctype html>

<html lang="en">

<head>

  <title>My First HTML5 Page</title>

  <style>

    body {

      background-color: black;

      color: white;

    }

    p {

      color: cornflowerblue;

    }

  </style>

</head>

<body>

  <strong>Hello world!</strong>

  <p>This is a paragraph.</p>

  <p>This is another paragraph.</p>

  <img src="http://www.fvi.edu/wp-content/uploads/2015/12/vawlt.jpg" />

</body>

</html>

Now, if we take a look at this code, we can see that there’s already some css in the file (highlighted in bold). Notice that this CSS code is in the <head> section of the HTML document (between the <head> and </head> tags).  Notice also that we placed the CSS code into a neat little container within the head section (a “style” section, between the <style> and </style> tags).  This corresponds to the second option in our list above (putting the CSS code into the <head> section of the HTML document), and represents a convenient way to style the HTML of a single page.

CSS code in the <head> section of an HTML document

Taking a closer look at this code, we can see that it is made up of two basic sections; styles for the <body> of the document, and styles for the <p> (paragraph) sections of the document.

    body {

      background-color: black;

      color: white;

    }

    p {

      color: cornflowerblue;

    }

CSS code is pretty easy to read and self-explanatory.  You may already have guessed that if you change the word “black” to “orange,” for example, it will change the background color of the <body> of the document (which is basically everything you see on the page).  Try it!  Change the word black to orange (or green or yellow or whatever color you like), then save your HTML file, and then refresh the web page in your browser.  See how it changes the background color!

The structure of CSS code is also pretty simple.  It basically always looks something like this:

    selector {

      property: value;

    }

In our case, the word  body is called a “selector” because it selects the <body> section of the HTML.  Everything within the

{ curly braces }

following the selector tells the browser how to style the selected section.  So, in our case, the <body> section has many properties, including background-color, color (of text), margin, etc.  In the code above, we told the browser to set the <body>’s background-color property to a value of black, and the color property to a value of white.  Afterward, we used another selector, p, to select all of the <p> (paragraph) sections of the document, and we set the color property to a value of cornflowerblue.  You can play with all of these settings in the code in your text file to see how it affects how the web page looks!

Inline styling: CSS code inserted into individual lines of HTML

If you want to get really specific and tweak the details of a particular element on a single page (the cat image on our web page, for example), there are a few ways to do this.  One is to create a special “ID” for that element and use that as a selector, but that’s outside of the scope of this introduction.  For now, we can do it simply by adding a little CSS code into the line of HTML that defines the image on the page.  For example, we could write something like this:

  <img src="http://www.fvi.edu/wp-content/uploads/2015/12/vawlt.jpg" style="margin:20px;" />

In this way, we added a margin of 20 pixels to the image.  Try changing it in your HTML file to see how it works!  You can also get fancy and set multiple CSS properties within a single line of HTML, like so (try it in your own code):

  <img src="http://www.fvi.edu/wp-content/uploads/2015/12/vawlt.jpg" style="margin:20px;border:10px solid black;" />

Generally, though, when you’re designing a real, large web site, inline styles can become a bit cumbersome.  For that reason, web developers tend to prefer to insert CSS code into the <head> section of the document, or even to put it in another text file entirely.

Creating a separate file for your CSS code, and then linking it to the HTML document

The main advantage to putting your CSS code into a separate file is that you can use the same stylesheet for many individual HTML files.  This is very useful when working on larger-scale websites that have multiple pages.  Some websites have hundreds, or even thousands, of pages; using the same stylesheet for all of them not only saves you a lot of time and effort, but also makes sure that all the pages look uniform, and allows you to change the style of the entire website, across many, many pages, all at once, with a few simple edits to the CSS file that styles all of them.

Let’s try it!

First, copy/paste the CSS code (starting with body and ending with the final closing curly brace) from the <style> section of our document into a new plain-text document, and save that new document as a CSS file (it can be anything you like; hello.css, styles.css, test.css, etc).  Make sure that you save the CSS file in the same folder as the HTML file for now.

Now, delete the entire <style> section from the <head> of the HTML document (just delete everything from <style> to </style>).

Now that we have the CSS saved in a separate file, we need to tell the HTML document where to find that file!  So, we insert a link into the <head> section of the HTML document, like so:

<link rel="stylesheet" type="text/css" href="test.css" />

You can replace “test.css” with whatever name you used for your CSS file.  This tells the HTML document where to find your stylesheet.  It also tells the HTML document what it will find there (a stylesheet with text/css code).  Your <head> section should now look something like this:

<head>

  <title>My First HTML5 Page</title>

  <link rel="stylesheet" type="text/css" href="test.css" />

</head>

Now save both your HTML & CSS files, and reload your web page.  It should still display the styles, even though you moved them to another file!  Try editing the CSS, saving it, and then refreshing your web page.  If you’ve done everything correctly, you should see the changes on the web page as soon as you click “refresh.”

Where to go from here

If you want to take your HTML/CSS skills to the next level, try creating a second HTML file (you can use the same procedure that we used to create the first one, or you could just duplicate the one you already made) and adding it to the folder with the HTML & CSS files you already created.  Make sure that both HTML documents have links to the same stylesheet in their respective <head> sections.

Open that new HTML page in a new tab in your browser and make sure that it is correctly linked to the stylesheet (you can see your CSS styles applied on the new page).  Now play with the CSS styles in your stylesheet, make whatever changes you like, and watch the magic happen as your changes in the stylesheet automatically affect both of your webpages!

You can find much more information about CSS, and many more selectors, properties, & values to play with, at Coders’ Corner, among other places.  We recommend playing with our online tutorials for a while to get a good feel for CSS, and if you want to really become an expert (and maybe even get a job/career as a web developer), sign up for one of our personally-guided programs here at Florida Vocational Institute.

Have fun, and happy coding!

2017-07-20T12:42:43+00:00