Basic of CSS — Chapter 2

Learn HTML, CSS, and JavaScript Programming from Beginner to Expert

Welcome back to your journey into the world of CSS (Cascading Style Sheets) ! 🎉 In this chapter, we’ll dive deeper into advanced CSS concepts that will elevate your web development skills. From combinators and attribute selectors to colors, text styling, fonts, backgrounds, and the box model, you’ll learn how to create visually stunning and functional websites. We’ll also explore debugging techniques using browser tools to troubleshoot issues effectively.

Let’s get started!

9. Combinator Selector

Combinator selectors allow you to target elements based on their relationships with other elements in the DOM (Document Object Model). These are powerful tools for creating precise and dynamic styles.

Types of Combinators

1. Descendant Selector : Targets elements nested within another element.

div p {
  color: blue;
}

This makes all <p> elements inside a <div> blue.

2. Child Selector (>) : Targets direct child elements.

ul > li {
  font-weight: bold;
}

This applies bold styling only to <li> elements directly inside a <ul>.

3. Adjacent Sibling Selector (+) : Targets an element immediately following another.

h1 + p {
  margin-top: 0;
}

This removes the top margin from any <p> that comes right after an <h1>.

4. General Sibling Selector (~) : Targets all siblings of an element.

h2 ~ p {
  color: gray;
}

This makes all <p> elements that are siblings of an <h2> gray.

Example 1: Descendant Selector

<div>
  <p>This paragraph is styled.</p>
</div>
<p>This paragraph is not styled.</p>

div p {
  color: green;
}

Only the first <p> is green because it’s inside the <div>.

Example 2: Child Selector

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<li>Not part of the list</li>

ul > li {
  font-weight: bold;
}

The <li> outside the <ul> remains unaffected.

Example 3: Adjacent Sibling Selector

<h1>Title</h1>
<p>This paragraph follows the title.</p>
<p>This paragraph does not.</p>

h1 + p {
  color: red;
}

The first <p> turns red, but the second one stays unchanged.

Key Takeaways

• Combinators help target elements based on their relationships.
• Use them to create precise and reusable styles.
• Experiment with different combinators for dynamic layouts.

10. Attribute Selector

Attribute selectors target elements based on their attributes and values. They’re particularly useful for styling forms, links, or custom HTML elements.

Syntax

[attribute] {
  property: value;
}

Examples

1. Targeting Elements with a Specific Attribute :

[type="text"] {
  border: 2px solid blue;
}

This styles all input fields with type="text".

2. Targeting Elements with a Specific Attribute Value :

a[href="https://example.com"] {
  color: orange;
}

