This is an old revision of the document!
Table of Contents
CSS RWD (Responsive Web Design)
CSS RWD stands for “Cascading Style Sheets Responsive Web Design.”
It's an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
This is achieved by using flexible layouts, resizable images, and media queries.
Cascading Style Sheets (CSS)
CSS is a stylesheet language used to control the look and formatting of a document written in HTML or XML. It allows you to apply styles (such as fonts, colors, spacing) to web documents.
Responsive Web Design (RWD)
This approach aims to craft sites that provide an optimal viewing experience, easy reading, and navigation across a wide range of devices, from desktop computer monitors to mobile phones.
RWD is achieved by:
- Flexible Grid Layouts: Layouts are designed to adapt to the screen size by using percentages rather than fixed units like pixels.
- Resizable Images: Images are also resized relative to the container or viewport so they don't break the layout on smaller screens.
- Media Queries: These allow the page to use different CSS style rules based on the characteristics of the device being used to view the page (e.g., its width, height, resolution).
Together, CSS and RWD principles enable web developers to create web pages that look good and function well on any device, improving user experience and accessibility.
Hello World Example
- css-rwd-hello-world.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Hello World</title> </head> <body> <div class="container"> <h1>Hello, World!</h1> </div> </body> </html>
- styles.css
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; } @media only screen and (max-width: 600px) { h1 { font-size: 18px; } }