This is the notes taken while learning HTML/CSS.

[TOC]

CSS

Unit

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)	Try it

ch	Relative to the width of the “0” (zero)	Try it
rem	Relative to font-size of the root element	Try it
vw	Relative to 1% of the width of the viewport*	Try it
vh	Relative to 1% of the height of the viewport*	Try it
vmin	Relative to 1% of viewport’s* smaller dimension	Try it
vmax	Relative to 1% of viewport’s* larger dimension	Try it
%	Relative to the parent element

source: https://www.w3schools.com/cssref/css_units.asp

I find vh and vw very useful with the help of position: fixed and top, bottom, left, right to set the position of element relative to the viewpoint (the page).

Layout

Flex Box

An article solving alignment in CSS Flexbox

Everything You Need To Know About Alignment In Flexbox

justify- performs main axis alignment. Alignment in the same direction as your flex-direction

align- performs cross-axis alignment. Alignment across the direction defined by flex-direction. If they wrap.

align-item align items in relationship to each other on the cross axis. If they don’t wrap

Grid

https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

A summary about CSS Grid.

An example of CSS Grid in React, use `` to format string

return (
            <div
                className="Grid"
                style={{
                    display: 'grid',
                    gridTemplateColumns: `repeat(${columns}, 14px)`,
                    gridTemplateRows: `repeat(${rows}, 1fr)`,
                    gridRowGap: '0px',
                    gridColumnGap: '0px',
                    width: `${columns} * 15px`,
                }}>
                {display}
            </div>
        );

Center

show center part of a image

.imageContainer {
  grid-area: 1 / 1 / 5 / 3;
  width: 100%;
  height: 200px;
  background-position: center;
}

const RestaurantCard: FunctionComponent<Props> = (props) => {
  return (
    <div style={{ width: props.size }} className={style.container}>
      //a empty div show image as background
      <div
        className={style.imageContainer}
        style={{ backgroundImage: `URL(${props.imageURL})` }}
      ></div>
      <div className={style.infoArea}>
        <div className={style.restaurantName}>{props.name}</div>
        <div className={style.deliveryInfo}>
          {`$${props.fee} Delivery Fee | ${props.time} Min`}
        </div>
        <div className={style.ratingBack}>
          <div className={style.rating}>{props.rating}</div>
        </div>
      </div>
    </div>
  );
};

Screen Shot 2020-12-12 at 15.32.15

set a footer in the bottom of page

HTML:

<body>
  <header>h</header>
  <main>m</main>
  <footer>f</footer>
</body>

CSS:

...
main {
  ...
  //padding-bottom of main should >= footer height
  padding-bottom: 100px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}

Reference: https://segmentfault.com/a/1190000004453249

Selector

We can utilize CSS complex selector to add features according to variable

e.g.

<div class="xxxx validate-input">
                <div {% if form.non_field_errors %} class="error-input" {% endif %} >
                    <input class="yyyyy" type="text" name="user_email" placeholder="Email" {% if login_email %} value={{login_email}} {% endif%}>
                </div>
</div>

CSS:

1
2
3

.error-input .yyyyy {
  border: 2px red solid;
}

This css is used in yyyyy class which is descendent of error-input class

Ref: https://www.w3schools.com/cssref/css_selectors.asp