This changes the color of links pointing to [https://example.com.](https://example.com.)

3. Targeting Elements with Partial Matches :

• Starts With (^=):

a[href^="https"] {
  color: green;
}

Styles links starting with https.

• Ends With ($=):

img[src$=".png"] {
  border: 1px solid black;
}

Adds a border to images with .png extensions.

• Contains (*=):

a[href*="google"] {
  font-weight: bold;
}

Highlights links containing the word “google.”

Example 1: Styling Input Fields

<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">

[type="text"] {
  background-color: lightyellow;
}

Only the text input gets a light yellow background.

Example 2: Highlighting External Links

<a href="https://example.com">External Link</a>
<a href="/about">Internal Link</a>

a[href^="https"] {
  color: purple;
}

The external link turns purple.

Example 3: Customizing Images

<img src="logo.png" alt="Logo">
<img src="photo.jpg" alt="Photo">

img[src$=".png"] {
  border-radius: 50%;
}

The .png image gets rounded corners.

Key Takeaways

• Attribute selectors are versatile for targeting specific elements.
• Use partial matches (^=, $=, *=) for dynamic styling.
• Combine attribute selectors with other selectors for precision.

11. Color

Colors are essential for making your website visually appealing. CSS provides multiple ways to define colors, including names, hex codes, RGB, and HSL.

Color Formats

1. Color Names :

h1 {
  color: red;
}

2. Hex Codes :

p {
  color: #3498db;
}

3. RGB :

button {
  background-color: rgb(0, 128, 255);
}

4. HSL :

div {
  background-color: hsl(200, 100%, 50%);
}

Example 1: Using Hex Codes

<h1>Welcome to My Website</h1>

h1 {
  color: #ff6f61; /* Peach color */
}

Example 2: Creating Gradient Buttons

<button>Click Me</button>

button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

Example 3: Transparent Colors

<div class="overlay"></div>

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

Key Takeaways

• Use color names for simplicity and hex/RGB/HSL for precision.
• Experiment with gradients and transparency for modern designs.
• Choose colors that align with your brand or theme.

12. Text

Text styling is crucial for readability and aesthetics. CSS offers properties to control alignment, decoration, transformation, and spacing.

Common Properties

1. Text Alignment :

p {
  text-align: center;
}

2. Text Decoration :

a {
  text-decoration: none;
}

3. Text Transformation :

h1 {
  text-transform: uppercase;
}

4. Letter Spacing :

span {
  letter-spacing: 2px;
}

Example 1: Centered Headings

<h1>My Website</h1>

h1 {
  text-align: center;
}

Example 2: Removing Underlines

<a href="#">No Underline</a>

a {
  text-decoration: none;
}

Example 3: Bold and Spaced Titles

<h2>Important Announcement</h2>

h2 {
  font-weight: bold;
  letter-spacing: 3px;
}

Key Takeaways

• Align text for better readability.
• Use decorations sparingly to avoid clutter.
• Transformations and spacing enhance visual hierarchy.

13. Font

Fonts play a significant role in setting the tone of your website. CSS allows you to customize font families, sizes, weights, and more.

Font Properties

1. Font Family :

body {
  font-family: Arial, sans-serif;
}

2. Font Size :

h1 {
  font-size: 2em;
}

3. Font Weight :

p {
  font-weight: 600;
}

4. Google Fonts :

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

Example 1: Custom Font Stack

<p>This is a paragraph.</p>

p {
  font-family: Georgia, serif;
}

Example 2: Responsive Font Sizes

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

Example 3: Google Fonts Integration

<h1>Styled with Google Fonts</h1>

h1 {
  font-family: 'Lobster', cursive;
}

Key Takeaways

• Use web-safe fonts or integrate Google Fonts for variety.
• Adjust font sizes responsively for better UX.
• Choose fonts that complement your design.

14. Background

Backgrounds add depth and personality to your website. CSS lets you style backgrounds with colors, images, gradients, and even animations.

Background Properties

1. Background Color :

body {
  background-color: #f4f4f4;
}

2. Background Image :

div {
  background-image: url('image.jpg');
}

3. Background Repeat :

div {
  background-repeat: no-repeat;
}

4. Background Position :

div {
  background-position: center;
}

Example 1: Full-Screen Background

body {
  background: url('background.jpg') no-repeat center center fixed;
  background-size: cover;
}

Example 2: Gradient Background

div {
  background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}

Example 3: Parallax Effect

section {
  background: url('parallax.jpg') no-repeat center center fixed;
  background-size: cover;
}

Key Takeaways

• Use high-quality images for professional appeal.
• Combine gradients with colors for unique effects.
• Experiment with parallax scrolling for depth.

15. Box Model

The box model defines how elements are sized and spaced. It consists of content, padding, border, and margin.

Box Model Components

1. Content :

width: 200px;
height: 100px;

2. Padding :

padding: 10px;

3. Border :

border: 2px solid black;

4. Margin :

margin: 15px;

Example 1: Simple Box

<div class="box"></div>

.box {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 2px solid blue;
  margin: 20px;
}

Example 2: Centering with Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Example 3: Box Shadow

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Key Takeaways

• Understand the box model for proper spacing and sizing.
• Use padding, borders, and margins strategically.
• Combine flexbox with the box model for responsive layouts.

16. Debug with Browser

Modern browsers come with powerful developer tools that make debugging CSS easier than ever.

How to Access Developer Tools

• Windows/Linux : Press Ctrl+Shift+I or F12.
• macOS : Press Cmd+Option+I.

Features

1. Inspect Element : Click the inspect tool and hover over elements to see their styles and properties.
2. Modify Styles : Edit CSS directly in the browser to test changes before applying them to your code.
3. Debug Layout Issues : Use the box model visualization to identify spacing problems.

Example 1: Inspecting Styles

Right-click on an element and select “Inspect” to view its computed styles.

Example 2: Testing Changes

Add or modify CSS rules in the “Styles” panel to see real-time updates.

Example 3: Debugging Layout

Use the grid and flexbox overlays to visualize complex layouts.

Key Takeaways

• Leverage browser tools to debug and optimize your CSS.
• Test changes in real-time before updating your code.
• Use visualization tools to resolve layout issues efficiently.

Conclusion: Mastering the Basics of CSS

In this chapter, we covered the fundamentals of CSS:

1. Combinator Selector : Target elements based on relationships.
2. Attribute Selector : Style elements using attributes and values.
3. Color : Use various formats to define colors creatively.
4. Text : Control alignment, decoration, and spacing for readability.
5. Font : Customize font families, sizes, and weights for aesthetics.
6. Background : Add depth with colors, images, and gradients.
7. Box Model : Understand content, padding, borders, and margins.
8. Debug with Browser : Use developer tools to troubleshoot issues.

By mastering these concepts, you’re well on your way to creating visually stunning and functional websites. Keep practicing, experimenting, and building projects to reinforce your skills. Happy coding! 🚀