Basic CSS Styling

Introduction and Overview

Hello, budding programmers! A website without styling is like a tree without leaves—it’s useful, but it doesn’t appear as attractive as it could be. That’s where CSS, short for Cascading Style Sheets, steps in. Creating websites is not just about surrounding content with HTML tags; it’s also about making it pleasing to the eye, easier to read, and user-friendly, which is what CSS is all about. CSS is used widely in the real world to create visually appealing and user-friendly websites like Facebook, Google, and even this learning platform. Today, we will learn the basics of CSS and how to apply it to our HTML to-do list that we've built in the previous lessons. By the end of this lesson, you'll be able to make your to-do list not just functional, but also attractive!

Understanding CSS

CSS gives life to your HTML pages—it stores rule sets that decide how your HTML elements should look. Just like HTML, CSS is not a programming language; it's a stylesheet language that describes the look and formatting of an HTML document. CSS is cascading because styles come "trickling down" from top to bottom. If more than one style applies to an HTML element, the style closest to that element will take priority. This is also known as the rule of "specificity." Think of it like house painting rules: You might say all new houses should be painted red, unless they have a porch, in which case they should be yellow. Furthermore, if the house has the number 14, it should be green. This hierarchy can be understood as red<yellow<green, with the most specific rule (green) taking precedence.

Introduction to Inline and Internal CSS

Inline CSS involves adding style rules directly into an HTML element’s style attribute. It’s handy for small, one-off styling needs, but isn’t always the best choice because it doesn’t promote code reuse. HTML <!-- Inline CSS --> <p style="color: blue;">This is a blue paragraph.</p> When we talk about internal CSS, we’re referring to style rules that are placed inside a <style> tag within the <head> section of an HTML document. Internal CSS is a better choice when you need to style multiple elements or the entire page. HTML <!-- Internal CSS --> <head> <style> p {color: blue;} </style> </head> <body> <p>This is a blue paragraph.</p> <p>This is another blue paragraph.</p> </body> Remember, for our lessons, we want to focus on understanding these concepts without relying on external stylesheets, so stick to inline and internal CSS!

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

CSS Syntax and Selectors

A CSS rule-set consists of a selector and a declaration block. The selector points to the HTML element you want to style, while the declaration block (enclosed in curly braces {}) declares one or more declarations separated by semicolons ;.

Each declaration includes a CSS property name and a corresponding value, separated by a colon :.

HTML

<style>
    /* CSS syntax */
    p {
      color: red;
      font-size: 16px;
    }  
</style>

<style>
    /* CSS syntax */
    p {
      color: red;
      font-size: 16px;
    }  
</style>

In CSS, the order of specificity determines which style rules take precedence when multiple styles apply to the same element. The order of specificity is as follows:

ID Selectors (#): ID selectors have the highest specificity. They are unique to a single element, making them the most specific.
Class Selectors (.): Class selectors are more specific than element selectors but less specific than ID selectors. They can be applied to multiple elements on the page.
Element Selectors: Element selectors have the lowest specificity. They apply styles to all instances of the specified element type throughout the document.

When multiple styles apply to the same element, the one with the highest specificity will take precedence.

HTML

<head>
  <style>
    p {
      color: red; /* (General) element selector */
    }
    
    .myClass {
        color: blue; /* (Specific) class selector */
    }
    
    #myID {
        color: green; /* (Even more specific) ID selector */
    }
  </style>
</head>
<body>
  <p>This paragraph will be red.</p>
  <p class="myClass">This paragraph will be blue.</p>
  <p id="myID" class="myClass">This paragraph will be green.</p>
</body>

<head>
  <style>
    p {
      color: red; /* (General) element selector */
    }
    
    .myClass {
        color: blue; /* (Specific) class selector */
    }
    
    #myID {
        color: green; /* (Even more specific) ID selector */
    }
  </style>
</head>
<body>
  <p>This paragraph will be red.</p>
  <p class="myClass">This paragraph will be blue.</p>
  <p id="myID" class="myClass">This paragraph will be green.</p>
</body>

In the example, the paragraph with the id of myID will be green because the ID selector has the highest specificity, overriding the class selector and the element selector. The paragraph with the class myClass will be blue due to the class selector, which overrides the element selector. The regular paragraph will be red due to the element selector.

Introduction and Overview

Understanding CSS

Introduction to Inline and Internal CSS

Join the 1M+ learners on CodeSignal

CSS Syntax and Selectors

CSS Styling Properties

Applying CSS to Our To-Do List

Summary and Next Steps