Day 3

Local Setup STEPS:

  1. Create an account on CodeSandbox.io
    www.codesandbox.io
  2. Create an account on GitHub
    www.github.com
  3. ​Create an account WebMasters Portal
    www.bewebmasters.com

HTML Attributes

Key-values added in opening tag.

Global

Enumerated

Boolean

can appear on any tag:

  1. id,

  2. class,
  3. style
  4. role
  5. data etc.

no values required, any value given will be regarded as true:

  1. disabled,

  2. checked,
  3. autocomplete
  4. readonly etc.

a set of predefined values  

  1. type etc.

**Note:

  1. Some attribute values are case sensitive, eg: id, class

List of all Global Attributes

<div class="container">
   - I'm <span class="name-span">
              Yash Priyam 
         </span>

  <p class="para1 info" id="one">
    - I am a software developer.
  </p>

  <p class="para2 info" id="two">
    - And I love basketball.
  </p>

</div>

Working with id and class attributes:

id class
takes only one value (string) can take multiple space seperated values (string)

Mainly used to target HTML tags for styling or other puropses.

CSS with HTML

CSS - Cascade Style Sheets.

Q1. Where can you write CSS?

Ans: Three places:

  1. in a .css file,
  2. in the <style> tag inside the .html file
  3. in the style attribute on HTML tag.

Q2. How can you connect CSS with appropriate HTML?

Ans: Three ways:

  1. by class name of HTML tag
  2. by id of HTML tag
  3. by tag name of HTML tag

Steps for CSS

  1. Write CSS.
  2. Connect it with correct HTML
<!-- index.html -->

<div class="container">
   - I'm <span class="name-span">
              Yash Priyam 
         </span>

  <p class="para1 info" id="one">
    - I am a software developer.
  </p>

  <p class="para2 info" id="two">
    - And I love basketball.
  </p>

</div>
/* index.css */

.container {
/*   class based styling */
}

.name-span {
/*   class based styling */
}

span {
/*   tag based styling */
}

p {
/*   tag based styling */
}

.para1 {
/*   class based styling */
}
.info {
/*   class based styling */
}

#one {
/*   id based styling */ 
}

#two {
/*   id based styling */
}

Some generic CSS rules

  • width
  • height
  • background
  • border
  • padding
  • margin
  • font
  • color
  • display
  • position 
  • units (px, %, rem, em, vh, vw)etc

Selectors in CSS:

  • universal selector (*)
  • class, id, and tag selector
  • attribute selectors
  • pseudo-classes
  • pseudo-elements

Combinators in CSS:

combining selectors 

  • general, sibling, child,
  • descendant, adjacent
  • combined, grouped
  • Flex
  • Grids

Some generic CSS rules

width, height

** can be set on any element,

fixes the dimensions,

remains as is across phone, desktop, tab

.container {
/*   class based styling */
  width: 100px;
  height: 100px;
}

span {
/*   tag based styling */
  width: 100px;
  height: 100px;
}

#one {
/*   id based styling */ 
  width: 100px;
  height: 100px;
}
  1. Create a simple HTML document with the following HTML and add different width and height to each tag.
    Use the inspector the see each tags default width, height and set width, height.

Questions (use a devbox from codesandbox.io)

<!-- index.html -->

<div class="container">
   - I'm <span class="name-span">
              Yash Priyam 
         </span>

  <p class="para1 info" id="one">
    - I am a software developer.
  </p>

  <p class="para2 info" id="two">
    - And I love basketball.
  </p>

</div>
.container {
/*   class based styling */
  width: 100px;
  height: 100px;
}

span {
/*   tag based styling */
  width: 100px;
  height: 100px;
}

#one {
/*   id based styling */ 
  width: 100px;
  height: 100px;
}

Some generic CSS rules

background color:

.rebecca-purple {
  background-color: gray;
}

.green {
  background-color: hsl(180deg, 70%, 18%);
}

.red {
  /* hsl(0deg, 70%, 18%);*/
  background-color: #4e0e0e;
}

.yellow {
  /*hsl(60deg, 70%, 80%);*/
  background-color: rgb(240, 240, 168);
}

.blue {
  /* hsl(210,70.6%,80%) */
  background-color: rgb(65.9%, 80%, 94.1%);
}

background color: on the entire background (page)

Some generic CSS rules

background image:

.demo {
  width: 100px;
  height: 100px;
  
  
  background: url(https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg);
  background-repeat: no-repeat;
  /* Consistent styling for image */
  background-size: 100%;
  background-position: right 50%;
}

Some generic CSS rules

Complex

background image:

#demoBox {
  aspect-ratio: 1/1;
  border: 0.5px solid hsla(0deg, 0%, 60%, 0.5);
  width: 100%;
  border: 1px solid hsla(0deg, 0%, 40%, 0.25);
  padding: 1rem;
  
  
  
  background-image: 
    url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%;
  background-origin: padding-box, border-box, content-box;

  /*   background: 
   * url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box,
   * url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box,
   * linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ; */
}

Some generic CSS rules

borders:

.demo {
  width: 100px;
  height: 100px;\
  
  
  border-width: thin; /* thin, medium, thick, 10px */
  border-style: solid; /* dotted, dashed, solid, double, groove, ridge, inset, outset */
  border-color: yellow; /* any colour in any unit*/
  
  /* border shorthand */
  border: 1px solid red;
}

Some generic CSS rules

border radius:

.border {
  width: 100px;
  height: 100px;

  /* border shorthand   
  border: 2px solid red;
  */

  border-radius: 1em;

  /*   
  border-radius: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
  */
  /* 
  border-radius: 1em 2em 3em 4em; 
  */

  /*   
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
  
  */
}

Question

  • Create an image card with rounded borders

  • Create an image card with rounded borders 3 elliptical and 1 rounded border like in the website.