1 / 16

Cascading Style Sheets II

Cascading Style Sheets II. Simple Selectors. Simple Selectors. The following code will turn all <span> tags green:. Selecting Elements by Name 1. Let’s say we want only green text when the country of origin is Mexico. Selecting Elements by Name 2.

sun
Download Presentation

Cascading Style Sheets II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets II Simple Selectors

  2. Simple Selectors The following code will turn all <span> tags green:

  3. Selecting Elements by Name 1 Let’s say we want only green text when the country of origin is Mexico.

  4. Selecting Elements by Name 2 Let’s say we want red text where the country of origin is the United States.

  5. Select Elements by Context (1) Selectors allow us to drill down into elements of our page and apply formatting that affects only those elements. For example, the following CSS rule looks for an <em> tag within an <h1> tag and colors the text red:

  6. Select Elements by Context (2) We can drill down as many as five elements. For example, let’s say we only want strong, emphasized text that is within tables that are within divisions to be red:

  7. Select Elements by Context (3) We can also select specific elements by their “id” attribute then apply rules to the elements contained within them.

  8. Selecting Part of an Element Let’s say we only want to apply formatting to the first line of a paragraph. Or, perhaps we only want to apply formatting to the first letter of a paragraph.

  9. Formatting Hyperlinks (1) Links (<a> tags) have five (5) different states: link, visited, focus, hover & active. Each state can have it’s own look and feel. Tip: Define <a> CSS rules in the order above (LVFHA).

  10. Links will be red when new and not visited. Once the link has been visited, it turns orange. If the link get the focus (with the tab key) it is purple. When visitor hovers over the link with the pointer, it is green. As the visitor clicks the link, it turns blue. Formatting Hyperlinks (2)

  11. Applying Rules to Groups of Elements We don’t have to create a redundant rule for each element. We can apply the same rule to a group of elements. For example, we can apply a single rule to all of the header tags (h1 to h6):

  12. Selecting Elements by Class We can create our own custom CSS rules called classes and give them the name of our choice. Classes can be applied to any supported element on a web page.

  13. Combining Selectors

  14. External Style Sheets (1) We can export all of our style rules to an external file. Two steps are involved: • Copy all style rules to a new CSS file. • Link to the CSS file.

  15. External Style Sheets (2) Creating the CSS file: Copy/paste all CSS rules from the current document to a new text file. Save the file as filename.css.

  16. External Style Sheets (3) Linking to the CSS file: Write the following syntax into the <head> of your document to link to your newly create CSS file: All of your rules will instantly be applied to the document.

More Related