With a basic understanding of HTML, you can develop functioning websites, however, that simply isn’t enough. Appearance is a major component of a well-developed site. The visual connection a user makes with a website can determine not only if they stay at the site, but also if they intuitively understand how to navigate and use it. Enter the power of cascading style sheets, or CSS. In this brief guide, we will take a look at CSS basics.

What is CSS?

CSS can be viewed as an added component to your HTML work. CSS is not a code language of its own but rather a style sheet language that can style the HTML itself. It allows you to essentially detail how you want the HTML to look and behave. Where a page may need to pop with color another might need to be more spartan in effect. CSS gives you the avenue to do this.

Why Should You Learn CSS?

Aside from providing a creative flair for your HTML content, CSS also allows you to provide ease of design maintenance. While CSS styles can be used directly inside HTML, they can also be saved as stylesheets separate from the HTML content and linked for use. This allows you to modify them for various pages within the same site or even entirely new sites altogether. You save time and avoid issues where you might use the wrong colors or constraints.   

Starting With CSS

As mentioned above, CSS can be used within the HTML code directly or linked from an external stylesheet. The common (and accepted) method is the latter usage of a linked stylesheet. As with HTML, creating a CSS stylesheet is rather simple. We will set up both to get started.

Setting up the HTML file:

  1.  Open your text editor of choice such as Notepad ++, Sublime, or Atom for example. 
  1. Now, Insert the following content into the file:
<!DOCTYPE html>
<html>
<head>
  <title>Udacity CSS Basics</title>
</head>
<body>
  <p>Udacity has got your back!<p>
</body>
</html>
  1. Save the file as “HTML Example.html
  1. Find your newly created HTML file on your machine and open it inside a browser. You can do this by either right-clicking on the file and selecting the option or dragging it into an empty tab in Chrome or Firefox. You should simply see the text, “Udacity has got your back!” showing on a blank page. 
Note: Keep this open so we can track changes to the page. 

Setting up the CSS file:

  1. Open a new blank file in your selected text editor.
  1. Save the file as “CSS Example.css”. Be sure to save it in the same folder as the HTML file you created.
  1. Now with the blank file, we are ready to try some basic CSS. However, we need to know how to write it first. More directly, we need to know the syntax rules for CSS.

The Syntax of CSS

CSS adheres to set style rules that the browser can read and apply to the targeted components in an HTML file. The rules for these styles are divided into 3 parts.

The first part we need to know is the selector. This simply selects, or targets, the HTML tag you want to work with. This can be something like a title or paragraph tag.

Second, is the property setting. Here, we deal with specific attributes of the item we are working with such as the size, color, or even font to be used.

Third, we have the value to be set. This is the defined value of the property rule noted above. It allows you to define the type of color or style of font you want. You can also set the specific height and length of items as well.

Putting it all together, we select the HTML tag we want to work with. Then target the property we want to change about it. Lastly, we specify that value to complete it.

Here is an example of all of those parts in action:

h1 {
  color: blue;
}

___________________________________________________________

Here is a break down of what you see:

h1: This is the selector. We are targeting the h1 HTML tag.

color: This is our property. We are stating we want to change the color of the h1 tag.

blue: This is the value. We are saying that the value of the color property should be set to blue.

Linking the Stylesheet

Now that we have the syntax of the CSS style rules set up, let’s take a look at some examples of them in action. Before we do so, we will want to link our CSS stylesheet to our HTML document. This allows the HTML file to include the stylesheet so the browser can implement the styles we provide. This is also a very direct and easy process. 

In your “HTML Example.html” file, type the following directly above the closing for the head tag, “<link rel=”stylesheet” href=”CSS Example.css”>”. See the example below:

<!DOCTYPE html>
<html>
<head>
  <title>Udacity CSS Basics</title>
  <link rel="stylesheet" href="test.css">
</head>

As the stylesheet and the HTML document are both located in the same folder, they can see references to each other. Note: The CSS file may also be located in another folder, but the HTML page will need to link to this location. This will be covered later in this tutorial. However, the process remains simple in use. Now, let’s test that link with some basic CSS examples.

Color:

Changing colors is a great way to add flair to your HTML work. In your CSS file, we will start by targeting an item to work with. An easy and obvious item to change is the background color of the page itself. 

  1. Type the following into your “CSS Example” file:
body {
background-color: red;
}
  1. Now save the changes. 
  1. Next, go to the HTML file that you have open in a browser window. Refresh the page and you should see that your page background color is now set to red.
  1. Inside the CSS stylesheet, change the color to gray. Save and reload the open page to see the change once again. Just like that, with only a bit of text, you have altered the entire page. 

Size:

Another common aspect to work with is the size of an element. In our HTML file, we have the paragraph tag set with the following text, “Udacity has got your back!”. Let’s try changing that to be more prominent and direct on the page. 

  1. In your CSS file, type in the following:
p {
font-size: 50px;
}
  1. Now, save this and go back to the HTML file open in the browser. Once you refresh the page, the text should have increased in size quite a bit. 

Height and Length:

Finally, the last example deals with height and length properties. 

  1. To show this in an easy to display format, let’s add an empty div tag into our HTML file. See the example below:
<body>
  <p>Udacity has got your back!<p>
  <div></div>
</body>
  1. Save that addition and then move over to your CSS file. Add the following as shown below:
div {
width: 50px;
height: 50px;
background-color: black;
}
  1. Save those additions and now refresh the open HTML file in your browser. You notice a small black box under your text. 

For a more pronounced impact try changing the values for both height and width to 800px each. Once you save and refresh, you should see a rather notable difference in scale. Again, with just a few changes, you have made some dramatic changes to the appearance of your simple page. Imagine what you could do simply by combining these basic concepts. 

Where to Next?

This beginner’s guide into the world of CSS basics is just the tip of the iceberg in many ways. Each topic covered has various ways of being implemented and refined to allow for some truly stunning styles to come to life. 

In future pieces, these concepts will be covered in-depth to really drive home not only how to successfully use them, but also to show just how versatile the options are. If you take anything away from this basic intro, it should be how easy it is to get started and how impactful styles can be. If you have come this far through the guide, you are ready to dive into the rest. 

_________________________________________________________________________

Front-end web design is a popular and valuable skill set in this digital-driven world. If you are ready to embrace the better part of yourself that yearns for something more, enroll in Udacity’s Front End Web Developer Nanodegree to make that happen now.

Start Learning