intro-frontend-course

Styling Text and Boxes with CSS

In this lesson, we look at the fundamentals of CSS for styling text and boxes. CSS, or Cascading Style Sheets, plays a pivotal role in frontend development by enhancing the visual appeal and layout of websites. By the end of this session, you’ll understand how to effectively style text and manipulate boxes using CSS properties and selectors.

Understanding the CSS Box Model

The CSS box model is a foundational concept that defines how elements are rendered on the screen. It consists of four main parts: margins, borders, padding, and the content area.

Example

HTML:

<div class="box-model-example">Content area</div>

CSS:

.box-model-example {
  margin: 10px;
  border: 2px solid black;
  padding: 20px;
  background-color: lightgrey;
}

See the Pen Week_2__css_box_model_example by Mik M (@Mik-M) on CodePen.

This example shows a <div> element with a content area surrounded by padding, a border, and margins. The padding increases space inside the border, the border defines the edge, and the margin adds space outside the border.

Box Model Breakdown

Text Styling in CSS

Text styling is crucial for creating readable and visually appealing content. CSS provides several properties to style text:

Example

HTML:

<p class="text-styling">Hello, CSS world!</p>

CSS:

.text-styling {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: navy;
  text-align: center;
}

See the Pen week_2__text_styling_example by Mik M (@Mik-M) on CodePen.

This paragraph uses Arial font, is sized at 20px, colored navy, and aligned centrally.

Key Text Properties

Advanced Text Styling

Example

HTML:

<p class="advanced-text-styling">CSS can make your text look amazing!</p>

CSS:

.advanced-text-styling {
  font-family: 'Georgia', serif;
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

See the Pen Week_2_advanced_text_styling by Mik M (@Mik-M) on CodePen.

Key Advanced Text Properties

Styling Divs and Other Elements

Beyond text, CSS is used to style boxes, which can include div elements and others. Styling these elements often involves setting backgrounds, borders, and adjusting the box-sizing property.

Example

HTML:

<div class="styled-div">Styled Box</div>

CSS:

.styled-div {
  background-color: coral;
  border: 3px dashed green;
  box-sizing: border-box;
  width: 50%;
  padding: 30px;
  margin: auto;
}

See the Pen Week_2__styling by Mik M (@Mik-M) on CodePen.

This div has a coral background, a green dashed border, and padding. The box-sizing: border-box; ensures that padding and border sizes are included in the width calculation, making layout more predictable.

Key Box Properties

Responsive Design with Flexbox

Flexbox is a powerful layout module that makes it easier to design flexible and responsive layout structures without using float or positioning.

Example

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: lightblue;
}

.flex-item {
  background-color: coral;
  padding: 20px;
  border: 2px solid black;
}

See the Pen Week_2__flexbox by Mik M (@Mik-M) on CodePen.

Watch the following video to learn more about Flexbox

CSS Transitions and Animations

Transitions and animations add interactivity and dynamics to web pages, making them more engaging for users.

Transitions

HTML:

<button class="transition-button">Hover me!</button>

CSS:

.transition-button {
  background-color: lightblue;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.transition-button:hover {
  background-color: coral;
}

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

Animations

HTML:

<div class="animated-box">Watch me move!</div>

CSS:

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation: slide 2s infinite alternate;
}

See the Pen Week_2__animations by Mik M (@Mik-M) on CodePen.

Practical Exercises

  1. Exercise 1: Create a styled card with text and image using the box model.
  2. Exercise 2: Implement a navigation bar using flexbox.
  3. Exercise 3: Add hover effects to buttons using CSS transitions.
  4. Exercise 4: Create a simple animation using keyframes.

References