Open CheatSheet Back To List Next Tutorial

CSS and Bootstrap Introduction (Video Tutorial)

Video Timestamps
0:00 Where to place CSS and order of precedence. 3:31 CSS Terms/Definitions 5:24 Introduction to Bootstrap and loading the Bootstrap CDN.

CSS and Bootstrap Introduction

Intro to CSS and Bootstrap

Build a Blog Site: This is the second part of the build a Blog Site tutorial series.
The focus of this tutorial to introduce CSS and Bootstrap.

Finished Code: The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example. There is a separate version with the finished code for each tutorial.

Live Server: If you are using VS Code as your text editor and have the Live Server extension installed, you can launch a local web server from the Editor.
  • Close any prior Live Server sessions by right-clicking in the editor, then select Stop Live Server.
  • If you are using the code from the GitHub link above, go to the .vscode/settings.json file and change the liveServer.settings.root value to the appropriate version: "liveServer.settings.root": "/v2-css-bootstrap" 
  • Right click in the html page and select "Open with Live Server". 

Written and Video tutorial: There are both a video and written version of each tutorial. For the HTML-CSS tutorial series the video and written versions have a different focus. The video tutorials are focused on the blog site project. The written tutorial is focused on the all the subtopics within the CheatSheet major topic.

CheatSheet: Part of the objective of this tutorial series is to become familiar with the CheatSheet so you can use it for quick reference going forward. As such, it is recommended that you review the CheatSheet category that aligns with this tutorial.


CSS Placement and Cascade Order

[0:00 Video timestamp]

Web browsers have default style rules for each HTLM element. They are purposely very plain. To customize the style rules, you can add a style attribute to the element, or add a class attribute and to add classes to the attribute. You apply style rules to each class in an internal or external stylesheet.

The preferred method is to assign style rules to classes in an external stylesheet, and add classes to elements. This separates your CSS into separate files from your HTML, and allows you to use the same classes across multiple html pages.

Internal style sheets may be useful in development to test styles on specific page.
Inline styles can also be used in development to test styles.
Let's go through each option.

1. Inline styling

You can add style rules directly in an element by adding a style attribute and assigning one or more style rules to it.

Example: 
<h1 style="background-color: blue; color: white">What color am I?<h1>

Above we added the style attribute to a heading 1 element, and set the background-color property to blue, and color property to white.

If you put that in the index.html page, and view it in the browser, you will see that the background color of the element is blue and the text color is white. 

2. Internal Stylesheet

Instead of adding inline style attributes to your HTML elements, you can add the class attribute with one or more classes.
Then assign one or more style rules to each class in a stylesheet.
An internal stylesheet is placed inside style tags in the html document's head element.

<head>
<style type="text/css">
  ...
  .color-me { 
    background-color: blue;
    color: white; 
  }
</style>
</head>
<body>
  <h1 class="color-me">What color am I?</h1>
  ...
</body>

In this example we get the same result as before. The h1 heading is styled with a blue background and white text. Only this time we can apply the same class to multiple elements on the same page if we want to. 

If you save the file and go to the web page, you will see that the header is still in a blue background with white text.

3. External Stylesheet

The recommended, and most commonly used CSS placement is in an external stylesheet. 
Our project has a stylesheets folder with a styles.css file inside it. The folder and file names can be any names you want, but the file extension must be .css.

stylesheets/styles.css
.color-me { 
  background-color: blue;
  color: white; 
}

In the HTML file's head element, use the link element to access the external stylesheet.
index.html
<head>
  <link href="/stylesheets/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="color-me">What color am I?</h1>
  ...
</body>

Save the file and go to the web page, and the header should still be in a blue background with white text.

Cascade Order / Precedence

If there are multiple style rules for the same CSS property (e.g., color) applied to the same element, the order of priority is:
  1. Style rule with !important appended has the highest priority. Example: 
  2. Inline style - inside an HTML element (highest priority).
  3. Stylesheet (internal or external).
    • If there are multiple stylesheets, the last has higher priority.
  4. Browser default (lowest priority).

Using the below example:
stylesheets/styles.css
.green { color: green; }

index.html
<head>
  <link href="/stylesheets/styles.css" rel="stylesheet">
</head>
<body>
  <h1 style="color: blue;" class="green">What color am I?</h1>
</body>

  • The h1 text will be blue because inline style rules take precedence over internal or external stylesheets. 
  • If you append !important to the color property in the external stylesheet, it will take precendence and the text will be green: .green { color: green !important; }


CSS Terms/Definitions

[3:31 Video timestamp]

  • CSS: stands for Cascading Style Sheets.
  • Style rule: a style rule sets the style for a specified HTML element. 
