HTML and CSS

Posted on:September 23, 2022 at 03:22 PM

<!DOCTYPE html> : Tells browser that it is an HTML 5 document.

Most common tags

block vs inline elements

Block elements features

Note:

Inline elements features

Inline-block elements

CSS box model

margin vs padding

margin

/* margin can have upto 4 attributes and has long & short forms */

margin: 1em|-3px; /* Apply to all four sides */
margin: 2px 1em 0 auto; /* top | right | bottom | left */
margin: 5% auto; /* vertical, horizontal */
margin: 1em auto 2em; /* top | horizontal | bottom */

Padding

Centering the element

Borders

border-color

/* Works just like margin & padding in terms of long and short form syntax. */
border-color: red; /* All sides */
border-color: red #32a1ce; /* Vertical and horizontal */
border-color: red rgba(170, 50, 220, 0.6) green; /* Top horizontal and bottom */
border-color: red yellow green transparent; /* top | right | bottom | left */

border-style

/* Works just like margin & padding in terms of long and short form syntax. */
border-style: none;
border-style: dotted;
border-style: inset;
border-style: dashed solid;
border-style: dashed double none;
border-style: dashed double none;

border-width

/* Works just like margin & padding in terms of long and short form syntax. */
border-width: thick;
border-width: 1em;
border-width: 4px 1.25em;
border-width: 2ex 1.25ex 0.5ex;
border-width: 0 4px 8px 12px;

Building responsive UI (CSS)

Day1, using percentages and avoiding heights

Note: By default, the font-size in a browser is 16px.

Why we should never specify the height of a block level element:

Responsive layouts

Day2, getting familiar with relative units

em vs rem

em

btn {
  /* 2.5 times the font-size of the parent element. */
  font-size: 2.5em;
  /* 2 times the font-size of current element, 
  ie. 5 times the size of parent element. */
  margin: 2em;
}

rem

Note: If a font-size of an element is not defined, it is searched in the parent and so on.

Day3, max-width

_ We should set max-width of an element to avoid stretching for big screen-size.

Gradients

Gradients are implemented as image, so we need to tweak the background image property.

/* teo colors, start from top(default) */
background-image: linear-gradient(red, blue);

/* Start from right to left */
background-image: linear-gradient(to left, red, blue);

/* Start from bottom left to top right*/
background-image: linear-gradient(to right top, red, blue);

/* This is same as the above */
background-image: linear-gradient(45 deg, red, blue);

/* Striped pattern */
background-image: linear-gradient(
  to left,
  red 10%,
  blue 10%,
  blue 20%,
  red 20%
);

/* Start transition from 10% height */
background-image: linear-gradient(red 10%, blue);
background-image: linear-gradient(red 100px, blue);

/* Use four colors for transition */
background-image: linear-gradient(red, pink, orange, blue);

/*  */
background-image: radial-gradient(red, blue);

background-image: radial-gradient(red 50%, blue);

/* Sharp boundaries */
background-image: radial-gradient(red 30%, blue 30%, blue);

/* Concentric circles pattern */
background-image: radial-gradient(
  to left,
  red 10%,
  blue 10%,
  blue 20%,
  red 20%
);

/* Repeating circles */
backrgound-image: repeating-radial-gradient(
  red,
  red 10px,
  blue 10px,
  blue 20px
);

/* Repeating lines */
backrgound-image: repeating-linear-gradient(
  red,
  red 10px,
  blue 10px,
  blue 20px
);

Why we use HSL colors

Semantic markup

Opening and closing tags

paragraph (p)

headings tag (h1, h2..)

List

anchor tags (a)

Image tag (img)

fieldset

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" />
    <label for="sasquatch">Sasquatch</label><br />
  </fieldset>
</form>

Odd tags

HTML entity codes

input tag

<form method="post" action="/projects/new">
  <p>
    <label> Name: <input name="name" type="text" /> </label>
  </p>
  <p>
    <label>
      Description:
      <br />
      <textarea name="description" />
    </label>
  </p>
  <p>
    <button type="submit">Create</button>
  </p>
</form>

HTML form

comments

HTML Table

CSS

CSS variables

Properties should be seperated by a semicolon ;

Three ways to add CSS

Colors site

CSS properties

Color representation:

Common text properties

Note: order matters, the latest style is applied. Also while linking css files the last file has the final say.

CSS Specificity:

