1 / 23

Intermediate CSS

Intermediate CSS. Spans & Divs , Ids & Classes. <span> and <div>. The <span> tag is generally used to apply a style to inline text:

aquila
Download Presentation

Intermediate CSS

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. Intermediate CSS Spans & Divs , Ids & Classes

  2. <span> and <div> • The <span> tag is generally used to apply a style to inline text: <p><span class="foo">This text is rendered as foo-style</span> and this is not. The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements: • Difference? • The <div> tag also acts as a paragraph break. You use the span tag when you want to modify text without having it break from the paragraph.

  3. <span> and <div> • The <span> tag is generally used to apply a style to inline text: <p><span class="foo">This text is rendered as foo-style</span> and this is not. The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements: • Difference? • The <div> tag also acts as a paragraph break. You use the span tag when you want to modify text without having it break from the paragraph.

  4. class and id • Just like you can base some style on Tags (also known as Elements) you can also add your own attributes • class and id • NOTE: when naming your classes and Ids its best to name them in a way that describes function not presentation class=“header” makes more sense than class=“bluetext” example: <table class=“red3”>…

  5. The classattribute in HTML • In HTML class is used to define a related group of HTML elements on a page. • Elements using a class can be of any type. Could be a <p>, another could be an <img> or a <td> from a table. • In your HTML you define your class by adding it like you would any HTML attribute with an equals sign and quotations. • <body> <h2 class=“q2”>This is my header </h2> <p class=“r3”> We will be meeting on Weds at <span class=“q2”> 8:00am</span> </p> • </body>

  6. The class selector in CSS • The class selector is defined by a period (.) .q2 {color: blue;} .r3 {font-family: Arial;} NOTE: CASE MATTERS!!! Selectors/tags/attributes are CASE sensitive!! So .qball is not the same as .qBall

  7. The class selector in CSS • You can combine element (aka tag) selectors with a class selector. The result only those members of the class (which are of that particular element) span.q2 {color: blue;} p.r3 {font-family: Arial;}

  8. The idattribute in HTML • Similar to the class attribute • Can be set on nearly any tag and can be used as a CSS selector • Much more restricted • Only one tag on a page can be given that specific id. • NOTE: id attribute’s value must begin with a letter (but can be followed by numbers, periods, underscores, hyphens, or colons)

  9. id selectors in CSS • id selectors are indicated by a hash or pound sign (#) in CSS stylesheets. • Example #menu { font-size: large; }

  10. id vs class • A class selector is more flexible, can do anything an id selector can do and more. • If you want to reuse the style, you can use classes. • Cannot do this with an id selector because an id value MUST be unique. Only one element/tag on a page can have that id .

  11. Combining same selector • Two rules that share the same selector can be combined by listing their declarations within the curly braces p { background-color: #434567; font-family: sans-serif; color: white; } p { background-color: #434567; font-family: sans-serif; } p { color: white; }

  12. Combining different selectors • If two rules have the same declarations (but different selectors) you can combine them also as long as they are separated with a comma , p { color: #434567; } #address{ color: #434567; } p , #address { color: #434567; }

  13. <span> and <div> • The <span> tag is generally used to apply a style to inline text: <p><span class="foo">This text is rendered as foo-style</span> and this is not. The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements: • Difference? • The <div> tag also acts as a paragraph break. You use the span tag when you want to modify text without having it break from the paragraph.

  14. CSS shorthand • You can list all the font properties in one list. • Must be in a specific order • Selector { font: style variant weight size family; border: top right bottom left; } • Any values that aren’t listed are set to their default values.

  15. Universal Selector • Applues to all tags and content within a page and is represented by an asterisk (*) • *{color: red;} • Has limited compatability with explorer 4.0 and Netscape 4.0

  16. Pseudo-selectors • Psuedo-Selector – a selector based on a set of predefined qualities that an HTML element (or tag) can posses. • Similar to a class attribute but they have already been specified by CSS.

  17. Psuedo-classes • :link – links not yet visited • :visited – previously visited links • :hover – elements pointed at (by a mouse) • :active – elements that are “Activated” such as “active links” • the only other psuedo-classes are :first-child, :focus, :lang()but we wont worry about what they do just yet.

  18. Pseudo-class example • a:link {color: cyan;} • a:visited {color: black;} • a:hover {color: orange;}

  19. Length Units • {margin-right: 24px } • The number can be an integer or a decimal fraction, and can be preceded by + or -. • Units can be absolute or relative: • Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas) • Relative: em, ex, px (the element's font height, the element's x-height, pixels)

  20. Can you have more than one type of style sheet for a website? • YES!

  21. Inheritance – “Cascading” • You can have many levels of style • Web pages often have inline styles at the same time as embedded and linked style sheets. • What if all three define a body {background: color}?

  22. Inheritance- “Cascading” • If there is a conflict then it is resolved in the following priority order: • Inline • Internal/embedded • External/linked • Browser default • So, an Inline style will override a linked style sheet. • Note how the close the style is to the content, the higher the priority.

  23. Descendant Selectors • Concept of inheritance • The closest to the tags is the “youngest” and is the one the browser will use: Here <h2> is a descendant of the <div> element Ex: <div id=“header”> <h3 class=“sub_header”> </h3> </div>

More Related