HTML5 CSS3

How HTML5 and CSS are Advancing Web Development

With the evolution of technology, web development has become more sophisticated, efficient, and dynamic. Two major programming languages -HTML5 and CSS- have played a big role in advancing web development. HTML5 and CSS have brought unprecedented changes to web design and development, making pages load faster, responsive, and more visually compelling. This article will explore how HTML5 and CSS are advancing web development. In particular, we will focus on how HTML5 and CSS are improving user experience, enhancing page accessibility, and optimizing web performance.

HTML5

1. h1 p strong em
2. img src br hr ol ul li
3. a href, relative & absolute path
4. form input
5. input-radio-name checkbox
6. select option
7. value prop & name prop
8. div(block) span(inline)
9. html5 semantics

CSS

1. /* Selector {
     Property : value;
   }*/
   h2 {
     color: red;
   }
   

2. CSS (Cascading Style Sheets) The cascading rules in CSS are applied through a three-step process known as the "Cascading Order." Here's how it works:

   Source Order: Styles are applied in the order they are defined. If there are multiple styles defined for an element, the later ones will override the earlier ones. (The later the priority, the higher the priority.)

   Specificity: If two styles affect the same element, the one with the more specific selector will take precedence. For example, an ID selector is more specific than a class selector, which is more specific than a tag selector.

   Importance: Styles marked with !important have the highest priority. If !important is used, it overrides both specificity and source order.

   By applying these rules, CSS determines which styles are applied to each element on a webpage, allowing for complex designs and layouts.

3. Inline style: specify by using style attribute inside a tag

4. Style tag

5. Import with css file

6. CSS Properties

• CSS Almanac
• border: 5px solid rgba(255, 231, 170, 0.5);
• text-align: center;
• background-image: url(some_url);
• background-size: cover;
  • This will adjust the size of the picture to the background.
• list-style: none;
• cursor: pointer;
• display: inline-block;

7. Color Picking

• Pick A Color !
• color: #AA3939;

8. Selector

• Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter.
• .class
• #id
• h5, p {...} (element, element)
• element
• element, element (both)
• element element (all element2 inside element1)

  • <h2>
      AAA
      <p>BBB</p>
      <p>CCC</p>
    </h2>
    

• element > element (all element2 have parent of element1)
• element + element (select element2 that is exactly after element1) sibling

  • <h2>AAA</h2>
    <p>BBB</p>
    

• :hover
• :last-child
• :first-child
• !important (not recomended)

  • h2 {
      color: pink !important;
    }
    

9. Text & Font

• text-decoration: underline;
• text-decoration: line-through;
• text-transform: uppercase;
• line-height: 20px;
• font-style: italic;
• font-weight: bold;
• font-size: 80%;
• font-family: "Time New Roman", Georgia;
• Google Font

10. Image

• <img src="" width="" height="" />
  

• img {
    <!-- float the image to the left, wrapped by text -->
    float: left;
  }
  footer {
    clear: both;
    text-align: center;
  }
  

• clear property

11. Box Model

• 

• an example below:

• .boxmodel {
    border: 5px solid red;
    display: inline-block;
    padding: 5px 10px;
    margin: 0px 20px;
    width: 40px;
    height: 60px;
  }
  

12. px VS em VS rem

• px is a specific pixel value
• em is a multiple pixel value relative to the relative value (external wrapped elements)
• rem is a multiple pixel value relative to the relative value (root element)

13. Minify CSS

14. Flexbox cheatsheet

• Flexbox

• .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  

15. CSS 3

• transition property (what, dutation, how)

• transform property (to what status)

• img {
    transition: all 1s;
  }
  
  img:hover {
    transform: scale(1.1);
  }
  

• animation

  • resource1
  • resource2

16. Responsive UI