1 CSS Basics
1.1 Introduction to CSS
1.1.1 Overview
After learning basic HTML tags and styling, the next technology to master infront-end development is CSS.
HTML attributes can adjust some styles, but the effects are often limited. We prefer to write styles inside the <style> tag for more control and aesthetics. This is made possible by CSS. So, what exactly is CSS?
If HTML is the "natural face" of a web page, then CSS is the "makeup artist" that makes the page look more beautiful!
CSS (Cascading Style Sheets, abbreviated as CSS) is a computer language used for styling and laying out web pages. It tells the browser how to render page elements—for example, adjusting font, color, size, borders, and spacing.
- Cascading means that style information can be specified in multiple ways: on a single element, in the page header, or in an external CSS file. The order of these rules affects the final style (explained in the introduction).
- Style refers to a rich set of appearance options. For example, you can set borders, define the distance between borders and content, and control spacing between elements.
Brief History of CSS (for background knowledge)
- CSS1: In 1994, Hkon Wium Lie first proposed the idea of CSS. He collaborated with Bert Bos, who was designing the Argo browser, and together they created the initial version of CSS. The W3C released the first CSS specification in December 1996.
- CSS2: In 1998, the W3C released CSS2, which is now supported by mainstream browsers. It builds on CSS1 and includes all its features, with many new and improved properties.
- CSS3: In December 2005, the W3C began work on CSS3, which follows a modular development approach. It has no fixed release date; instead, feature modules are released periodically.
Reference image: CSS History
1.1.2 Structure of CSS
CSS is a rule-based language: you define style rules for specific elements in your web page. This involves two concepts: selectors and declarations.
- Selectors: Methods for specifying which HTML elements to style, such as by tag name, class, or id.
- Declarations: Written as
property: value;, these set style properties for the selected elements.- Property: An aspect of the element, e.g.,
font-size,width,background-color. - Value: The specific setting for that property.
- Property: An aspect of the element, e.g.,
Syntax:
selector {
property: value;
property: value;
}
Example:
h1 {
color: red;
font-size: 5px;
}
2 Basic Syntax
2.1 CSS Inclusion Methods
2.1.1 Inline Styles
Inline styles are defined directly in an element's style attribute. They affect only that single element and are rarely used due to poor maintainability.
Syntax:
<tag style="property: value; property: value;">Content</tag>
Example:
<h1 style="color: blue; background-color: yellow; border: 1px solid black;">
Hello World!
</h1>
Effect:
2.1.2 Internal Stylesheet
Internal stylesheets are placed inside a <style> tag within the HTML <head>.
Syntax:
<head>
<style>
selector {
property: value;
property: value;
}
</style>
</head>
Example:
<head>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
Effect:
Internal styles only apply to the current page and cannot be reused across multiple pages.
2.1.3 External Stylesheet
External stylesheets are the most common and useful method. CSS is written in a separate .css file, linked to the HTML via the <link> tag inside <head>.
Syntax:
<link rel="stylesheet" href="css-file-path">
rel="stylesheet"indicates the relationship.hrefspecifies the path to the CSS file.
Example:
- Create
styles.css:
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
- Link in HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Effect:
You can place the CSS file in a folder (e.g., css/styles.css) and adjust the path accordingly.
Priority of Styles (highest to lowest):
- Inline styles
- Internal stylesheets
- External stylesheets
- Browser defaults
2.2 Comments
Use /* comment */ to add comments in CSS.
Example:
/* Style for h1 */
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
2.3 Selectors
Selectors are crucial in CSS. They target HTML elements to apply styles.
Types of Selectors:
| Type | Name | Symbol | Description | Example |
|---|---|---|---|---|
| Basic | Element | tag name | Matches by tag name | div |
| Basic | Class | . |
Matches by class attribute | .center |
| Basic | ID | # |
Matches by id attribute | #username |
| Attribute | Attribute | [] |
Matches by attribute | [type] |
| Pseudo-class | Pseudo-class | : |
Adds special effects | a:hover |
| Combinator | Descendant | space | Matches all descendants of the first selector | .top li |
| Combinator | Child | > |
Matches direct children of the first selector | .top > li |
| Combinator | Sibling | ~ |
Matches all siblings after the first selector | .l1 ~ li |
| Combinator | Adjacent sibling | + |
Matches the immediate sibling after the first selector | .l1 + li |
| Universal | Universal | * |
Matches all elements | * |
2.3.1 Basic Selectors
1) Element Selector
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
li {
background-color: aqua;
}
2) Class Selector
<div>
<ul>
<li class="ulist l1">List item 1</li>
<li class="l2">List item 2</li>
<li class="l3">List item 3</li>
</ul>
<ol>
<li class="olist l1">List item 1</li>
<li class="olist l2">List item 2</li>
<li class="olist l3">List item 3</li>
</ol>
</div>
.l2 {
background-color: aqua;
}
.olist.l2 {
color: wheat;
}
3) ID Selector
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
</div>
#two {
background-color: aqua;
}
4) Universal Selector
* {
background-color: aqua;
}
2.3.2 Attribute Selector
<ul class="l1">
<li>List item 1</li>
</ul>
<ul class="l2">
<li id="four">List item 1</li>
</ul>
Syntax examples:
[attribute] { } /* Select elements with the attribute */
tag[attribute] { } /* Select specific tags with the attribute */
tag[attribute='value'] { } /* Select tags with exact attribute value */
2.3.3 Pseudo-class Selector
Pseudo-classes select elements in a specific state, like the first child or a hovered link.
Syntax:
selector:pseudo-class {
property: value;
}
Common link pseudo-classes:
a:link { color: #FF0000; } /* Unvisited link */
a:visited { color: #00FF00; } /* Visited link */
a:hover { color: #FF00FF; } /* Mouse over link */
a:active { color: #0000FF; } /* Selected link */
Order matters:
link,visited,hover,active.
Example:
<a class="red" href="http://example.com">Example</a>
a.red:visited {
color: red;
}
2.3.4 Combinator Selectors
HTML structure:
<div>
<ul class="l1">
<li>List item 1</li>
<li>List item 2</li>
<ul class="l2">
<li>List item 1</li>
<li>List item 2</li>
</ul>
</ul>
</div>
Descendant selector:
.l1 li {
background-color: aqua;
}
Child selector:
.l1 > li {
background-color: aqua;
}
Sibling selector:
.l1 ~ li {
background-color: aqua;
}
Adjacent sibling selector:
.l1 + li {
background-color: aqua;
}
2.4 Summary
- CSS can be included inline, internally, or externally (recommended).
- Use
/* */for comments. - Selectors are key:
- Basic selectors: element, class, ID.
- Attribute selectors: based on attributes.
- Pseudo-class selectors: element states (e.g., hover).
- Combinator selectors: descendant, child, sibling, adjacent.
3 CSS Case Study: News Page
3.1 Case Preview
3.2 Case Analysis
3.2.1 Semantic Tags
HTML5 provides semantic elements for better document structure:
| Tag | Purpose |
|---|---|
<header> |
Introduction or navigational aids |
<nav> |
Navigation links |
<article> |
Self-contained content |
<footer> |
Footer information |
Example structure:
<header>
<nav>...</nav>
</header>
<article>...</article>
<footer>...</footer>
3.2.2 Common CSS Properties
| Category | Property | Description |
|---|---|---|
| Border | border |
Shorthand for border width, style, color |
| Border | border-top, border-bottom, border-left, border-right |
Individual borders |
| Border | border-radius |
Rounded corners |
| Text | color |
Text color |
| Text | font-family |
Font type |
| Text | font-size |
Font size (px, em) |
| Text | text-decoration |
Underline, overline, line-through |
| Text | text-align |
Horizontal alignment (left, right, center, justify) |
| Text | line-height |
Line spacing |
| Text | vertical-align |
Vertical alignment |
3.3 Technologies Used
- Semantic tags:
<header>,<footer>,<article>,<nav> - Common CSS properties for styling
3.4 Implementation Steps
- Create the initial HTML page and copy image assets.
- Create an external CSS file and link it.
- Style the header:
- Top bar
- Navigation bar
- Style the main content:
- Left sidebar (sharing)
- Central article area
- Right sidebar (advertisement)
- Style the footer.
4 CSS Case Study: Login Page
4.1 Case Preview
4.2 Case Analysis
4.2.1 Table Tags
1) What is a Table?
A table is a structured dataset of rows and columns.
2) Table Tags
| Tag | Purpose |
|---|---|
<table> |
Defines a table |
<tr> |
Table row |
<td> |
Table cell (data) |
<th> |
Table header cell (bold, centered) |
Example:
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
3) Spanning Rows and Columns
Use colspan and rowspan to merge cells.
<table>
<tr>
<th rowspan="2">Group</th>
<th colspan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<tr>
<td rowspan="2">G1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
4) Table Structure Tags (optional)
<thead>: Header section<tbody>: Body section<tfoot>: Footer section
4.2.2 Common CSS Properties
1) Background
background-color: Sets a solid color.background-image: Uses a URL to set an image.background-repeat: Controls tiling (no-repeat,repeat-x,repeat-y,repeat).
body {
background-color: #567895;
background-image: url('bg.jpg');
background-repeat: no-repeat;
}
2) Outline
outline draws a line around an element outside the border.
input {
outline: dotted;
}
Set to none to remove the default outline.
3) Display
display: inline— Element is inline (no width/height).display: block— Element is a block (takes full width).display: inline-block— Inline but can have width/height.display: none— Hides the element.
4.2.3 Box Model
Every element is a box. The box model consists of:
- Content: The element's content
- Padding: Space between content and border
- Border: The border itself
- Margin: Space outside the border
Basic Layout Example:
.big {
width: 200px;
height: 200px;
border: 2px solid blue;
padding: 30px;
}
.small {
width: 100px;
height: 100px;
margin: 30px;
}
Margin Shorthand:
- One value: all sides
- Two values: top/bottom, left/right
- Three values: top, left/right, bottom
- Four values: top, right, bottom, left
margin: 0 auto; centers a block element.
Padding Shorthand:
Same as margin.
4.3 Technologies Used
<div>elements for layout<form>and<table>for the form<input>and<button>- Background, font, and other CSS properties
4.4 Implementation Steps
- Set up the background.
- Create top, middle, and bottom sections.
- Top section: Logo and branding.
- Middle section:
- Use a table inside a form.
- Add table header (e.g., "Login").
- Add input fields and buttons.
- Bottom section:
- Layout for additional links.
- Add dividers, images, and text.
5 HTML Case Study: Website Deployment with Nginx
Deploy a website to a server so users can access it via a URL.
5.1 Case Preview
5.2 Case Analysis
5.2.1 Overview of Nginx
Nginx is a web server software. It can serve static files (HTML, CSS, JS) and also functions as a reverse proxy, load balancer, and mail proxy.
For this course, we focus on deploying static websites.
5.2.2 Using Nginx on Linux
1) Download Nginx
Go to nginx.org and download nginx-1.17.5.tar.gz.
2) Upload to Virtual Machine
Upload the file to the /home directory using SCP or similar.
3) Install Dependencies
yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel
4) Extract and Compile
tar -zxvf nginx-1.17.5.tar.gz -C /home
cd /home/nginx-1.17.5
./configure
make
make install
After installation, Nginx is in /usr/local/nginx.
5) Start the Server
cd /usr/local/nginx/sbin
./nginx # Start
./nginx -s stop # Stop
./nginx -s reload # Reload configuration
Open port 80:
# Edit iptables or firewall rules to allow port 80
Check if Nginx is runing:
ps -ef | grep nginx
6) Access in Browser
Enter the virtual machine's IP address (default port 80).
5.3 Implementation Steps
- Deploy the project files.
- Configure Nginx (
nginx.conf). - Access via browser.
5.4 Practical Steps
5.4.1 Deploy the Project
Create a directory for the project:
mkdir /home/toutiao
Upload project files (e.g., index.html, CSS, images) to /home/toutiao/.
5.4.2 Configure nginx.conf
Edit /usr/local/nginx/conf/nginx.conf to point to your project directory.
server {
listen 80;
server_name localhost;
location / {
root /home/toutiao;
index index.html index.htm;
}
}
5.4.3 Start Nginx with the Configuration
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
5.4.4 Access in Browser
- Visit
http://<vm-ip>to see the home page (e.g.,index.html). - Visit
http://<vm-ip>/login/login.htmlto navigate to the login page.