malijetal / html-css

In this tutorial, we will be learning basic to next level features and properties of HTML and CSS. We are using HTML5 and CSS3 to make modern and user interactive web pages. This tutorial will help you to get pro in your web development skills. For more info, Stay Tuned!

HTML-CSS

In this tutorial, we will be learning basic to next level features and properties of HTML and CSS. We are using HTML5 and CSS3 to make modern and user interactive web pages. This tutorial will help you to get pro in your web development skills. For more info, Stay Tuned!

CSS

---

• CSS gives style to raw HTML.

• CSS stands for Cascading Style Sheets

• CSS used to style to our we b pages.

• CSS makes websites responsive.

• HTML is used to structure a website, CSS takes responsibility to design.

• Syntax:

  • p : {color : blue;}
    selector : {property: value;}

• CSS Selectors:

  • CSS Selectors are used to find the element whose property will be set
  1. CSS Element Selector
  2. CSS Id Selector
  3. CSS Class Selector
  4. CSS grouping Selector

• FlexBox

  • Flexbox is a one-dimensional layout method for laying out items in rows or columns.
  • It is better way to align items into a container

• Responsive Design

  • Endless new resolutions and devices are difficult to support seperately for a web developer.
  • Responsive design make website adapt to all devices and resolutions.
  • Responsive Design is neccessary.
  1. To achieve responsive design
  • Setting up viewport.
  • Use max-width/min-height
  • Using CSS Media Queries.
  • Using rem/vh/vw units over pixels.

• Static Absolute Relative Fixed Sticky

• Ststic - default not affected by top,right,left,bottom properties

• Absolute - relative to nearest positioned ansectors

• Relative - relative to its normal position

• Fixed - relative to viewpoint

• Sticky - based on user's scroll position