Code Monkey home page Code Monkey logo

int-u2l3-23-24-student-exercises's Introduction

Lesson 2.3: Intro to CSS

๐ŸŽฏ Objectives

  • Understand the purpose and structure of CSS.
  • Learn how to select and style HTML elements using CSS.
  • Gain hands-on experience with various CSS properties and values.

Table of Contents

  1. Introduction to CSS
  2. Understanding CSS Structure
  3. Four Steps to Writing CSS
  4. Common CSS Properties & Values

Introduction to CSS

  • CSS, or Cascading Style Sheets, gives websites style.
  • Using CSS, you can change properties like color, spacing, fonts, positioning, animations, and more.
  • HTML provides the structure, while CSS styles the appearance.

Understanding CSS Structure

  • Selector: The HTML element you want to style.
  • Property: The aspect of the element you want to change (e.g., color, width).
  • Value: The specific change you want to apply to the property.
  • Example:
h1 {
  color: blue;
}

Four Steps to Writing CSS

  1. Choose an HTML element - this is your selector.
  2. Add opening and closing curly braces.
  3. Inside the braces, choose a property and give it a value, separated by a colon.
  4. End with a semicolon.

Common CSS Properties & Values

  • Properties: There are hundreds, including color, background-color, width, text-align, font-size.
  • Values: They differ depending on the property.
  • Examples:
    • color: red;
    • width: 400px;
    • font-size: 20px;

By the end of this lesson, you'll have hands-on experience with the fundamental concepts of CSS, enabling you to enhance the styling of web pages.

Happy coding!

int-u2l3-23-24-student-exercises's People

Contributors

cn-curriculum avatar cn-mika avatar kalinaw00 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.