What you will learn

• CSS selectors
• Flexbox
• Grid
• Animations
• Responsive design

Course content (34 lessons)

1. 1. CSS - Overview — What is CSS? CSS (Cascading Style Sheets) is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web…
2. 2. CSS - Syntax — CSS Syntax A CSS rule-set consists of a selector and a declaration block. Selector : Defines the element you want to style (e.g., h1 , table ). Property : A type of attribute of…
3. 3. CSS - Inclusion — Ways to Associate Style There are four ways to associate styles with your HTML document. 1. Embedded CSS - The <style Element You can put your CSS rules into an HTML document…
4. 4. CSS - Measurement Units — CSS Measurement Units CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as…
5. 5. CSS - Colors — CSS Colors CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or for the background. Color…
6. 6. CSS - Backgrounds — CSS Backgrounds The background properties are used to define the background effects for an element. 1. background-color Specifies the background color of an element. 2.…
7. 7. CSS - Fonts — CSS Fonts The CSS font properties define the font family, boldness, size, and style of a text. 1. font-family The font family of a text is set with the font-family property. Start…
8. 8. CSS - Text — CSS Text Formatting This chapter contains properties that allow you to format text. 1. text-color The color property is used to set the color of the text. 2. text-align The…
9. 9. CSS - Images — CSS Images Images can be styled using borders, sizing, and opacity. Image Borders Property border is used to specify width, style, and color of the border around an image. Image…
10. 10. CSS - Links — Styling Links Links can be styled with any CSS property (e.g., color , font-family , background , etc.). The Four Link States Links can be styled differently depending on what…
11. 11. CSS - Tables — CSS Tables The look of an HTML table can be greatly improved with CSS. 1. Table Border To specify table borders in CSS, use the border property. 2. Collapse Borders The…
12. 12. CSS - Borders — CSS Borders The CSS border properties allow you to specify the style, width, and color of an element's border. 1. Border Style The border-style property specifies what kind of…
13. 13. CSS - Margins — CSS Margins Margins are used to create space around elements, outside of any defined borders. 1. Margin - Individual Sides CSS has properties for specifying the margin for each…
14. 15. CSS - Paddings — CSS Padding Padding is used to create space around an element's content, inside of any defined borders. 1. Padding - Individual Sides CSS has properties for specifying the padding…
15. 14. CSS - Lists — CSS Lists The CSS list properties allow you to: Set different list item markers for ordered lists. Set different list item markers for unordered lists. Set an image as the list…
16. 16. CSS - Cursors — CSS Cursors The cursor property specifies the type of cursor to be displayed when pointing on an element. Common Cursor Values Value Description :--- :--- alias The cursor…
17. 17. CSS - Outlines — CSS Outlines An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". Outline vs Border 1. Space : Outlines do not take up space.…
18. 18. CSS - Dimension — CSS Height, Width and Max-width The CSS height and width properties are used to set the height and width of an element. The max-width property is used to set the maximum width of…
19. 19. CSS - Scrollbars — CSS Scrollbars While standard CSS has properties like overflow , styling scrollbars is essentially done using vendor-specific pseudo-elements (mainly WebKit for Chrome, Safari,…
20. 20. CSS - Visibility — CSS Visibility The visibility property specifies whether or not an element is visible. 1. Visible The default value. The element is visible. visibility: visible; 2. Hidden The…
21. 21. CSS - Positioning — CSS Position Property The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute, or sticky). 1. position: static; HTML…
22. 22. CSS - Layers (Z-index) — CSS Z-index (Layers) When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in…
23. 23. CSS - Pseudo-classes — CSS Pseudo-classes A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it. Style visited and…
24. 24. CSS - Pseudo-elements — CSS Pseudo-elements A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element. Insert…
25. 25. CSS - @ Rules — CSS At-Rules At-rules are standard CSS statements that instruct CSS how to behave. They begin with an at sign ( @ ), followed by an identifier and (if it's a block statement) a…
26. 26. CSS - Filters — CSS Filters The filter property defines visual effects (like blur and saturation) to an element (often <img ). Common Filter Functions 1. blur(px) : Applies a blur effect to the…
27. 27. CSS - Media Types — CSS Media Types Media types allow you to specify how documents will be presented on different media. The document should be displayed in a font on screen, but clearly on print.…
28. 28. CSS - Paged Media — CSS Paged Media Content in Paged Media is split into one or more discrete pages. Paged media properties handle how content is distributed across pages (e.g., for printing or PDF…
29. 29. CSS - Aural Media — CSS Aural Media (Speech) Aural media sheets allowed control over the quality of synthetic speech (volume, pitch, speed, etc.). NOTE: Many of these properties are now part of the…
30. 30. CSS - Printing — CSS for Printing Optimizing web pages for printing is a key part of CSS. It involves hiding unnecessary elements, adjusting fonts, and setting page margins. Best Practices for…
31. 31. CSS - Layouts (Flexbox & Grid) — CSS Layout Techniques There are four main layout modes in CSS: 1. Block layout : For laying out documents (block/inline). 2. Multi-column layout : For laying out text in multiple…
32. 32. CSS - Validation — CSS Validation CSS Validation is the process of checking your CSS code against the official W3C standards. Why Validate? 1. Cross-browser compatibility : Valid code is more likely…
33. 33. CSS2 - Reference Guide — CSS2 Reference Guide Summary This lesson provides a quick look at the core CSS2 properties that are safe to use in all browsers. Box Model width , height , padding , margin ,…
34. 34. CSS - Color References — CSS Color Reference A quick reference for standard CSS color names and values. Standard Color Names (140 names) Modern browsers support 140 standard color names. Red Colors :…

1. CSS - Overview

What is CSS?

CSS (Cascading Style Sheets) is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS

• CSS saves time: You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.
• Pages load faster: If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times.
• Easy maintenance: To make a global change, simply change the style, and all the elements in all the web pages will be updated automatically.
• Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility: Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cellphones or for printing.
• Global web standards: Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C (World Wide Web Consortium) called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.

CSS Versions

• CSS1: Came out in December 1996. Describes the CSS language as well as a simple visual formatting model.
• CSS2: Recommendation in May 1998. Adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
• CSS3: The latest standard, divided into many different modules (Selectors, Box Model, Backgrounds, etc.).

2. CSS - Syntax

CSS Syntax

A CSS rule-set consists of a selector and a declaration block.

selector {
  property: value;
}

• Selector: Defines the element you want to style (e.g., h1, table).
• Property: A type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1.

Example

You can define a table border as follows:

table {
  border: 1px solid #C00;
}

Selectors

The Type Selectors

Matches the name of an element type. To give a color to all level 1 headings:

h1 {
  color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type:

* {
  color: #000000;
}

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element.

ul em {
  color: #000000;
}

This rule applies to <em> elements only when they lie inside the <ul> tag.

The Class Selectors

You can define style rules based on the class attribute of the elements.

.black {
  color: #000000;
}

This renders distinct elements with class="black" in black.

The ID Selectors

You can define style rules based on the id attribute of the elements. Use # followed by the ID name.

#black {
  color: #000000;
}

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

h1, h2, h3 {
  color: #36C;
  font-weight: normal;
}

Frequently asked questions

Is the CSS Customization: Zero to Hero course really free?

Yes. The entire CSS Customization: Zero to Hero course on Siksha Sarovar is free to read with no account required. You can optionally sign in with Google to save your progress.

Do I get a certificate for CSS Customization: Zero to Hero?

Yes — finish the lessons and pass the quiz to earn a free, verifiable certificate you can share on LinkedIn or with recruiters.

Can I run code while learning?

Yes. The built-in online compiler runs C, C++, Python, Java, PHP, JavaScript, C# and SQL directly in your browser — no installation needed.