Selector	Example	Example description
.class	.intro	Selects all elements with class=”intro”
.class1.class2	.name1.name2	Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2	.name1 .name2	Selects all elements with name2 that is a descendant of an element with name1
#id	#firstname	Selects the element with id=”firstname”
*	*	Selects all elements
element	p	Selects all elements
element.class	p.intro	Selects all elements with class=”intro”
element,element	div, p	Selects all elements and all elements
element element	div p	Selects all elements inside elements
element>element	div > p	Selects all elements where the parent is a element
element+element	div + p	Selects the first element that are placed immediately after elements
element1~element2	p ~ ul	Selects every element that are preceded by a element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target=”_blank”
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word “flower”
[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value starting with “en”
[attribute^=value]	a[href^=”https”]	Selects every element whose href attribute value begins with “https”
[attribute$=value]	a[href$=”.pdf”]	Selects every element whose href attribute value ends with “.pdf”
[attribute=value*]	a[href*=”w3schools”]	Selects every element whose href attribute value contains the substring “w3schools”
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each element
::before	p::before	Insert something before the content of each element
:checked	input:checked	Selects every checked element
:default	input:default	Selects the default element
:disabled	input:disabled	Selects every disabled element
:empty	p:empty	Selects every element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled element
:first-child	p:first-child	Selects every element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
:first-of-type	p:first-of-type	Selects every element that is the first element of its parent
:focus	input:focus	Selects the input element which has focus
:fullscreen	:fullscreen	Selects the element that is in full-screen mode
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:indeterminate	input:indeterminate	Selects input elements that are in an indeterminate state
:invalid	input:invalid	Selects all input elements with an invalid value
:lang(language)	p:lang(it)	Selects every element with a lang attribute equal to “it” (Italian)
:last-child	p:last-child	Selects every element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every element that is the last element of its parent
:link	a:link	Selects all unvisited links
::marker	::marker	Selects the markers of list items
:not(selector)	:not(p)	Selects every element that is not a element
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every element that is the second element of its parent
:only-of-type	p:only-of-type	Selects every element that is the only element of its parent
:only-child	p:only-child	Selects every element that is the only child of its parent
:optional	input:optional	Selects input elements with no “required” attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
::placeholder	input::placeholder	Selects input elements with the “placeholder” attribute specified
:read-only	input:read-only	Selects input elements with the “readonly” attribute specified
:read-write	input:read-write	Selects input elements with the “readonly” attribute NOT specified
:required	input:required	Selects input elements with the “required” attribute specified
:root	:root	Selects the document’s root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links

Properties

border-radius

Ref:https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

Screen Shot 2021-02-17 at 22.11.57

<div className="progress" style={{height: `${size * 15}px`, borderRadius: "30px"}}>
    <div className={`progress-bar ${item <= 20 ? "bg-1" : item < 50 ? "bg-2" : "bg-3"}`} role="progressbar" style={{width: `${item}%`}} aria-valuenow="10"
         aria-valuemin="0" aria-valuemax="100"/>
</div>

HTML

Icon

Icon from Bootstrap

<LinkContainer to='/cart'>
  <Nav.Link>
    <i className='fas fa-shopping-cart'></i> Cart
  </Nav.Link>
</LinkContainer>

Form

Ref: https://stackoverflow.com/questions/16849117/html-how-to-do-a-confirmation-popup-to-a-submit-button-and-then-send-the-reque

The most compact version:

1	<input type="submit" onclick="return confirm('Are you sure?')" />

The key thing to note is the return

Because there are many ways to skin a cat, here is another alternate method:

HTML:

1	<input type="submit" onclick="clicked(event)" />

Javascript:

<script>
function clicked(e)
{
    if(!confirm('Are you sure?')) {
        e.preventDefault();
    }
}
</script>

Input text area

Ref: https://www.tutorialspoint.com/How-to-Create-a-Multi-line-Text-Input-Text-Area-In-HTML

We can use the textarea tag in HTML to create a multi-line text input in HTML −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML textarea Tag</title>
   </head>

   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         What improvements you want in College?
         <br>
         <textarea rows = "5" cols = "60" name = "description">
            Enter details here...
         </textarea><br>
         <input type = "submit" value = "submit" />
      </form>
   </body>
</html>

Form and button

Ref: https://www.w3schools.com/tags/att_button_form.asp

<form action="/action_page.php" method="get" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

Post info from the front end to back end with html form.

Hidden input in the form

We can use hidden input tag to indicate some info to pass to the back end:

<form action="/action_page.php" method="get" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname">
  <!--  hidden input here
	<input name="to_add" value="to_add">
	-->
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

Back end:

1
2
3


if "to_add" in request.POST:
  ...

HTML/CSS Learning Notes

HTML/CSS Learning Notes

CSS

Unit

Relative Lengths

Layout

Flex Box

An article solving alignment in CSS Flexbox

Grid

Center

show center part of a image

Footer

Selector

Properties

border-radius

HTML

Icon

Icon from Bootstrap

Form

Input text area

Form and button

Hidden input in the form

HTML/CSS Learning Notes

HTML/CSS Learning Notes

CSS

Unit

Relative Lengths

Layout

Flex Box

An article solving alignment in CSS Flexbox

Grid

Center

show center part of a image

Footer

Selector

Properties

border-radius

HTML

Icon

Icon from Bootstrap

Form

Confirmation popup in form

Input text area

Form and button

Hidden input in the form