Cascading Style Sheets (CSS)

Overview

• CSS is used alongside HTML to format and style HTML elements.
• CSS versions evolve, introducing new formatting capabilities.
• Browsers are updated to support new CSS features.

Example CSS Code

body {
  background-color: black;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: helvetica;
  font-size: 10px;
}

• Styles like font family, background color, text color, alignment, etc., can be controlled.
• IDs and class names in HTML allow specific targeting in CSS and JavaScript.

Syntax

• General syntax: element { property: value; }
• Properties include:
  • Layout: height, position, margin, padding, border
  • Text: color, font-size, text-align, font-family
  • Visuals: background-color, opacity, etc.

Animations

• CSS supports complex animations using:
  • @keyframes
  • animation
  • animation-duration
  • animation-direction
• These allow creation of 2D and 3D visual effects.
• You can read about and try out many of these animation properties here.

Usage with JavaScript

• CSS can be dynamically modified via JavaScript for:
  • Real-time changes based on user interaction (mouse, keyboard)
  • Animation control
• Example: "Parallax Depth Cards" by Andy Merskin on CodePen.
  • The following example beautifully illustrates such capabilities of CSS when used with HTML and JavaScript "Parallax Depth Cards - by Andy Merskin on CodePen":

Beyond Web Pages

• CSS can be used to style:
  • XML documents
  • SVG graphics
  • Mobile application UI in modern development platforms

CSS Frameworks

To simplify and speed up CSS development, many frameworks are used:

• Bootstrap
• SASS
• Foundation
• Bulma
• Pure

These frameworks:

• Provide pre-defined styles and components.
• Are optimized for modern web apps and JavaScript integration.

Exercise

What is the CSS "property: value" used to make an HTML element's text aligned to the left?

flag: text-align: left;