MORE CSS PROPERTIES

Mastering CSS Properties: From Basic to Advanced

Lesson Overview

This comprehensive CSS lesson guides learners through essential to advanced styling properties in CSS. By the end, you will understand and be able to apply a wide range of CSS techniques for responsive, visually appealing web design.

📌 Section 1: Introduction to CSS

CSS (Cascading Style Sheets) is a language used to style, format, and layout HTML elements on a webpage. While HTML provides the structure and content (such as headings, paragraphs, images, and links), CSS is what brings the visual design to life — it controls the color, spacing, fonts, alignment, positioning, animations, and overall visual appearance of the content.

CSS enables developers to:

• Apply consistent styling across multiple pages by linking to a single stylesheet.

• Separate content from presentation, improving code maintainability and readability.

• Create responsive layouts that adapt to different screen sizes and devices.

• Use advanced features like animations, transitions, Flexbox, and Grid to build modern, dynamic web interfaces.

In essence, CSS transforms plain HTML into engaging, user-friendly, and professional-looking web experiences.

Syntax:

Example:

🎯 Section 2: Basic CSS Properties

1. color

Explanation:

• p is the selector, targeting all <p> (paragraph) elements in the HTML document.

• color is the property, specifying the text color.

• red is the value, which sets the text color of all paragraphs to red.

Effect: Every <p> element on the webpage will display its text in red.

2. background-color

Explanation:

• div is the selector, targeting all <div> elements.

• background-color is the property, which sets the background color of the element.

• lightgrey is the value, assigning a light grey background to the element.

Effect: All <div> elements on the page will have a light grey background.

3. font-size

Explanation:

• h1 is the selector, targeting all <h1> heading elements.

• font-size is the property, which defines the size of the text.

• 32px is the value, setting the text size to 32 pixels.

Effect: Every <h1> element on the page will display its text at a size of 32 pixels.

4. margin

Explanation:

• h1 is the selector, targeting all <h1> elements.

• margin is the property, which defines the space outside the element’s border.

• 20px is the value, applying 20 pixels of space on all four sides (top, right, bottom, and left).

Effect: Every <h1> heading will have 20px of space around it, creating separation from other elements.

5. padding

Explanation:

• p is the selector, targeting all <p> (paragraph) elements.

• padding is the property, which defines the space inside the element, between its content and its border.

• 15px is the value, applying 15 pixels of internal space on all four sides (top, right, bottom, and left).

Effect: Each paragraph will have 15px of space inside the element’s border, pushing the text inward and creating visual breathing room.

6. border

Explanation:

• div is the selector, targeting all <div> elements.

• border is the property that defines the border around the element.

• 1px is the width of the border.

• solid is the style of the border (a continuous line).

• black is the color of the border.

Effect: Every <div> will have a thin, solid black border surrounding it.

7. text-align

Explanation:

• h1 is the selector, targeting all <h1> heading elements.

• text-align is the property, which sets the horizontal alignment of text.

• center is the value, aligning the text to the center of its container.

Effect: All <h1> headings will have their text centered horizontally within their parent element.

⚙️ Section 3: Intermediate CSS Properties

1. width and height

Explanation:

• div is the selector, targeting all <div> elements.

• width: 300px; sets the horizontal size of the <div> to 300 pixels.

• height: 200px; sets the vertical size of the <div> to 200 pixels.

Effect: Every <div> will be displayed with a fixed size of 300px wide and 200px tall.

2. box-shadow

Explanation:

• button is the selector, targeting all <button> elements.

• box-shadow is the property that adds a shadow around the element.

• 2px 2px are the horizontal and vertical offsets of the shadow.

• 10px is the blur radius, making the shadow soft.

• rgba(0, 0, 0, 0.5) sets the color of the shadow — black at 50% opacity.

Effect: All buttons will have a soft, offset shadow, creating a raised, 3D-like appearance.

3. border-radius

Explanation:

• div is the selector, targeting all <div> elements.

• border-radius is the property that rounds the corners of the element’s border box.

• 10px is the value, making each corner curve with a 10-pixel radius.

Effect: All <div> elements will have gently rounded corners instead of sharp, square ones.

4. display

Explanation:

• div is the selector, targeting all <div> elements.

• display: flex; turns the <div> into a flex container, enabling Flexbox layout.

Effect: The direct children of the <div> become flex items, allowing you to control their alignment, spacing, wrapping, and distribution with Flexbox properties like justify-content, align-items, flex-direction, etc.

