css-basic

CSS Basic

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Module 1: Introduction

In this module CSS is used to style and lay out web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module gets you started on the path to css.

• Benefits of CSS
• CSS Versions History
• CSS Syntax
• CSS Structure
• Types of CSS

Module 2: Selectors

In this module, CSS selectors define the elements to which a set of CSS rules apply. In this module, you will find how many selectors are there how to use it.

• ID Selectors
• Class Selectors
• Grouping Selectors
• Universal Selector
• Descendant / Child Selectors
• Attribute Selectors
• Pseudo-class Selectors
• Pseudo-elements Selectors

Module 3: Background & Cursor

In this module, CSS Backgrounds and Borders is a module of CSS that lets you style elements backgrounds and borders. Backgrounds can be filled with a color or image, clipped or resized, and otherwise modified. Borders can be decorated with lines or images, and made square or rounded.

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• background
• cursor

Module 4: Text Fonts

In this module, CSS Fonts that defines font-related properties and how font resources are loaded. It lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character.

• color
• text-decoration
• text-align
• vertical-align
• text-indent
• text-transform
• white-space
• letter-spacing
• word-spacing
• line-height
• font-family
• font-size
• font-style
• font-variant
• font-weight Syllabus

Module 5: Lists

In this module, lists table that defines how to lay out table data.

• list-style-type
• list-style-position
• list-style-image
• list-style

Module 6: Box Model

In this module, CSS box model that defines the rectangular boxes including their padding and margin. They are generated for elements and laid out according to the visual formatting model.

• border
• margin & padding
• height & width
• Box Model

Module 7: Display & Positioning

In this module, the position CSS property specifies how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

• CSS visibility
• CSS display
• CSS position
• CSS Layers with z-index
• CSS overflow

Module 8: CSS Floats

In this module, the float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though remaining a part of the flow (in contrast to absolute positioning).

• float Property
• clear Property
• clearfix

Module 9: CSS Classes & Elements

In this module, CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states.

• Pseudo Elements
• Pseudo Classes

Module 10: CSS Specificity

In this module, CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element's style.

• CSS Specificity