CSS Overview
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation and visual styling of HTML documents.
To implement CSS within an HTML document, place the code inside a <style> tag located beneath the <title> element:
<title>CSS Basics</title>
<style>
/* selector {} */
p {
/* CSS property */
color: red;
}
</style>
<p>Styling with CSS</p>
Incorporating CSS into Web Pages
-
Embedded Stylesheets: Ideal for learning purposes, CSS is placed directly within the
<style>tags. -
External Stylesheets: Preferred in development workflows, CSS is stored in separate .css files and linked via the
<link>element: ``` -
Inline Styles: Applied directly to individual elements through the
styleattribute, commonly used with JavaScript: ```
Selectors
Purpose: To locate and apply styles to specific HTML elements.
Element Selectors
Target elements by their tag name to apply uniform styling across all instances (e.g., p, h1, div, a, img):
<style>
p {
color: red
}
</style>
Class Selectors
Used for customized styling of elements:
- Define a class selector using a period followed by the class name (e.g.,
.highlight) - Apply the class to elements via the
classattribute
<style>
.highlight {
color: red;
}
.size-large {
font-size: 55px;
}
</style>
<!-- Applying classes -->
<div class="highlight size-large">Styled Content</div>
Best Practices:
- Name classes descriptively using hyphens for multi-word identifiers (e.g.,
news-header) - Avoid purely numeric or Chinese characters in class names
- Multiple classes can be applied to one element using space-separated values
ID Selectors
Primarily used with JavaScript interactions rather than general styling:
- Defined with a hash symbol followed by the ID name (e.g.,
#unique-element) - Applied to an element using the
idattribute
<style>
#unique-element {
color: red;
}
</style>
<div id="unique-element">Unique Content</div>
Universal Selector
Applies styles to every element on the page:
* {
color: red;
}
Box Model Properties
Objective: Create styled containers using appropriate selectors.
| Property | Description |
|---|---|
width |
Sets the element's width |
height |
Sets the element's height |
background-color |
Defines the background color |
<head>
<style>
.box-primary {
width: 100px;
height: 100px;
background-color: red;
}
.box-secondary {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box-primary">First Box</div>
<div class="box-secondary">Second Box</div>
</body>
Typography Controls
Font Size
Controlled using the font-size property with pixel units being most common on desktop sites:
p {
font-size: 30px;
}
Font Weight
Determines text thickness:
| Numeric Values | Keyword Equivalents |
|---|---|
| Normal: 400 | Normal: normal |
| Bold: 700 | Bold: bold |
/* Regular weight */
font-weight: 400;
/* Bold weight */
font-weight: 700;
Font Style (Italicization)
Controls text slant:
normal: Upright textitalic: Slanted appearance
<head>
<style>
em {
font-style: normal;
}
div {
font-style: italic;
}
</style>
</head>
<body>
<em>Originally Italic</em>
<div>Regular Div</div>
</body>
Line Height
Manages vertical spacing between lines of text:
- Pixel-based values (e.g.,
30px) - Multiples of current font size (e.g.,
2)
line-height: 30px;
/* Twice the font size */
line-height: 2;
Measurement spans from top-to-top or bottom-to-bottom of consecutive lines.
Vertical Centering Technique
Achieve single-line vertical alignment by matching line-height to container height:
<head>
<style>
.centered-text {
height: 100px;
background-color: antiquewhite;
line-height: 100px;
}
</style>
</head>
<body>
<div class="centered-text">Centered Text</div>
</body>
Font Families
Specify typefaces using font-family:
font-family: KaiTi;
/* Multiple fallback fonts */
font-family: Microsoft YaHei, Heiti SC, Tahoma, Arial, Hiragino Sans GB, "\588B\4F53", sans-serif;
Multiple font names can be specified separated by commas. Execution follows left-to-right priority order. Always end with a generic family like sans-serif.
Shorthand Font Property
Combine multiple typography settings in one declaration:
div {
font: italic 700 30px/2 KaiTi;
}
Order must be maintained: [style] [weight] [size]/[line-height] [family]. Both size and family are mandatory.
body {
font: 12px/1.5 Microsoft YaHei, Heiti SC, Tahoma, Arial, Hiragino Sans GB, "\588B\4F53", sans-serif;
color: #666;
}
Text Indentation
Create paragraph indentation using text-indent:
- Pixels (
20px) - Em units relative to font size (
2em)
p {
font-size: 30px;
text-indent: 2em;
}
Text Alignment
Control horizontal positioning of content:
| Value | Effect |
|---|---|
left |
Left-aligned (default) |
center |
Centered |
right |
Right-aligned |
Aligning Text Content
<head>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Centered Heading</h1>
</body>
Aligning Images
Apply alignment to parent container:
<style>
.container {
text-align: center;
}
</style>
<div class="container">
<img src="./images/sample.jpg" alt="">
</div>
Text Decoration
Add/remove stylistic lines around text:
| Value | Description |
|---|---|
none |
No decoration |
underline |
Underline |
line-through |
Strikethrough |
overline |
Overline |
<style>
a {
text-decoration: none;
}
.decorated {
text-decoration: underline;
}
</style>
<div class="decorated">Underlined Text</div>
<a href="#">Link Without Underline</a>
Text Color
Various methods to define text colors:
| Type | Format | Examples | Usage |
|---|---|---|---|
| Keywords | Color names | red, green, blue | Testing/Learning |
| RGB | rgb(r, g, b) | rgb(0,255,0) | Educational |
| RGBA | rgba(r, g, b, a) | rgba(0,0,0,0.6) | Development (transparency) |
| Hexadecimal | #RRGGBB | #00FF00, #0f0 | Design implementation |
<style>
h2 {
color: #0fe;
}
</style>
<h2>Colored Header</h2>
Browser Developer Tools - Chrome
Purpose: Inspect and debug web pages to identify and resolve issues.
- Opening DevTools:
- Right-click anywhere on page → Inspect
- Press F12 key
- Using DevTools:
- Invalid properties show yellow warning icons
- CSS properties have checkboxes indicating active/inactive status