All you need to know

[{"selector":"#anim-6e6124ba-7d26-4238-88bf-eb48c3e15b0d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ac59f1b0-1faa-4310-9aba-5688400ef4e1","keyframes":{"transform":["translate3d(0px, -390.07683%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] An Overview of the Different Types of CSS

Introduction to CSS

[{"selector":"#anim-52a54ddc-8a0c-4365-b6b4-eaab2a6782c9 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(6.846869328454303%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-d9d1e139-c5a0-4acf-80bc-2ad375cd1b55","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-14f99ffa-4e92-467e-84c6-3430f4a91a8b","keyframes":{"transform":["translate3d(0px, -298.58579%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-29816897-0163-4b44-b16c-df5238fbcf5b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05bd5986-ff99-4258-b51a-6b27365bb47b","keyframes":{"transform":["translate3d(0px, -262.37372%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] CSS (Cascading Style Sheet) is a language used to describe the appearance of webpages, including layout, font, color, animations, etc., making the website visually stunning. Learn through Example

Understanding different types of CSS is very helpful in deciding which type to use to style our web page.

[{"selector":"#anim-05baa042-4bbf-490b-8a34-38b642a59894","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8076e18f-9bc7-42b6-bb88-9637d4dfa372","keyframes":{"transform":["translate3d(0px, -357.86729%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bbe379c3-8bcf-4a4a-bf91-c5c93763681c [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.868525640762189%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] Learn More

Types of CSS

[{"selector":"#anim-d3b14e69-bd25-4769-a1ab-9e81b778301f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c553b003-7bdb-4f3f-8653-be24db83ce04","keyframes":{"transform":["translate3d(0px, -606.78203%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-644b92ac-413e-436e-8b25-d2a08b3019c4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-bd427cd7-debe-4a08-86ea-482cc6c03b64","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a013db97-7a0e-49ad-b507-788d50e1796b","keyframes":{"transform":["translate3d(0px, -298.58579%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] There are basically three types of CSS to use in HTML- Explore Now

1. Inline CSS

[{"selector":"#anim-4538c765-53cd-4ad0-90bc-07212b4be009","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5c504f3d-1902-46ea-8c67-ba7e38dc77ee","keyframes":{"transform":["translate3d(0px, -265.55555%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4779a861-6fca-4fc0-bb54-6b8af9084848 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-23d3f0bd-e364-4774-9daf-3b86febe0211","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f4659fb-da2d-452f-9ed3-c52eeb7783f3","keyframes":{"transform":["translate3d(0px, -680.63506%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] A way of adding a unique style to a particular element. You can add a style attribute to the relevant HTML tag and then provide different styles within the style attribute. Check out Examples

2. Internal CSS

[{"selector":"#anim-b37e6441-b0e0-4821-8ab0-037d104ca0c5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0a95cce1-9a3c-488a-81df-e3f53e9beaf6","keyframes":{"transform":["translate3d(0px, -265.10098%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91c6a7b6-efdd-449c-9e42-ca88095f43f7 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.868525640762189%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-6848a693-bfbc-4dd6-8f6d-e7a43dc3b09d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1e20c698-0f04-47f9-aacc-d95c7e9bf5b7","keyframes":{"transform":["translate3d(0px, -677.77778%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] With internal CSS, the CSS property and value are not included in a style attribute, but rather in a curly bracket with the <style></style> tags inside the head section. Check out Examples

3. External CSS

[{"selector":"#anim-f727f6af-d9ea-4895-8fba-f06332256996","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d5101372-786b-450b-9aa8-75afeb0fb7e1","keyframes":{"transform":["translate3d(0px, -298.49846%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-60848c7b-d566-4797-bf1f-9af88b05031d [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.868525640762189%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-607d8099-cb0b-45d5-82ad-566e70676b3e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7b9bfcd2-1271-4c38-9ab7-6d04d35cad3b","keyframes":{"transform":["translate3d(0px, -700.63495%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] It differs from internal CSS as styles are located in a separate file that has .css extension and then linked to the HTML using the <link> tag. Check out Examples

“

[{"selector":"#anim-3ca7d901-2893-4624-82bc-1deb91771320","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ee8ef0f8-8d6a-42e2-bc8b-637dbd1e07bd","keyframes":{"transform":["translate3d(0px, -191.21864%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-248697d5-bd78-4871-bac5-dba6f3243cc0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3c901d0b-f371-49ab-b0d0-d5aa12bccf9d","keyframes":{"transform":["translate3d(0px, -1772.06357%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn about CSS types and the elements used in CSS with examples. SWIPE UP