CSS

About CSS

Cascading Style Sheets (CSS) is a style sheet language that allows you to add style to a web page: font, color, space between elements, and more.

Source:

- CSS: Cascading Style Sheets | MDN - https://developer.mozilla.org/docs/Web/CSS
- Cascading Style Sheets - https://www.w3.org/Style/CSS/
- CSS - Wikipedia - https://en.wikipedia.org/wiki/CSS

CSS Basics

"CSS is not a programming language, and not a markup language, CSS is a style sheet language."

What does the CSS code look like? Example:

Сode:

p { color: red; }

CSS style can be applied to a web page in different ways:

1. Using a style file (style.css) that is declared in the header of the page.
2. Using the "<style>" tag in the page header.
3. Built-in style in HTML tag.

1. Сode:

2. Сode:

<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Test page</title> <style> p { color: red; background-color: yellow; } </style> </head> <body> <p>This is my paragraph.</p> </body> </html>

3. Сode:

<p style="color: red;">Lorem impsum</p>

Note: Hierarchy in CSS matters, CSS property values that were declared last overwrite property values that were declared earlier or above, for example: <style> p { color: red; } p { color: blue; } </style> <p>text example lorem ipsum</p> The text in the paragraph will be blue.

Source:

- CSS basics - Learn web development | MDN - https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
- <style>: The Style Information element - HTML: HyperText Markup Language | MDN - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

Learning CSS

Learning:

- Learn to style HTML using CSS - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS

- Learning CSS (W3C) - https://www.w3.org/Style/CSS/learning

Documentation:

- CSS: Cascading Style Sheets | MDN - https://developer.mozilla.org/docs/Web/CSS

- Cascading Style Sheets - https://www.w3.org/Style/CSS/#specs

Responsive Design

Responsive web design is a web design or CSS style that makes a website look good on any screen size. Note: The most popular responsive design technique is "Mobile First Design". To make the page optimized for mobile devices, first use this meta tag in the "head"

Сode:

CSS Responsive Design can be achieved by using: - CSS units as percentages "%" (100%), "vw", "1fr" - "media query". - CSS property: "max-width", "min-width". - Maybe something else.

A few of my own examples of what I use.

1. If the width of the screen is 500 pixels or less, we do something: @media(max-width: 500px){ p { color: red; } }

2. This CSS code prevents images from overflowing and sets the automatic size for the picture: img { max-width:100%; height: auto; display: inline-block; }

3. My responsive content or page "wrapper" class. This wrapper in the example makes the content no wider than 560px and a width of 100% makes it adaptive to any screen: .wrapper { width: 100%; max-width: 560px; margin: 0 auto; }

4. Hide 1 and show 2 something depending on the screen size or dynamic style change. Hide the desktop version and show the mobile version of something instead. (A drop down menu or something else): @media(width >= 500px){ p { color: red; } } @media(width <= 500px){ p { color: green; } } or @media(width >= 500px){ .mobileVersion { display: none; } .desktopVersion { display: block; color: red } } @media(width <= 500px){ .mobileVersion { display: block; color: green; } .desktopVersion { display: none; } } - Hide show CSS example or dynamic change ./examples/hide-show.html

Note: Testing and debugging: - Resize the browser window to see the style changes. - Launch the developer tool in the browser through the menu and "Inspect" page and change the size of the window there. - In developer tools, you can choose mobile phone simulation: "Responsive Design Mode" (phone icon). - Of course, a test on a physical device.

Source and Learning:

- Responsive design - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design
- Responsive web design basics | Articles | web.dev - https://web.dev/articles/responsive-web-design-basics
- Mobile-First CSS: Is It Time for a Rethink? – A List Apart - https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/

Doc:

- Viewport meta tag - HTML: HyperText Markup Language | MDN - https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag
- Beginner's guide to media queries - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Media_queries
- Using media queries - CSS: Cascading Style Sheets | MDN - https://developer.mozilla.org/docs/Web/CSS/CSS_media_queries/Using_media_queries
CSS values and units - Learn web development | MDN - https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Values_and_units

CSS tricks and tips

To prevent element overflow I use this CSS code for all elements:

* { box-sizing: border-box; }

Doc:

box-sizing - CSS: Cascading Style Sheets | MDN - https://developer.mozilla.org/docs/Web/CSS/box-sizing

How to create a perfect page or site? To begin with, the site must pass these 3 basic tests:

Tools:

- PageSpeed Insights - https://pagespeed.web.dev/ - The W3C Markup Validation Service - https://validator.w3.org/ - The W3C CSS Validation Service - https://jigsaw.w3.org/css-validator/