Id>class>elements Inline style and ! important.

CSS inheritance:

CSS box model

Note:

Border properties

Shorthand for border properties:

Padding and margin properties

Shorthand for padding properties

display property

CSS units

Position

CSS transition

Complex transition usage:

Transform property

background property

Google fonts

Flexbox

Provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

flex model

flexbox container properties

flexbox item properties

Note: flex-grow:2; does not mean that the element will be double the width of element with flex-grow: 1;. Same holds true for flex-shrink property. It’s their rate of shrinking and growing and not the final rendered size.

CSS Grid

Flexbox vs grid

Grid terminology

Properties for the Parent(Grid Container)

.container {
  grid-template-columns: ... ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Properties for the Children(Grid Items)

Special Units & Functions

Sizing Keywords

Sizing Functions

Responsive design and media queries

Media queries

Viewport

CSS Grid

Grid terminology

Grid properties

Properties for the Parent (Grid Container)

display

.container {
  display: grid | inline-grid;
}

grid-template-columns and grid-template-rows

.container {
  grid-template-columns: ... ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

/* you can choose to explicitly name the lines. Note the
   bracket syntax for the line names:*/
.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

/* A line can have more than one name */
.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

/* repeat() notation for repeating parts */
.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

/* This is same as above */
.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

/* If multiple lines share the same name, they can be referenced
   by their line name and count. */
.item {
  grid-column-start: col-start 2;
}

/* The free space is calculated after any non-flexible items*/
.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

/_ syntax _/

/* <grid-area-name> is grid-area property of grid-item */
.container {
  grid-template-areas:
    "<grid-area-name> | . | none | ..."
    "...";
}

/* example: Each row in your declaration needs to have the 
   same number of cells. */
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

grid-template

/*  
  none – sets all three properties to their initial values
  <grid-template-rows> / <grid-template-columns> – sets grid-template-columns 
  and grid-template-rows to the specified values, respectively, and sets 
  grid-template-areas to none
*/

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

column-gap/row-gap and grid-column-gap/grid-row-gap

grid-gap

/* syntax */
.container {
  /* standard */
  gap: <grid-row-gap> <grid-column-gap>;

  /* old */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

/* Example */
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 15px 10px;
}

CSS selectors

  1. Element type(‘p’ ): Select all paragraph elements

  2. Element ID(‘#25’): Select all elements with id=25

  3. Element Class('.text'): Select all elements with class=text

  4. Descendant combinator(‘ ‘ or ‘-’): eg. div p , Select all paragraph elements (descendants) under div elements

  5. Child combinator(‘div>p’ ): Select all paragraph elements whose immediate parent is div. For eg. ul > li will match all <li> elements that are nested directly inside a <ul> element

  6. Attribute(‘div[attr]’ ): Select all div elements having ‘attr’ attribute)

  7. Attribute value(‘div[attr=val]’): Select all div elements with attr value equal to ‘val’

  8. Universal selector ‘*’ : Matches any type, usually ommited, eg. *.text and .text are same.

  9. [attr~=value]: Elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

  10. [attr\|=value]: Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

  11. [attr^=value]: Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

  12. [attr$=value]: Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

  13. [attr\*=value]: Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

  14. [attr operator value I]: Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

  15. Adjacent sibling combinator(+): eg. ‘img + p’, matches the second element only if it immediately follows the first element, and both are children of the same parent element.

  16. General sibling combinator(~): eg. ‘img ~ p’, separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

  17. Psuedo classes(‘:’): pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). eg. div:hover, a:visited, :checked

    • :active: clicked
    • :checked
    • :first
    • :first-child
    • :hover
    • :not()
    • :nth-child()
    • :nth-of-type(2n)
    • :first-of-type

  18. Psuedo elements(‘:’ or ‘::’): pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For eg., ::first-line can be used to change the font of the first line of a paragraph. eg.

    • ::after
    • ::before
    • ::cue
    • ::first-letter
    • ::first-line
    • ::selection
    • ::slotted
    • ::backdrop
    • ::placeholder
    • ::marker
    • ::spelling-error
    • ::grammar-error

  19. To extract attribute(‘::attr(attributename)’): Can be used to extract href from anchor tag(a).

  20. List of selectors: Comma seperated list of selectors for eg, div, span will select all divs and spans.

XPATH

Absolute Xpath : Begins with /
Relative Xpath : Begins with //

xpath axes methods