What is CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.Explain what a class selector is and how it’s used:
- A class can be thought of as a grouped collection of CSS attributes applied to HTML elements. This allows you to apply the same styling to multiple HTML elements by placing them in the same CSS class.
- Class methods can be called by inserting a ‘class’ property and name within an HTML element, then calling the class name with a ‘.’ in the CSS doc.
- Class syntax:
Within an HTML doc:
Within a CSS doc:
- The code listed here identifies the class ‘intro’ in the HTML doc, then applies the same background-color styling to all paragraphs within that class.
What are pseudo classes and what are they used for?
- Pseudo classes are similar to classes, but are not explicitly defined in the markup, and are used to add additional effects to selected HTML elements such as link colors, hover actions, etc.
- Pseudo classes are defined by first listing the selector, followed by a colon and then pseudo-class element. E.g., a:link{ color: blue }, or a:visited { color: red }
- Pseudo-class syntax:
selector:pseudo-class {
property:value;}
property:value;}
- Syntax for using a pseudo class within a CSS class:
selector.class:pseudo-class {
property:value;}
property:value;}
- :link, :visited, :hover, :active, :first_line are all examples of pseudo classes, used to call a specific action on an element, such as the changing of a link color after it has been visited.
Explain the three main ways to apply CSS styles to a Web page:
- Inline: Though this method often goes against best practices, it’s easily done by inserting a ‘style’ attribute inside an HTML element:
- e.g.) <p style=”color:blue”>Lorem Ipsum</p>
- Embedded/Internal: Done by defining the head of an HTML document by wrapping characteristics in a <style> tag.
- Linked/External: CSS is placed in an external .css file, and linked to the HTML document with a <link> tag. This can also be accomplished using the ‘@import’, however, this can slow page load time and is generally not advised.
No comments:
Post a Comment