Tailwind CSS is a utility-first CSS framework designed to allow developers to build custom designs quickly. Instead of writing custom styles, Tailwind provides a collection of utility classes that you can use to style elements directly in the HTML. 1. Installation and Setup How to install Tailwind using CDN For quick prototyping, you can include Tailwind directly in your project with a CDN. Add the following to your HTML <head> tag: ...
CSS (Cascadia Styling Sheet) is the style sheet language that’s use to specify how a document written in HTML or XML should be presented and styled. CSS Boilerplate *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ width: 100%; height: 100%; } How to Link CSS with HTML Add the line after tittle tag in your html file <link rel="stylesheet" href="style.css"> Tips: We use . dot to target class in CSS We use # hash to target id in CSS Also if you want to target tag we can simply target like h3{} Div: box means div and also when e have more than one element and also when there is rectangle shape, very high change there is div ;). Units in CSS px : It is use to define the measurement in pixels. 1px = 1/96th of inch % : It is used to define the measurement as a percentage that is relative to another value (maybe to their parent element). vh : It is relative to the height of the viewpoint(screen). 1vh = 1% or 1/100 of the height of the viewpoint vw : It is relative to the width of the viewpoint(screen). 1vm or 1/100 of the width of the width of viewpoint em : Relative to the font-size of the element 2em means 2 times the size of the current font rem : Relative to font-size of the root element like html tag. vmin : Relative to 1% of viewport’s* smaller dimension vmax : Relative to 1% of viewport’s* larger dimension Tip: There are mainly two type of fonts sans-serif and serif. The difference is the presence of decorative strokes, or serifs at the beginning and end of letters. ...