Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 95 - logicode 2609 C6
P. 95

    The Internet has many websites with colourful web pages. You might have wondered how these
                     pages look so attractive and well-arranged. This is because of CSS, which is used to style and
                     design HTML pages.

                               INTRODUCING CSS

                     CSS stands for Cascading Style Sheets. It can change the colour, font, size and layout of elements
                     to make a web page more engaging. CSS makes a web page look more appealing.

                     ADVANTAGES OF CSS

                     The advantages of CSS are as follows:
                       CSS improves performance by separating design, reducing code and speeding load times.

                       The same style can be reused across pages, simplifying updates and management.

                       CSS enables advanced styling like gradients, shadows and animations beyond plain HTML.
                       CSS ensures consistent display across devices and operating systems.

                       CSS eliminates the need to repeat code in every HTML tag, saving development time.

                               SYNTAX OF CSS

                     In CSS, you apply a rule or styling to an HTML element. It consists of the selector, property and
                     value. The general syntax of CSS is:

                     SELECTOR {                                                                     To view the source
                     PROPERTY: VALUE;                                                          Short key  of a web page:

                     ...                                                                                Ctrl  +  U
                     }
                     The components of the CSS syntax are as follows:

                        Selector: This identifies the HTML element for CSS rules. Selectors can be grouped with commas
                        to style multiple tags. For example:

                       H1, H2, P {

                       COLOR: GREEN;
                       }
                        The above code snippet will change the text colour of all <H1>, <H2> and <P> elements to green.

                        Property: A property defines the style to apply, such as COLOR, FONT-SIZE or BACKGROUND-
                        COLOR.

                        Value: This is the setting or value assigned to the property. This could be a colour, size, position,
                        etc. For example, RED, 16PX, CENTER. Each property has its own valid set of values.

                                                                                                   CSS3–Styling Basics  93

| 90 91 92 93 94 95 96 97 98 99 100 |