From c3dd2a6d44ef929e0832ce6dca53a818e6711218 Mon Sep 17 00:00:00 2001 From: Kamal Wickramanayake Date: Sat, 4 Jul 2026 14:35:25 +0530 Subject: Added CSS examples --- css/01-no-css/index.html | 37 +++++++ .../index.html | 33 ++++++ css/03-embedded-css-utility-classes/index.html | 79 +++++++++++++++ css/04-external-css/index.html | 33 ++++++ css/04-external-css/styles.css | 54 ++++++++++ css/05-classless-css/index.html | 40 ++++++++ css/06-css-units/images/hulftsdorp.jpg | Bin 0 -> 115681 bytes css/06-css-units/index.html | 111 +++++++++++++++++++++ 8 files changed, 387 insertions(+) create mode 100644 css/01-no-css/index.html create mode 100644 css/02-inline-styling-with-css-properties/index.html create mode 100644 css/03-embedded-css-utility-classes/index.html create mode 100644 css/04-external-css/index.html create mode 100644 css/04-external-css/styles.css create mode 100644 css/05-classless-css/index.html create mode 100644 css/06-css-units/images/hulftsdorp.jpg create mode 100644 css/06-css-units/index.html (limited to 'css') diff --git a/css/01-no-css/index.html b/css/01-no-css/index.html new file mode 100644 index 0000000..ef3fc84 --- /dev/null +++ b/css/01-no-css/index.html @@ -0,0 +1,37 @@ + + + + Retro Styled Pure HTML + + + + + + + + + +

+ +

Retro Native Styling

+ +

This layout uses structural tables and attributes to center and color the canvas rather than an external CSS document.

+ + + + + + +

+ Fun Fact: This page works identically in a modern browser and a browser from 1996! +

+ +

+ Minimalist footer note +

+ + + + diff --git a/css/02-inline-styling-with-css-properties/index.html b/css/02-inline-styling-with-css-properties/index.html new file mode 100644 index 0000000..d59c5ca --- /dev/null +++ b/css/02-inline-styling-with-css-properties/index.html @@ -0,0 +1,33 @@ + + + + + + Inline CSS Example + + + + +

+ Welcome to My Website +

+ + +

+ This paragraph is styled using inline CSS. The font size, color, line height, and alignment are controlled directly inside the HTML tag via the style attribute. +

+ + +

Special Offer!

Get access to exclusive web development content today.

+ + + +

+ + + + diff --git a/css/03-embedded-css-utility-classes/index.html b/css/03-embedded-css-utility-classes/index.html new file mode 100644 index 0000000..17eb0ba --- /dev/null +++ b/css/03-embedded-css-utility-classes/index.html @@ -0,0 +1,79 @@ + + + + + + Embedded CSS Example + + + + +

Welcome Back

This is a reusable embedded CSS setup. Both buttons below share the base .btn rule, but use different modifiers.

+ +

+ Sign In + Learn More +

+ + + + 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 @@ + + + + + + Reusable CSS Demo + + + + + +

Reusable Components Example

+ + +

Product Feature A

This layout uses the primary action button style.

+ +

Product Feature B

This layout reuses the exact same card wrapper but switches to a secondary button.

+ +

The beauty of CSS design

Visit CSS Zen Garden and try changing designs.

+ + + 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; +} + diff --git a/css/05-classless-css/index.html b/css/05-classless-css/index.html new file mode 100644 index 0000000..6f72bcb --- /dev/null +++ b/css/05-classless-css/index.html @@ -0,0 +1,40 @@ + + + + + + Beautiful HTML-Only Page + + + + + +

🚀 Built with Pure HTML

Zero custom CSS files were written to create this look.

+ +

Semantic Layouts Work Best

Classless frameworks look at your semantic HTML tags. They add consistent padding, clean typography, and standard responsive widths automatically.

This page is styled using new.css.

+ +

Interactive Elements

Notice how inputs and buttons are automatically styled:

+ +

+ + + + + + diff --git a/css/06-css-units/images/hulftsdorp.jpg b/css/06-css-units/images/hulftsdorp.jpg new file mode 100644 index 0000000..ab88942 Binary files /dev/null and b/css/06-css-units/images/hulftsdorp.jpg differ diff --git a/css/06-css-units/index.html b/css/06-css-units/index.html new file mode 100644 index 0000000..6b6b872 --- /dev/null +++ b/css/06-css-units/index.html @@ -0,0 +1,111 @@ + + + + + + Modern CSS Units Demo + + + + +

Responsive Layout with CSS Units

This section uses vh for height and vw for width. The typography uses rem and ch.

+ +

The Card Heading

This card's padding and margins scale relative to its own font-size using the em unit. The card width is controlled by percentages and absolute pixels.

+ +

+ + + + -- cgit v1.2.3