CSS 3 Tutorial Library

25 Lessons

 

CSS Tutorial

This CSS tutorial series describes various features of cascading style sheets to make web designing easier.

    Introduction to CSS

    CCSS is abbreviated as Cascading Style Sheets and is used for describing how HTML elements need to be displayed when they are represented in a web page format or other media. In this chapter, you will learn about the basics of what CSS is and how it can be helpful in styling markup documents.

      Basic Syntax of CSS

      Every scripting or programming runs on a specific collection of rules. Likewise, CSS also has some particular set of rules that govern how users will have to implement the different CSS concepts. In this chapter, you will learn about CSS's […]

        Types of CSS

        When we are learning CSS, we are usually writing CSS in the head of the HTML document. However, there are three different places where CSS can be written within an HTML document. So in this chapter, it has been explained with examples.

          CSS Selectors

          Styling is an important concept that brings CSS to the top of web designing. Like other elements, selectors in CSS also help in selecting the styles in elements you want to put for designing your web pages. In this chapter, you will get to know about the concept of selectors in CSS.

            CSS id Selector

            CSS id selector is used to select the HTML element using the ID attribute to apply a style to it. This id element is distinctive always inside the page, and hence it is preferred for selecting a distinct, unique HTML element.

              CSS class Selector

              CSS class selector styles all the HTML elements with the specified class attribute. Using CSS Classes makes it easy to select HTML elements when applying the same style to different HTML tags.

                CSS Element Selector

                CSS Element Selector is a straightforward CSS selector that uses the name of any HTML element as a selector for applying the CSS styles on those elements.

                  CSS Group Selector

                  As you know, we can use a "class" or "id" to target a specific element so that some style can be applied to them. These are a particular type of CSS selectors that makes CSS styling distinct. But there is […]

                    CSS Universal Selector

                    Universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and uses the asterisk (i.e., "") symbol used for denoting the selector as a universal selector.

                      CSS Descendant Combinator Selector

                      So far, you have used the selectors; they are used for targeting particular elements or collective elements having a specific ID or class. It is quite a powerful feature, but what if you wish to limit this feature to some specific part of the page? In this chapter, you will learn about the descendant combinator and its working.

                        CSS Attribute Selector

                        The CSS selector is usually used to apply a style to HTML elements using classes and IDs. However, you can also use different selectors on different attributes of HTML elements. In this chapter, you will learn about how to implement CSS attribute selectors.

                          CSS Pseudo-classes

                          In CSS, pseudo-class is a keyword incorporated into a selector for specifying a particular state of your chosen HTML element(s). Pseudo-classes not only allows designers to apply a style to their element relative to the content in the document, but […]

                            CSS Dir Pseudo-Class

                            Dir pseudo-class of CSS is implemented to match HTML elements, depending on the direction of the content contained in them. Currently, ltr and rtl are normal values ​​- here, ltr means left-to-right, and rtl means right-to-left.

                              CSS hover Pseudo-Class

                              The CSS hover Pseudo-Class adds special effects to an HTML element when the mouse pointer is brought over on that element. In this chapter, the CSS hover Pseudo-Class is explained with an example.

                                CSS active Pseudo-Class

                                The CSS active pseudo-class can be implemented with any HTML element; it appears active when the user clicks on it. It is typically used on anchor and button elements.

                                  CSS focus Pseudo-Class

                                  CSS focus Pseudo-Class can be implemented to select an HTML element currently focused on by your web page user. It is usually applied in the input elements of HTML forms and triggered when the user clicks it with the mouse to insert data.

                                    Scroll Back to Top