Below is an example of a style rule. It is placed inside an internal or external stylesheet:
.highlight { 
  background-color: yellow;
  font-size: 14px;
}

  • A style rule has two main parts: 
    • Selector: the HTML tag, class, id, etc. you want to style. 
      • In the above example, the selector is the highlight class.
    • Declaration: specifies how content described by the markup looks. 
      • The above declaration gives the element a yellow background and font size of 14 pixels.
  • A declaration consists of:
    • Property: the style attribute you want to change. Style attributes affect how the user's computer displays text and graphics. In the example, background-color and font-size are the properties.
    • Value: is what you want the style attribute to be. In the example yellow and 14px are the values.


Syntax and style guidelines:

  • User lower case letters for tags, id names, class names, properties. 
  • Separate multiple words with hyphens.
  • Use semicolons after every declaration.
  • Use single quotes: font-family: 'Times New Roman';

  • For style rules use separate lines for each property:
body {
  font-size: 14px;
  background-color: lightgrey; 
}
  • Optionally, put short style rules on one line:
body { font-size: 14px; background-color: lightgrey; }

  • Comments: /* Comments here */

Selectors

Stylesheet style rules generally use classes as selectors, as with the above .highlight style rule.
Tags and ids are also frequently used as selectors.

Basic Selectors:
Class:
  • Use classes when the same style will be applied to multiple elements.
  • Add the class attribute to the opening HTML tag.
    Example: <span class="highlight">
  • In the CSS stylesheet, create the style rule with a period . followed by the class name as the selector. 
     Example: .highlight { background-color: yellow; font-size: 14px; }
Tag:
  • Use tags to set the general styles for your site rather than the browsers' default CSS. 
    Example: body { font-size: 14px }
ID:
  • Use IDs when the style will be unique to one element in the HTML document.
  • Add the ID attribute to the opening HTML tag. 
    Example: <h1 id="article-title">
  • In the CSS stylesheet, create the style rule with a hash sign # followed by the id name as the selector. 
    Example: #article-title{ text-align: center; color: navy; }

Grouping Selectors:
To apply a style rule to multiple selectors, separate the selectors with commas:
selector1, selector2 { declarations }

For example, the below makes the text color of all the heading tags MidnightBlue.
h1, h2, h3, h4, h5, h6 { 
  color: MidnightBlue; 
}

Combine Selectors:
There may be instances where you want to combine selectors to where it will only apply the style rule if it satisfies both selectors. 
To apply a class only if it is set in a specific tag, put the selectors one after the other with no space or comma between them:
tag-name.class-name { declarations }

For example, the below applies the highlight class only if it is in a span element:
span.highlight {
  background-color: yellow;
  font-size: 14px;
} 

Descendant Combinator:
You can apply style rules to a selector only if it is a descendant of another selector. Separate the selectors with a space:
selector1 selector2 { declarations }

For example, the below HTML document has two paragraph elements. 
<p>This uses regular size font.</p>
<div class="articles>
  <p>This uses 14px sized font.</p>
</div>

To change the font size only for paragraphs descending from an element with class articles, use the below style rule:
.articles p { 
  font-size: 14px;
}

Pseudo classes (: delimiter):
  • Selects elements based on state information, such as when the user hovers their mouse over the element or focuses in the element.
  • The full list of pseudo classes is at: MDN:Pseudo-classes
  • The syntax is: selector:pseudo-class { property: value; }
  • For example to change the background color of a paragraph element to LightGray when you hover over it, add the below style rule to your stylesheet: 
p:hover { background-color: LightGray } 


Introduction to Bootstrap and loading the Bootstrap CDN

[5:24 Video timestamp] 

Bootstrap Website: getbootstrap.com
  • The website home page has the download and CDN information.
  • The website Docs link has excellent and concise documentation on Bootstrap classes.

Bootstrap is a front-end framework with an extensive list of classes and JavaScript.
It is popular with web developers who that don't specialize in design. 
It was originally developed by Twitter and then was open sourced.

There are two ways to incorporate Bootstrap into your website. 
  1. Download their CSS stylesheet and put it in our project directly, 
  2. Or use their Content Delivery Network by adding a link to their stylesheets on the web. 
Get these from their website home page.

You can include the Bootstrap stylesheet followed by your own stylesheet for your own custom style rules.

<head>
  ...
  /* Paste the CSS CDN link then the link(s) to your own CSS file(s) */
  <link rel="stylesheet" href="CDN URL HERE" integrity="STRING" crossorigin="anonymous">
  <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
  ...
  <script src="CDN URL HERE" integrity="STRING" crossorigin="anonymous"></script>
</body>

In the Blog Site example project, get the CDN links from the website and paste them in the page head elements.

Change the h1 class to the bootstrap class for green which is text-success.

Save it, and the h1 heading text should now be green. 
Open CheatSheet Back To List Next Tutorial