5. position

Explanation:

• div is the selector, targeting all <div> elements.

• position: absolute; removes the element from the normal document flow and positions it relative to the nearest positioned ancestor (relative, absolute, or fixed).

• top: 50px; moves the element 50 pixels down from the top edge of its positioned ancestor.

• left: 100px; moves the element 100 pixels right from the left edge of its positioned ancestor.

Effect: The <div> will appear exactly at 50px from the top and 100px from the left of its nearest positioned parent (or the page if none exists).

6. opacity

Explanation:

• img is the selector, targeting all <img> (image) elements.

• opacity is the property that controls the transparency level of the element.

• 0.8 is the value, meaning the image will be 80% visible (20% transparent).

Effect: All images will appear slightly faded, which can be useful for overlays, hover effects, or background visuals.

7. z-index

Explanation:

• div is the selector, targeting all <div> elements.

• position: absolute; positions the element relative to its nearest positioned ancestor.

• z-index: 2; sets the stacking order of the element.

How z-index Works:

• z-index determines which elements appear on top when elements overlap.

• Higher z-index values sit above lower ones.

• z-index only works on elements with a position of relative, absolute, fixed, or sticky.

• The default z-index is auto, which behaves like z-index: 0.

Effect: This <div> will appear above any other overlapping positioned element with a lower z-index (e.g. 1 or auto).

🚀 Section 4: Advanced CSS Properties

1. Advanced background

Explanation:

• body is the selector, targeting the entire webpage’s <body> element.

• background-color: #fafafa; sets a light gray base color.

• background-image: linear-gradient(to right, red, yellow); applies a left-to-right gradient from red to yellow on top of the background color.

How it works:

• The background-color acts as a fallback in case gradients are not supported.

• The linear-gradient overlays the background and takes precedence visually.

• Together, they create a smooth color transition across the background.

Effect: The entire page gets a red-to-yellow horizontal gradient, giving a dynamic and modern look.

2. text-shadow

Explanation:

• h1 is the selector, targeting all heading level 1 elements.

• color: #333; sets the text color to a very dark gray (hex shorthand for RGB 51, 51, 51).

• text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); adds a shadow behind the text:

  • 2px 2px = offset right and down

  • 5px = blur radius

  • rgba(0, 0, 0, 0.3) = semi-transparent black color

Effect:

The <h1> text appears in dark gray with a soft, subtle shadow behind it, enhancing depth and readability.

3. Flexbox Alignment

Explanation:

• .container targets elements with the class container.

• display: flex; makes the container a flexbox layout context.

• justify-content: center; horizontally centers child items.

• align-items: center; vertically centers child items.

• height: 100vh; sets the container height to 100% of the viewport height (viewport height unit).

Effect:

Any content inside .container will be perfectly centered both vertically and horizontally in the full browser window.

4. Responsive font-size

Explanation:

• p targets all <p> (paragraph) elements.

• font-size: 1.5rem; sets the base font size to 1.5× the root element’s font size (usually 16px, so 24px).

• The @media rule is a media query that applies styles only when the viewport width is 768px or less.

• Inside the media query: font-size: 4vw; sets the font size to 4% of the viewport width, making it responsive to screen size.

Effect:

• On large screens: paragraph text is ~24px.

• On smaller screens (768px and below): font size adjusts dynamically with the width of the viewport.

5. float with Clearfix

Explanation:

• .container::after is a pseudo-element that adds a virtual element after .container.

• content: ""; inserts an empty content string, required for the pseudo-element to render.

• display: block; ensures the pseudo-element behaves like a block-level element.

• clear: both; clears any floated elements before it (left and right), forcing the container to wrap around its floated children.

Effect:

This is a clearfix technique, used to fix layout issues when child elements are floated. Without it, the parent container may collapse in height.

6. Full-screen Height

Explanation:

• div targets all <div> elements.

• height is the property that sets the vertical size of the element.

• 100vh means 100% of the viewport height (the visible part of the browser window).

Effect:

Each <div> will stretch to fill the entire height of the browser window, making it ideal for fullscreen sections like hero banners or splash screens.

7. Responsive max-width

Explanation:

• .container targets elements with the class container.

• width: 100%; allows the element to stretch across the full width of its parent.

• max-width: 1200px; limits the container to a maximum width of 1200px to avoid it getting too wide on large screens.

• margin: 0 auto; horizontally centers the container by setting top/bottom margin to 0 and left/right margin to auto.

Effect:

