Classes Flashcards
On a web page, there are many span tags. Explain how you would reference a specific span tag in CSS that contains specific content with its unique formatting requirements.
This can be done by first assigning a unique name/identifier to the specific span tag in HTML using the id attribute. Once this is done, the span tag can be referenced in CSS using the notation #nameoftag {}
On a certain web page, various paragraphs contain text content. However, some of these text paragraphs share some common semantic features and need to be styled the same way using CSS. Give a brief outline of how you can apply formatting to many paragraphs with the same code reference.
The group of paragraphs can first be given a group identity using the HTML class attribute. Once this is done, the CSS reference will be of the form .classname {}
What is the standard CSS method of giving all occurrences of a certain type of HTML element on a web page the same formatting?
This is simply done by using a reference to the HTML tag in CSS, for example img {}, or body {}
Web pages contain various HTML elements such as images, headings, paragraphs, and so on. How would you apply common formatting to different types of elements using the same CSS code block?
This group styling can be achieved by separating the element tags via commas and then stating the CSS formatting code, e.g. h1, img, p {}
A modern web page requires a default formatting for all paragraphs to comply with a Web 2.0 look. Furthermore, some of these paragraphs require their own unique group
formatting, while a few paragraphs also have individual formatting needs. How does CSS handle these nested formatting requirements?
All the CSS markup for HTML tags, classes of tags, and individual tags can be done in CSS with proper referencing. For general tags, the tag name is followed by formatting, e.g. img {}. Also, classes of tags are formatted using .classname referencing, while individual tags are referenced by #tagname. All these markup codes can be provided, and the precedence for formatting in increasing order is tag > .class > #element, where the matching formatting for an element will override the class or tag formatting.
Some selectors in CSS can have special effects added to them. This is achieved using pseudo-classes. Are you aware of this feature of CSS, and if yes, what is the general syntax of using pseudo-classes?
selector:pseudoclass {property: value;}
On an HTML page, the input boxes need to be highlighted with a green color whenever the user clicks on them or they get focus. Give the CSS skeleton to explain how this effect can be achieved using of pseudo-classes.
input:focus {background-color: green;}
A magazine company wants you to develop a web page for their articles. After you have finished converting all the articles to HTML pages, they add a new requirement that you format the first letter of each paragraph to 28px so it’s bigger than the rest of the text. How can you use pseudo-elements to get this effect?
p:first-letter{font-size: 28px;}
There are a wide array of browsers available today, and most have different implementations of CSS standards. In particular, Internet Explorer has been reported as being particularly quirky. In this case, what mechanism is available to provide CSS code that is suited for Internet Explorer and the other browsers?
‹!–[if IE]›
IE supported code here
‹![endif]–›
You have handled the peculiarities of Internet Explorer by using conditional CSS. However, you also need to provide alternatives for all other browsers. What syntax does conditional CSS support to check non-Internet Explorer browsers?
‹!–[if !IE]>
