CSS Fundamentals
Modern Website Development
R. Promkam, Dr.rer.nat.
Department of Mathematics and Computer Science, RMUTT

Agenda

  1. CSS Syntax and Selectors
  2. Box Model and Layout Techniques
  3. Responsive Design with Media Queries
  4. Advanced Styling Techniques
  5. Workshop Activities

CSS Syntax and Selectors

CSS Syntax

  • Selectors: Target HTML elements to apply styles.
  • Properties: Define what aspect of the element to style.
  • Values: Specify the style value for the property.
selector {
    property: value;
}

Example

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

Types of Selectors

Basic Selectors

  • Element Selector: Targets HTML tags.
    • Example: p { color: blue; }
  • Class Selector: Targets elements with a specific class.
    • Example: .class-name { color: red; }
  • ID Selector: Targets an element with a specific ID.
    • Example: #id-name { color: green; }

Advanced Selectors

  • Attribute Selector: Targets elements based on attributes.
    • Example: a[href] { color: purple; }
  • Pseudo-class Selector: Targets elements in a specific state.
    • Example: a:hover { color: orange; }

Box Model

What is the Box Model?

  • Content: The actual content of the element.
  • Padding: Space between the content and the border.
  • Border: The border surrounding the padding (if any).
  • Margin: Space outside the border.

center contain

div {
    width: 100px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
}

Layout Techniques

Display Property

  • block: Element starts on a new line and takes up full width.
    • Example: div { display: block; }
  • inline: Element flows with text and only takes up as much width as needed.
    • Example: span { display: inline; }
  • inline-block: Like inline but can have width and height.
    • Example: img { display: inline-block; }

center

Layout Techniques

Position Property

  • static: Default position. Elements are positioned according to the normal flow.
    • Example: div { position: static; }
  • relative: Positioned relative to its normal position.
    • Example: div { position: relative; top: 10px; }
  • absolute: Positioned relative to the nearest positioned ancestor.
    • Example: div { position: absolute; top: 20px; }
  • fixed: Positioned relative to the viewport.
    • Example: div { position: fixed; top: 30px; }

center fit

Flexbox Layout

What is Flexbox?

  • A layout model that allows items to adjust and distribute space within a container.

center

Flex Container

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

Flex Items

.item {
    flex: 1;
    margin: 10px;
}

Grid Layout

What is CSS Grid?

  • A layout system for creating complex, responsive web designs.

center

Grid Container

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

Grid Items

.item {
    background-color: lightblue;
    padding: 20px;
}

Responsive Design with Media Queries

What are Media Queries?

  • Allow the application of styles based on device characteristics like width, height, and orientation.

Example

@media (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

center

Advanced Styling Techniques

Pseudo-elements

  • before: Inserts content before an element.
  • after: Inserts content after an element.
p::before {
    content: "Note: ";
    font-weight: bold;
}

Advanced Styling Techniques

Transitions and Animations

  • Smooth transitions between styles.
button {
    transition: background-color 0.3s;
}
button:hover {
    background-color: blue;
}

Workshop Activities

  1. Creating a Responsive Layout
    • Build a responsive layout using Flexbox or Grid.
  2. Styling a Form
    • Style an HTML form with various input types.
  3. Applying Advanced CSS Techniques
    • Implement pseudo-elements, transitions, and animations.

Creating a Responsive Layout

  1. Create an HTML file with a basic structure.
  2. Use Flexbox or Grid to create a responsive layout.
  3. Ensure the layout adapts to different screen sizes using media queries.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="container">
        <div class="item">Logo</div>
        <nav class="item">Navigation</nav>
    </header>
    <main class="container">
        <section class="item">Content</section>
        <aside class="item">Sidebar</aside>
    </main>
    <footer class="container">
        <div class="item">Footer</div>
    </footer>
</body>
</html>

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

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px;
}

.item {
    flex: 1;
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

header, footer {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}



nav {
    background-color: #007BFF;
    color: white;
    padding: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

nav a:hover {
    text-decoration: underline;
}

Styling a Form

  1. Create a new HTML file with a form structure.
  2. Apply CSS to style the form and its elements.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" minlength="8" required>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

label {
    display: block;
    margin-bottom: 8px;
}


input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="submit"] {
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

Applying Advanced CSS Techniques

  1. Create an HTML file with elements to style.
  2. Use pseudo-elements, transitions, and animations.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>This is a paragraph with a pseudo-element.</p>
    <button>Hover over me!</button>
</body>
</html>

p::before {
    content: "Note: ";
    font-weight: bold;
    color: red;
}

button {
    transition: background-color 0.3s;
}

button:hover {
    background-color: blue;
    color: white;
}

Q&A

Feel free to ask any questions you have about the content covered today.

Supplement Learning Resoures

CSS Crash Course For Absolute Beginners

By Traversy Media.

A comprehensive overview of CSS, covering styles, selectors, and declarations. It includes a CSS cheat sheet for reference and a basic website layout tutorial using CSS3 basics.

Supplement Learning Resoures

CSS3 Animation & Transitions Crash Course

By Traversy Media.

A beginner friendly crash course on CSS animation using keyframes as well as CSS transitions. We will do a little experimenting and we will build a small animated landing page project.

Supplement Learning Resoures

Create a Website With Video Background

By Traversy Media.

Create a beautiful, custom landing page for a Travel website using HTML, CSS and a little JavaScript

Supplement Learning Resoures

HTML & CSS Mobile UI Layout

By Traversy Media.

Use HTML & CSS to build a mobile first layout. We will build a clone of the CVS app landing page and learn about the grid, flex, media queries and more.

Supplement Learning Resoures

Flexbox Crash Course

By Traversy Media.

Flexbox is used for space distribution, positioning and alignment in CSS.

Supplement Learning Resoures

CSS Grid Crash Course

By Traversy Media.

This crash course will teach you all of the fundamentals of CSS Grid

Next Week

Topic: JavaScript Basics

  • Introduction to JavaScript