Cascading Style Sheets (CSS) Core Concepts


  • Colors

    This article shows the different ways to assign vales to the color property.

  • Selectors

    At very basic css is selecting an element and applying styles to it. In this article we will see how do we select elements with css.

  • Syntax

    CSS Syntnax Following is Declaration Block. img { width: 300px; } img is Selector. This complete line width: 300px; is called Rule. width: is Property. 300px; is Value. Property is a style charcteristic that will be applied to selector and values are specific to the properties and varies depending upon the property.

  • Values And Units

    There are different ways to define different properties, some of them are discussed below. Numeric Values width: 80%; height: 10em; font-size: 1.25rem; border-width: 5px; animation-iteration-count: 5; animation-duration: 750ms; transform: rotate(360deg); <length> Data Type The <length> data type is used to specify sizing with two types of units: absolute and relative.

  • Usecases


  • Learning Resources

    W3C is the organization which write the specification and have documentaion of css. Anything tagged as Recommendation is good to go and can be used in the project. Recomended Learning Sources For CSS Dont read the entire W3C specification documents because it’s not fun.

  • Descendant selectors

    Document Object Model The Document Object Model (DOM) represents the relationship between HTML elements. Parent Child Siblings Decendant section p { ... } <section> <p> ... </p> </section> <p> ... </p> <p> .

  • Grouping selectors

    /* applies to all these elements */ h1, h2, .class, #id { ... } section h1, h2 { ... } /* expands to */ section h1 { ... } h2 { .

  • Inheritance and specificity

    Inheritance CSS styles can be inherited from the ancestor to descendant elements. applying the styles to parent elements will be inherited to all desendants. Properties that can not be inherited. https://www.

  • Inheritance and specificity

    Cascade The cascade in Cascading Style Sheets refer to how style rules are applied based on specificity and source order. Syle sheets are read from top to bottom. p { font-size: 12px; } /* this syle will take precedence */ p { font-size: 18px; } Higher specificity value styles takes precedencce regardless of the order.

I will get back to you ASAP.