Ultimate Guide For - CSS

Cascading Style Sheet

CSS used to describe the look & presentation of a document written in HTML. It defines how elements are displayed on a web page. CSS makes websites visually appealing and user-friendly.

History of CSS

CSS was created by a group of individuals known as the World Wide Web Consortium (W3C).

Primary contributors include Håkon Wium Lie and Bert Bos.

CSS standards and specifications are maintained by the W3C.

A community of web developers, designers, and browser vendors also contribute to its evolution, Regular updates and new versions ensure CSS remains relevant and adaptable to changing web design needs.

CSS Rule Structure

CSS rule consists of a selector and a declaration block.

Declarations are used to define the style properties for the selected elements

Each declaration consists of a property and a value.

How to add CSS in HTML ?

Inline CSS Style applied directly to an HTML element using the style attribute

Internal CSS Styles defined within the style tag within the HTML document's head

External CSS Styles stored in separate .css files linked to the HTML document using the link element

See the Pen How To Add CSS in HTML ? by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.

Types of Selectors

See the Pen Types of Selectors by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.

Colors in CSS

Color Names Red, Green, Blue, Gray, etc...

RGB Color rgb(red, green, blue) - rgb(106, 90, 205)

HEX Color #rrggbb -#6a5acd

HSL Color hsl(hue, saturation, lightness) - hsl(248, 53%, 58%)

Color Picker

We have CSS Color Picker in VS Code to select variety of colors.

Box Model

The CSS Box model defines how elements are rendered and how their dimensions are calculated. It describes the structure of an element as a rectangular box that has content, padding, a border, and a margin.

Content The innermost component of the box model is the actual content of the element. It can be text, image, video, etc. The content area is defined by the width and height properties.

Padding The space between the actual content and the border of the element is the padding.

Border The border surrounds the content and padding and gives the visual border of the element.

Margin The margin is the space outside the element that separates it from other elements in the layout.

Learn CSS Practically

Now in this section we are Start Learn CSS Practically, here we are learn css practically by building component with CodePen.

here you can check all examples in CodePen ↗️

Build Navbar With Flexbox

Here we creating a stylish and functional navigation bar from scratch, using only plain HTML and CSS. Master essential techniques to build this component.

See the Pen Navbar with Flexbox by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.

Build Header Section

Header element represents a container for introductory, effectively grabs the users attention content.

See the Pen Build Header ( Hero Section ) by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.

Build Card

Cards are excellent for organizing content like products, user profiles, news articles, etc. . .

See the Pen Build Card by Krunal-Jagtap (@Krunal-Jagtap) on CodePen.

Your CSS Journey

Now we have got a solid grasp of CSS fundamentals from syntax and selectors to the crucial Box Model and making your designs responsive But remember, CSS is a language best learned by doing!

CSS is a vast and continuously evolving field keep practicing, keep experimenting, and enjoy bringing your web designs to life with CSS

Happy C o d i n g !