Welcome to the CSS3 Styling & Modern UI Architecture course!
1. What is CSS3?
2. CSS Syntax Rule Structure
A CSS rule consists of a selector and a declaration block:
⊞Code Example
/* Selector targeting all <h1> elements */
h1 {
color: #04AA6D; /* Property: Value */
font-size: 32px;
text-align: center;
}
3. The 3 Methods to Apply CSS
⊞HTML5 Web Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Syntax Demo</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: #cbd5e1;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Hello CSS3 Styling!</h1>
<p>Learn responsive layout design from scratch.</p>
</body>
</html>
4. Core CSS Selectors
⊞Code Example
/* Universal Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Class Selector */
.card {
background-color: #0c1328;
border: 1px solid #1e293b;
border-radius: 12px;
padding: 24px;
}
/* ID Selector */
#hero-section {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}