CSS

[YuezhenQin]

Responsive Web Design (RWD)

The primary techniques in responsive web design is using fluid, proportion-based grids, flexible images and media queries to adjust the layout of a website based on the size and resolution of the user's device.

To center an element

margin: 20px auto;

display: flex;
justify-content: space-between;

To adjust the spacing within an element

padding: 0 7px;

To size an element

1. px: You don't always have to use pixels when sizing an element.
2. %

p selector

p {
    margin: 0;
}

global selector

* {
    box-sizing: border-box; 
}

Apply font sharpening:

:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
}

In HTML, :root represents the element and is identical to the selector html, except that its specificity :root>HTML.

[YuezhenQin]

CSS selectors

* {} (global selector)

type (element selector)

• type:last-of-type{}
• type[attr=""]{} //element's attribute selector

#id (id selector)

.class (class selector)

• .class type {} //section selector

CSS pseudo selectors

use CSS pseudo selectors to change specific HTML elements

[YuezhenQin]

layout

Using these two margin properties, center the #menu element horizontally within the body element.

margin-left: auto;
margin-right: auto;

Give your menu some space between the content and the sides with various padding properties.

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

Focusing on the menu items and prices, there is a fairly large gap between each line.

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
}

To keep the CSS organized, add a comment at the end of styles.css with the text FOOTER.

/* FOOTER */

To center an element

h1, p {
    margin: 1em auto; /* vertical, horizontal */
}

input[type="submit"] {
    margin: 0 auto;
}

ref: https://www.youtube.com/watch?v=9ElrcTtAxzA

[YuezhenQin]

body {
    background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

[YuezhenQin]

<p class="flavor">French Vanilla</p><p class="price">3.00</p>

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 50%;
}

.price {
  text-align: right;
  width: 50%;
}

[YuezhenQin]

Learn Basic CSS by Building a Cafe Menu

[YuezhenQin]

vh: viewpoint height rem: root em

[YuezhenQin]

Follow accessibility best practices by linking the input elements and the label elements in the first fieldset.

<fieldset>
    <input type="text"> 
    <input type="email">
    <lablel for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-zA-Z]{8,}" required></label>
</fieldset>

<fieldset>
    <label><input name="account-type" type="radio" checked> Personal</label>
    <label><input name="account-type" type="radio"> Business</label>
</fieldset>

<input type="checkbox">

<input  type="file">

[YuezhenQin]

Default

Most browsers inject their own default CSS properties and values for different elements.

By default, a padding of 1px 2px is given to input elements you can type in.

[YuezhenQin]

Use padding to adjust the spacing within an element.

Use margin to adjust the spacing outside of an element.

• vertical margin, and horizontal margin

[YuezhenQin]

overflow

The overflow CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction. overflow: hidden

[YuezhenQin]

CSS box model

reset the box model

If you inspect your .label element with your browser's developer tools, you may notice that it's actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element's size.

To solve this, reset the box model by creating a * selector and giving it a box-sizing property of border-box.

* {
    box-sizing: border-box;
}

Now that you have reset the html box model, you need to pass that on to the elements within as well. To do this, you can set the box-sizing property to inherit, which will tell the targeted elements to use the same value as the parent element.

You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the ::before and ::after pseudo-elements.

For now, create a CSS selector to target all elements with *, and include the pseudo-elements with ::before and ::after. Set the box-sizing property to inherit.

*, *:before, *:after {
    box-sizing: border-box;
}

universal box-sizing with inheritance

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

source: https://css-tricks.com/box-sizing/

[YuezhenQin]

CSS flexbox

make it a flex container

.gallery {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
}

Flexbox has a main and cross axis. The main axis is defined by the flex-direction property, which has four possible values:

row (default): horizontal axis with flex items from left to right row-reverse: horizontal axis with flex items from right to left column: vertical axis with flex items from top to bottom column-reverse: vertical axis with flex items from bottom to top

Make it so your flex items wrap to the next row when they run out of space.

The justify-content property determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.

The align-items property positions the flex content along the cross axis. In this case, with your flex-direction set to row, your cross axis would be vertical.

use Flexbox to horizontally center the text.

display: flex;
justify-content: center;

Step20. Notice how some of your images have become distorted. This is because the images have different aspect ratios. Rather than setting each aspect ratio individually, you can use the object-fit property to determine how images should behave.

Give your .gallery img selector the object-fit property and set it to cover. This will tell the image to fill the img container while maintaining aspect ratio, resulting in cropping to fit.

Step21. The gap CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The gap property and its row-gap and column-gap sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.

Give your .gallery flex container a gap property with 16px as the value.

[YuezhenQin]

CSS grid

https://blog.logrocket.com/css-flexbox-vs-css-grid/

[YuezhenQin]

Functional pseudo-classes

:not()

represents any element that is not represented by its argument.

[YuezhenQin]

display

display: inline-block