10.2: CSS

This page will give an introduction to HTML, CSS and how to reference HTML and CSS using JS so that a SWE can change the styling of the page.

Learning Objectives

By the end of this lesson, you should be able to:

Intro To CSS

Built on top of HTML to add more visual control and complexity, CSS specifies styles on an HTML element or set of elements. The CSS code specifies visual properties unrelated to the written content on an HTML page. In practice there are 2 uses for CSS: element styling and layout.

Element Styling

CSS helps us change visual properties of HTML elements, such as fonts, background images, or rounded corners on buttons. Together with JS DOM manipulation, which we will learn in Module 6, we can use CSS to implement visual logic within an application, such as hiding or showing cards and flipping elements 90 degrees.

Layout

CSS can help us divide our UI into visual sections. This is one of the most tricky aspects of CSS, because CSS was not originally intended for layout design. CSS content in Rocket's Bootcamp will focus on implementing UI layouts.

CSS Syntax

CSS is a declarative language. It doesn't tell the browser what to do but rather describes the rules that the browser then uses to render the page. CSS became popular because it was predictable and forgiving in its syntax. It was also easy to learn.

The concept of cascading styles is unique to CSS. To cascade means that styles can inherit and overwrite styles through its hierarchy called specificity.

CSS styling can be applied in three ways:

  1. In-line styling.

  2. Internal styling.

  3. External styling.

For Coding Fundamentals, we will focus on just the first 2.

In-line Styling

We have already seen in-line styling: it **** is written inside the HTML opening tag as an property-value pair. This is the simplest and most direct way of defining the style of a HTML element:

<p style="“color:" red;”>This text would be red</p>

If more than one style declaration is applied:

<p style="“color:" red; font-weight: bold;”>This text is red and bold</p>

However, applying, tracking, and managing styles of individual HTML elements in a complex, large HTML file can quickly get messy. Perhaps we wanted to apply a certain style to all the paragraph elements on a page, and define it once. It would make it much easier to manage, and ensure that style changes applied to all the necessary elements, without having to proofread each line of the HTML file.

Internal Styling

Internal styling allows us to define the style for elements, or groups of elements centrally. These rules are defined within the HTML document, hence internal styling.

Sample Syntax

selector {
  property: value;
  property: value;
}

As a declarative language, CSS uses selectors and declarations to apply styling rules to HTML pages. The syntax for CSS starts with a selector: the HTML element(s) we want to define style rules for. Then a declaration code block is created using open and closing curly braces. Inside the declaration code block are the style rules, in a similar syntax as in-line styling. You can have as many rules as needed. It is conventional to put each rule on its own line in code.

All CSS rules are placed inside the <head> tag of the page and is wrapped inside the <style> tag. In this example, the selector of p is chosen to style all the paragraph tags on the page.

<html>
  <head>
    <title>Page Title</title>
    <style>
      p {
        color: white;
      }
    </style>
  </head>
  <body>
    <p>This text is white</p>
    <p>This text is also white!</p>
  </body>
</html>

External Styling

External styling is when the styles are defined in a separate file and is referenced by index.html. This allows for better neatness and organisation, and for a styles to be centrally defined in a single stylesheet and applied across various HTML files, if necessary.

When defining styles in a .css file, it is not necessary to have opening and closing <style> tags. Rather, the entire file is linked into the .html file using a link tag, in the <head> of the document:

<html>
  <head>
    ...
    <link rel="stylesheet" href="styles.css" />
    ...
    <html></html>
  </head>
</html>

rel="stylesheet" specifies the relationship of the file that we are linking, in this case the linked file defines the styles of the current HTML file, and it is known as the stylesheet. href stands for hyperlink reference, which defines the location of the file to be linked. If styles.css is in the same folder as the HTML file, we can simply provide the name of the file as the location.

CSS Selectors: Classes and IDs

Classes

Previously, we used HTML elements as selectors when defining CSS rules, either internally or externally. This makes things neater and easier to manage, but does not provide a lot of flexibility. Perhaps we want to apply a certain styling to a group of elements in our web page, but not all <p> elements. This can be achieved by using CSS classes, and assigning the relevant HTML element that class as an attribute.

A class in a CSS file comprises several characteristics that can be applied to any HTML element to define its visual identity. More than one class can be applied to an element and more than one element can be assigned a class. When defining a set of rules for a class, the selector is prefixed with a period, followed by the user-defined class name, as so:

.card {
  background-color: pink;
}

.face-up {
  font-size: 20px;
}
.face-down {
  font-size: 0px;
}

.page-link {
  font: 'comic-sans';
}
// This is the HTML File

<p class="card face-down">ace of spades</p>
<p class="card face-up">ace of clubs</p>

IDs

We can also define CSS rules for IDs. In this case, the prefix is #. As IDs should be unique, these CSS rules should only be applying to a single HTML element:

#player-card-one {
  border: 3px solid red;
}

#save-button {
  color: green;
}

When defining HTML elements in index.html, we can initially assign them an ID or a class. IDs are unique, and should not be applied to multiple elements (just like your ID number), but multiple HTML elements can share classes, and HTML elements can belong to multiple classes. Not all HTML elements need to have an ID or a class.

Cascade

Why Cascading Style Sheets? With so many different ways to define CSS rules, it is not difficult to imagine a situation where there are conflicting rules applying to a single HTML element. The cascade is what determines which rules actually get applied to our HTML. There are 3 main factors in determining the cascade:

  1. Specificity,

  2. Inheritance, and

  3. Rule order.

For Coding Fundamentals, we will only focus on 3. Rule Order. You are free to read up on the rest. Rule order simply means that all the rules are applied sequentially, and in order. So if there 2 or more rules that governed the colour of a <p> element, the rule that is applied last will be the one that is preferred.

<html>
    <head>
    ...
    <link rel="stylesheet" href="styles.css">
      <title> Page Title </title>
         <style>
            p{
               color: white;
            }
         </style>
   </head>
   <body>
	<p> This text is white </p>
	<p style="color: red;"> This text is RED! </p>
	<p> This text is back to white :) </p>
   </body>
<html>

Common CSS properties

Now that you are familiar with the general syntax, here are some common properties you can begin experimenting with:

Here is a list of more, but not all, properties.

SWE Fundamentals Starter Code

Take a look at index.html from the fundamentals-starter-code.

Look for the code from <body> onwards, and notice that some HTML elements have IDs and Classes associated with them.

<h1 id="header">🚀 SWE Fundamentals 🚀</h1>

<!-- 
  The <div> tag defines a division or a section in an HTML document, 
  and is commonly use as a "container" for nested HTML elements. 
-->

<div class="container">
  <!-- The <p> tag defines a paragraph element. -->
  <p>Input:</p>

  <!-- 
    The self-closing <input /> tag represents a field for a user 
    to enter input. 
  -->

  <input id="input-field" />

  <!-- 
    The self-closing <br /> tag represents a line break - 
    a line's worth of spacing before displaying the next element. 
  -->

  <br />

  <!-- The <button> tag represents.. you guessed it! a button. -->

  <button id="submit-button">Submit</button>

  <p>Output:</p>

  <div class="output-div" id="output-div"></div>
</div>

The code within <script> tags reference some of these HTML elements, and define the logic that has been associating the Submit button and input/output fields to the main function. We will soon take a closer look at the syntax and concepts that make this work.

Exercise

  1. Be creative! Explore! Express yourself!

Previous10.1 HTMLNext10.3: The Document Object Model

Last updated