When we add a CSS style, we should broadly keep two things in mind. First is the selection of an element (or elements) where we apply the style. Second, is the CSS design that we would apply to the selected element (or elements).
With that, let us see a simple example. The example (provided below) contains one CSS rule that specifies designs for font and color to paragraph (<p>) elements. What this rule says is that if we have any <p> element on the HTML page, then the two design elements would be automatically applied to them. Since the design is applied to all <p> elements on the page, we do not have to add this design individually for each <p> elements. This makes adding design in CSS far more scalable.
p { font-family: Verdana, sans-serif; color: blue; }CSS is all about rules. Fortunately, they are different than the ones that our parents ask us to follow! When adding style to a page, we can have a large number of CSS rules; they these rules would look similar to the one above.
Each CSS rule has several components. It is important to understand those. For that, let us use the following figure to get to know the building blocks. This figure breaks down the above CSS rule into its constituent elements.
Figure: Elements of a CSS Rule
In fact, we can use the same rule and apply it to more than one element! If we wanted to extend the above rule beyond <p> element, then that is as simple as specifying additional elements in the selector list and separate them with commas. With that, let us extend the above rule to include not only paragraphs (<p>) but also ordered lists (<ol>) and unordered lists (<ul>).
p, ol, ul { font-family: Verdana, sans-serif; color: blue; }Now that we have covered some of the basics, let us get our hands dirty. We start with a simple HTML page that has, among other things, a simple paragraph. Next, we use a CSS rule to add style to the paragraph element. We reuse the CSS rule in this example from above. So, here is the example.
<!doctype html> <html> <head> <title> Learning CSS: Getting Started </title> <style> p { font-family: Helvetica, Verdana, sans-serif; color: blue; } </style> </head> <body> <p> Tyrannosaurus were a category of carnivorous dinosaurs that lived during the late Cretaceous period. They were bipedal reptiles with a massive skull, which was balanced by a long and heavy tail. Among them, the mightiest and the deadliest were the Tyrannosaurus rex (or T. rex for short). These giants could grow up to 40 feet in length, up to 20 feet in height, and weigh up to 7 tons. </p> </body> </html>When we load the page (output provided below), we find that the paragraph text has the font-color as blue and it would also have the text as one of the fonts: "Helvetica", "Verdana", or if they are not available, then the fall-back option of "sans-serif". Pretty much what we expected!
No comments:
Post a Comment