Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

HTML & CSS IntroductionChapter 8. CSS Basics

Where To Type CSS?

Where To Type CSS?

How to Choose Where to Add CSS

There are three major locations where we can type CSS code. As CSS adds visual design to HTML elements, the CSS code has to be recognized by the HTML document. CSS code can be typed within an HTML file or in a separate file. When you use a separate file for CSS coding, you need to add a link (file path) to the CSS file in the HTML file.

1. CSS document (External CSS)

The most common approach to CSS coding is to create a separate CSS document and specify the file path to the CSS file in the HTML document.

Here are the key points for this approach:

  • Create a CSS file with .css extension.
  • Add a link to the CSS file in the HTML document using the <link> tag in the head section of the HTML document.

You can add a link to the same CSS file in multiple HTML documents. When you have more than one web page with the same style, this approach is the most effective as it allows you to maintain design consistency across the website.

Example
External CSS example

IdeaTips: CSS document location

For the external CSS approach, you need to make sure that the CSS file path is properly written. In the example above, we were assuming that the test.css file is located under the css directory in the same directory where the HTML file is located like shown in the illustration below.

CSS document location in a project directory tree

2. Head section of HTML document (Internal CSS)

The second approach is to type CSS code in the <head> section of the HTML document using the <style> tag. In this approach, the CSS code is only applied to the HTML document with the <style> tag. When you want to customize the design of a specific HTML document, this approach may be effective.

Example
Internal CSS example

3. HTML tag (Inline CSS)

The last approach is to type CSS code directly in the start tag of the HTML element that you want to style using the style attribute. In this approach, the CSS code is only applied to the specific HTML element.

Example
Inline CSS example

Practice

Objective:
Type CSS code in different locations

As we have already practiced the second approach (type CSS code in the head section of the HTML document) in the previous practice, we'll cover the first and third approaches in this practice.

1. Add CSS code to a specific element (the inline style sheet approach)

  • Open the chapter8.html file.
  • Update the <h1> tag like in the code below.
chapter8.html
<h1><span style="color:red">Chapter 8.</span> CSS Basics</h1>

2. Check the result with a browser

  • Open chapter8.html with a browser.
  • You can see that the font color of the text Chapter 8. changed to red.
How the inline style sheet works

3. Create a new CSS file and edit the file (the external style sheet approach)

  • First, create a new directory named css under the project directory.
  • Create a new file named practice.css under the css directory.
  • Open the file in VS Code and add the following CSS code to the file.
practice.css
body{
  background-color: azure;
}

4. Add a link to the CSS file in the HTML file

Add a link to the practice.css file in the head section of chapter8.html

chapter8.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/practice.css">
<title>8. CSS Basics</title>

5. Check the result with a browser

Open chapter8.html with a browser (make sure that both html and css files are saved).
You can see that the background of the document changed to azure (light blueish color).

How the external style sheet works

link


You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Implementing Radio Buttons and Checkboxes in Forms

Radio Button and Checkbox

The Importance of Comments in CSS Documents

Comments in CSS Document

How to Design a Website - HTML & CSS Introduction

Designing Websites

CSS Scroll-Behavior

CSS Scroll-Behavior

App UI Design Principles

App UI Design Principles

Implementing Radio Buttons and Checkboxes in Forms

Radio Button and Checkbox

The Importance of Comments in CSS Documents

Comments in CSS Document

How to Design a Website - HTML & CSS Introduction

Designing Websites

CSS Scroll-Behavior

CSS Scroll-Behavior

App UI Design Principles

App UI Design Principles

Tags:

External CSS

Internal CSS

Inline CSS

HTML & CSS Introduction
Course Content

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;