The container is responsive: full width on small screens, but centered and fixed at 1200px max on larger screens — ideal for readable content layout.

8. border, box-shadow, and border-radius

Explanation:

• div targets all <div> elements.

• border: 2px solid black; applies a solid black border with 2px thickness.

• border-radius: 10px; rounds the corners of the border with a radius of 10px.

• box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); adds a soft shadow offset by 5px right and down, with a 10px blur and 20% black opacity.

Effect:

This <div> has a styled card-like appearance: outlined with rounded corners and a subtle shadow, giving it depth and a polished look.

9. Centering with margin

Explanation:

• div targets all <div> elements.

• margin: 0 auto; sets:

  • 0 for top and bottom margin.

  • auto for left and right margin, which centers the element horizontally within its parent container.

Important Note:

For margin: 0 auto; to center an element:

• The element must be block-level (like div).

• It must have a defined width (e.g., width: 300px;).

Effect:

This centers the <div> horizontally in its parent container if a width is set.

10. Responsive Padding

Explanation:

• .box targets elements with the class box.

• padding: 5%; sets internal spacing (padding) on all four sides—top, right, bottom, left—to 5% of the element’s parent width.

Effect:

The content inside .box will have breathing room that scales responsively with the container’s width, making the layout adapt well to different screen sizes.

11. CSS Variables

Explanation:

• :root is a pseudo-class that targets the highest-level element (usually <html>)—a global scope for variables.

• --primary-color, --secondary-color, --padding-size are custom property names (CSS variables).

• In .button, var(--primary-color) and var(--padding-size) retrieve those values.

Effect:

• All .button elements will have:

  • A blue background from --primary-color.

  • White text.

  • 10px of padding from --padding-size.

Benefits:

• Easier theme updates: Change the variable once and it updates everywhere.

• Cleaner, maintainable code: Ideal for design systems and consistent styling.

12. CSS Grid

Explanation:

• .container targets elements with the class container.

• display: grid; makes it a CSS Grid container, enabling a two-dimensional layout system.

• grid-template-columns: 1fr 1fr 1fr; defines three equal-width columns, each taking up 1 fraction of the available space.

• gap: 10px; adds 10px spacing between both rows and columns.

Effect:

Creates a responsive 3-column layout with evenly distributed columns and 10px spacing between grid items. Great for galleries, cards, or dashboards.

13. transition

Explanation:

• button targets all <button> elements.

• background-color: lightblue; sets the default button background.

• transition: background-color 0.5s ease; smoothly animates changes to the background-color over 0.5 seconds with an ease timing function.

• button:hover targets the button on hover.

• background-color: darkblue; changes the background when hovered.

Effect:

When the user hovers over a button, it gradually changes from light blue to dark blue, creating a smooth interactive visual transition.

14. transform

Explanation:

• div targets all <div> elements.

• transform is a CSS property used to visually manipulate an element.

• rotate(45deg) rotates the element 45 degrees clockwise around its center.

Effect:

Every <div> will appear tilted diagonally by 45 degrees on the page.

Note: This transformation does not affect layout flow—other elements will not shift to accommodate the rotated shape.

15. animation

Explanation:

• @keyframes slidein defines a custom animation named slidein.

  • from sets the start state: element is fully off-screen to the left (-100% horizontal shift).

  • to sets the end state: element returns to its original position (0%).

• div targets all <div> elements.

• animation: slidein 2s ease-in-out; applies the slidein animation:

  • 2s = duration (2 seconds),

  • ease-in-out = timing function (starts/ends smoothly).

Effect:

When the page loads, all <div> elements will slide in from the left over 2 seconds with a smooth transition.

🧠 Final Assignment

Create a responsive card component using these CSS properties:

• background gradients
• text-shadow
• flexbox alignment
• responsive font sizes
• border and box-shadow
• CSS variables

✅ Assignment Answer Key

The Only CSS Layout Guide You’ll Ever Need  (Video)

Related Videos:

Related Posts:

Creating borders and space with CSS

Shadows of Escape: The Smiths Legacy

What is JavaScript?

Optimizing Unity Editor Layout for Enhanced Game Development Workflow

Using more than one CSS prop

Alignment CSS prop

Python Basic String Operations

Computer Programming Sorting Algorithms

HTML paragraph tag: p

Using CSS classes and the class attribute

Layout and Design with division tag: div

Coding with JavaScript

Learn more about JavaScript Operators

The Python Standard Library Ver 3.13.1