diff options
| author | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-04 14:35:25 +0530 |
|---|---|---|
| committer | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-04 14:35:25 +0530 |
| commit | c3dd2a6d44ef929e0832ce6dca53a818e6711218 (patch) | |
| tree | 66d7254ef8534a0e23b50f9d1fce41cb36a8e6ab /css/04-external-css | |
| parent | 975dccebfcf51878b790a765d8e92ebcad895a24 (diff) | |
Added CSS examples
Diffstat (limited to 'css/04-external-css')
| -rw-r--r-- | css/04-external-css/index.html | 33 | ||||
| -rw-r--r-- | css/04-external-css/styles.css | 54 |
2 files changed, 87 insertions, 0 deletions
diff --git a/css/04-external-css/index.html b/css/04-external-css/index.html new file mode 100644 index 0000000..872a05b --- /dev/null +++ b/css/04-external-css/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Reusable CSS Demo</title> + <!-- Linking the separate CSS file --> + <link rel="stylesheet" href="styles.css"> +</head> +<body> + + <h1>Reusable Components Example</h1> + + <!-- Reusing the .card class and different button variations --> + <div class="card"> + <h2>Product Feature A</h2> + <p>This layout uses the primary action button style.</p> + <button class="btn btn-primary">Accept</button> + </div> + + <div class="card"> + <h2>Product Feature B</h2> + <p>This layout reuses the exact same card wrapper but switches to a secondary button.</p> + <button class="btn btn-secondary">Learn More</button> + </div> + + <div class="card"> + <h2>The beauty of CSS design</h2> + <p>Visit <a href="https://csszengarden.com/" target="_blank">CSS Zen Garden</a> and try changing designs.</p> + </div> +</body> +</html> + diff --git a/css/04-external-css/styles.css b/css/04-external-css/styles.css new file mode 100644 index 0000000..5296453 --- /dev/null +++ b/css/04-external-css/styles.css @@ -0,0 +1,54 @@ +/* 1. Global design tokens (Variables) */ +:root { + --primary-color: #3498db; + --secondary-color: #2ecc71; + --text-dark: #2c3e50; + --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + --border-radius: 8px; +} + +/* 2. Base Element Resets */ +body { + font-family: var(--font-main); + color: var(--text-dark); + line-height: 1.6; + padding: 20px; +} + +/* 3. Reusable Component Classes */ +.card { + border: 1px solid #e0e0e0; + border-radius: var(--border-radius); + padding: 20px; + margin-bottom: 15px; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); +} + +.btn { + display: inline-block; + padding: 10px 20px; + font-size: 1rem; + font-weight: bold; + text-align: center; + text-decoration: none; + border-radius: var(--border-radius); + border: none; + cursor: pointer; + transition: opacity 0.2s ease; +} + +.btn:hover { + opacity: 0.9; +} + +/* 4. Reusable Modifier Classes */ +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-secondary { + background-color: var(--secondary-color); + color: white; +} + |