Fundamentals of CSS for Web Design

Sep 14, 2024

CSS Basics

Introduction to CSS

  • CSS stands for Cascading Style Sheets.
  • It is used for describing the presentation of a document written in a markup language such as HTML.
  • Website building analogy:
    • Structure: HTML (skeleton/frame)
    • Style: CSS (colors/decorations)
    • Functionality: JavaScript (plumbing/electricity)

Getting Started with CSS

  • Use a text editor (e.g., VS Code).
  • Create an HTML document (extension should be .html).

Applying CSS

  • Three ways to apply CSS:
    1. Inline: Within the HTML element.
    2. Internal: Within the <style> tags in the <head> section.
    3. External: Link a separate CSS file (preferred for larger websites).

Inline CSS Example

  • Change background color:
    • <body style="background-color: black;">
  • Change font color:
    • <h1 style="color: white;">My Website</h1>
  • Apply styles to multiple elements by defining them inline (not recommended for cleanliness).

Internal CSS Example

  • Use <style> in <head>: 
    <style>  
  body { background-color: black; }  
  h1 { color: white; }  
  p { background-color: gray; color: white; }  
</style>

External CSS Example

  • Create a style.css file.
  • Link it in the HTML document: 
    <link rel="stylesheet" href="style.css">
  • Advantages: Reuse the same CSS file across multiple HTML files.

CSS Selectors

  • ID Selector: #idName targets an element by its unique ID.
  • Class Selector: .className targets elements with a specific class.

Example of CSS Properties

  • Color, font size, background color, borders, padding, and margins.

Borders

  • Border properties:
    • border-style: solid, dashed, dotted, etc.
    • border-width: specifies size.
    • border-color: color of the border.
    • Use border-radius to round corners.

Backgrounds

  • Set background color, gradient, or image.
    • background-color: blue;
    • background-image: url('image.jpg');

Margins and Padding

  • Margins: Space outside an element.
  • Padding: Space inside an element (between content and border).
  • margin: 10px; (all sides) or margin: 10px 5px; (top/bottom, left/right).

Float Property

  • Positions an element to the left or right within a container.
  • Use with images or text wrapping around elements.
  • Use clear property to stop floating effects.

Positioning

  • Types: static, relative, absolute, fixed, sticky.
    • Static: Default, normal flow.
    • Relative: Position relative to its original location.
    • Absolute: Position relative to the nearest positioned ancestor.
    • Fixed: Positioned relative to the viewport; stays in place when scrolling.
    • Sticky: Toggles between relative and fixed based on scroll position.

Pseudo-Classes

  • Used to define the special state of an element. Examples:
    • :hover, :active, :focus, :nth-child().

Shadows

  • Text Shadows: text-shadow: 2px 2px 5px gray;
  • Box Shadows: box-shadow: 5px 5px 5px black;

Animations

  • Use @keyframes to create animations.
  • Configure properties such as duration, timing function, delay, iteration count.
  • Example: 
    @keyframes myAnimation {  
  from { opacity: 0; }  
  to { opacity: 1; }  
}
  • Combine animations with pseudo-classes for effects on hover or click.

Conclusion

  • CSS is vital for web design and functionality.
  • Utilize various properties and techniques to enhance web pages.