CSS The Architect – Syntax

So far, we’ve learned about the building blocks of HTML, and how to build a web page. (if you haven’t, you can take a crash course here!). Now let’s talk about what makes all web pages unique: CSS.

CSS stands for Cascading Style Sheets. We use CSS for a variety for fonts, backgrounds, images, colors…mainly anything cosmetic. For web development, CSS is our architect; it tells us how each piece of a web page should look at all times. In a common fashion, CSS is created after the HTML is written.

There are multiple ways to add some CSS to your webpage. Each method explained has it’s advantages and drawbacks.

Internal Styles

The simplest way to add CSS is to add a style attribute to an HTML tag. To show you, let’s use the paragraph example from a previous chapter.

<p>I am a paragraph. Just an ordinary paragraph with nothing going on.....<span style="color:green">yay.</span> But hey, we're learning right?</p>

I am a paragraph. Just an ordinary paragraph with nothing going on…..yay. but hey, we’re learning right?

But, what if we have more than one property to add? Not a problem. We can use semicolons to separate each property.

<p>I am a paragraph. Just an ordinary paragraph with nothing going on.....<span style="color:green;font-size:22px;font-weight:bold">yay.</span> But hey, we're learning right?</p>

I am a paragraph. Just an ordinary paragraph with nothing going on…..yay. but hey, we’re learning right?

And that’s it! Using CSS in this format is useful for quick styling of elements. Although this approach is the easiest, it does have some drawbacks.

Say if we have some more detailed styles to add. Or if we have 10 different paragraphs. Using the internal style method can get very tedious and cumbersome after a while. Not only that, the HTML itself can get very messy; which can get frustrating for developers when going back to look at code. That’s where the next two approaches comes in handy.

Internal Style Tags

A somewhat better way is to use internal style tags. We add a <style> tag inside the <head> of your HTML; then we can add all our styles there.

<html>
   <head>  
      <style>
         p {
            color: green;
            font-size: 22px;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>Hello world! I have CSS!</p>
   </body>
</html>

Hello world! I have CSS!

Noticed the way we’ve added each property? Using an internal style tag allows us to have more structure and readability to our CSS.

There is another added feature this method introduces. Say if we add another paragraph to the above example:

<html>
   <head>  
      <style>
         p {
            color: green;
            font-size: 22px;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <p>Hello world! I have CSS!</p>
      <p>...wait a minute, I do too!</p>
   </body>
</html>

Hello world! I have CSS!

…wait a minute, I do too!

Noticed what happened above? We didn’t need to add anything else to CSS to get the styles! When we referenced <p> using this internal tags, we’re looking at all paragraphs, not just the one.

This method does have one disadvantage. Although the CSS is more readable using this method, it takes up more lines of code, making the file size larger. For more complex websites, this may cause performance and debugging issues later on. We want to prevent that happening as much as possible.

External CSS Files

The last method is using external stylesheets, or external CSS. We can write a separate CSS file, then link the file to our HTML. This keeps our HTML file cleaner, and allows for more customization.

styles.css:

         
p {
   font-size: 22px;
}
        
.first {
   color: green;
}
        
.second {
   color: purple;
}

.bold {           
   font-weight: bold;
}

test.html:

<html>
   <head>  
      <!-- Link to stylesheet -->
      <link type="text/css" href="styles.css" />
   </head>
   <body>
      <p class="first">Hi, I like the color <span class="bold">green</span></p>
      <p class="second">But I adore <span class="bold">purple.</span></p>
      <p>Meh, I just like <span class="bold">bold...</span></p>
   </body>
</html>

Hi, I like the color green

But I adore purple.

Meh, I just like bold…

All your CSS can be linked with a single line of code. This method is extremely useful when you want to keep the same styling across different pages on your website. External stylesheet also have the ability to reference multiple tags here like before. Not only that, we can also bring in more than one CSS file on a page!

Using external CSS files is a more common practice in web development. However, depending on the type of environment we’re coding for, an external stylesheet might not be the best method. Learning all three methods are beneficial when styling your webpage.

Personally, I use the internal style attributes first, just to see what the HTML looks like. After everything looks good, I go back and remove the internal CSS, then copy the styles to an external stylesheet.

Tutorial