1 / 26

Cascading Style Sheets

Cascading Style Sheets. Basics. Why use Cascading Style Sheets?. Allows you to set up a series of rules for all pages in a site. The series may be changed by making a single change to the rule—without requiring changes to all the pages in the site.

Download Presentation

Cascading Style Sheets

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 Basics

  2. Why use Cascading Style Sheets? • Allows you to set up a series of rules for all pages in a site. • The series may be changed by making a single change to the rule—without requiring changes to all the pages in the site. • A separate file can be defined for the rules. • Standards-compliant

  3. How to add CSS to HTML Tags • You can use the tags <style> </style>to list a series of rules embedded in the header • The styles are used to define specific sets of characteristics for HTML tags, classes, or IDs. Classes can be added to tags by using a class attribute : <p class="fred">

  4. Block vs. inline tags • Block-level tags such as <p> add a line break before and after the tag. • <div> is block-level • Inline tags such as <b> do not. • <span> is inline • Don't confuse these with inline styles, e.g.: • <p style="color:red";>

  5. Styles inline: in the Tag • CSS rules consist ofselector {property1:value1; property2:value2;}. • (For inline styles, the rules are enclosed in quotes.) • <h1 style="font-family: 'Times New Roman'; font-variant: small-caps; color: red;"> Hello World </h1>

  6. Style Sheets Defined in <head> • Surround with <style> … </style> tags. For HTML include comments:<style type="text/css"> /* CSS rules go here */</style> • Selectors can be HTML tags (h1), classes (.fred), ids (#fred), pseudo-classes (.fred:hover), pseudo-elements (.fred:first-letter) attributes (img[alt]), others. Ids can only be used once per HTML page.

  7. Sample Style sheet in <head> <style type="text/css"> h1 {font-family: Georgia, ‘Times New Roman’, Times, serif; color: red; text-align: center;} h2 {font-weight: bold; color: orange;} .dropcap {font: 100%/200% serif; color: blue; margin-top: 1em; position: relative; left: 10px; top: 10px;} p {color: red; font-family: courier, monospace; padding: 1em;} #fred {border: 2px solid #cf4;} </style> (Use vertical format as in Zeldman Chap. 9)

  8. Using the Style Sheet • When you use the H1, H2 or P tags the styles defined in the style sheet are applied. • To use the .dropcap class you may • Either add the class to the tag • .dropcap and add the class name <p class="dropcap"> • Define a set of div or span tags and add the attribute class=" " • <span class="dropcap">

  9. External Linking • You may also define a style sheet as a text file which includes the defined set of rules. • The file contains only the selectors and the property: value pairs. • The file is the same as the rules in the <head> element without the <style></style> tags.

  10. The external file is then connected to the HTML page by using the tag • <link rel="stylesheet" href="xxx.css" type="text/css" /> Note /> for XHTML; for HTML5 just <link rel=“stylesheet” href=“xxx.css” > • The xxx.css is the name of the file path that contains the list of rules. • You should end the file with the extension css to be sure you know what the file contains. • You may also import one CSS file into another: <style type="text/css"> @import url(other.css)</style>.

  11. Order of style rules (cascade) • The last definition is the one which is applied to the tag. • So if a css file is attached with a definition for p tags and there is an inline definition for the p tag after the reference to the embedded or external file, the inline definition will apply. In general inline>embedded>external. • If the user has a set of defined browser characteristics which conflict with the css, the user characteristics will override the css definition.

  12. Defining Classes • You can define a set of specifics which may be applied to a series of tags. • The definition is prefaced with a .classname. You reference the class name in the HTML tag by using the attribute class="classname"

  13. Defining IDs • In the style sheets, you may also define an ID, which acts like a class except there can be only one per page <div class="header">. Note in HTML5 this would be replaced by <header> • The ID always starts with a pound/hash sign (#): #idname • To apply the ID tag to the HTML tag, you add the attribute <p id="idname"> • See Zeldman chapter 8 for reasons to use id.

  14. Example • #area1 {color: red} • < div id="area1">

  15. Multiple Tags with the same Style (grouped selectors) • Separate the list of tags by commas and the place the set of style rules in parentheses for the entire group. • h1, h2, h3 {color: blue;}

  16. Descendant (contextual) Selectors • You can pass a style definition down a list of related selectors. E.g.#copy li p {font-size: 1.5em;} (Read this right to left. All p that are descendants of li that are descendants of an element with id="copy" get this rule.) • The selectors are separated by a space. • The first selector in the list is the parent, the others are descendants. • Changes to the first selector will be inherited by the next selector.

  17. CSS 2.1 selectors (IE 7+, MOSe) • Child selectorsli>p {color: red;} (all p that are children of an li) • Adjacent siblingsli+li {color: #234;} (all li that are adjacent siblings of li) • Universal (wild card) selector * {color:red;} • #copy * i{color:#123456;} • Attribute selectorsa[href="page2.html"] {color: black;} ORdiv[align] {font-family: serif;}

  18. Pseudo-classes • Most common are:link, :visited, :hover, :active. E.g.a:hover {text-decoration:underline;} • Also (2.1) :first-child, :focus, :blur, :lang() • With IE7+ (and always with MOSe) can use the "whatever:hover" e.g.li:hover {text-decoration:underline;}

  19. Pseudo-elements • Not often used, but Gillenwater uses :before and :after for "generated content." • :first-letter, :first-line, :before, :after

  20. Some other options • !important tag • Adding the !important to the style rule will override any other rule. • Media queries: in <link …> or <style> media="screen" media="print" media="handheld" media="all" etc. <style media="print"> • media="print" — used for a print page style sheet. (Resume project) • media="screen" – used for a browser display [but omit if only sending to a browser]

  21. Competing rules • The cascade as described earlier • Inheritance (rules passed to descendants) • Specificity (id=100, class=10, tag=1) (sort of) • Lower rule in a style sheet or declaration winsh1 {color:blue;}h1 {color:red;} so h1 will be red

  22. Comments • CSS comments look like JavaScript:<style type="text/css">/* Multiple lines of comment go here and can continue until the closing mark */p {color:red;}</style> • Conditional comments are best way to serve IE rules. E.g.<!--[if IE 7]> <link type="text/css" rel="stylesheet" href="ie7.css"><![endif]-->OR <!--[if lte IE 7> ... <![endif]-->Or <!--[if IE]> ... <![endif]-->

  23. Defaults for font-family • serif—small ornamentation at the end of the letters • sans-serif – not serif • monospace—all letters occupy same amount of space • cursive—resembles handwriting • fantasy—decorative fonts that are not the same as the other styles

  24. Setting Font • font-family: font stack (give the one you prefer first); multiple word families need quotesfont-family: "courier new", courier, monospace; • @font-face is used to define the name and location of a font to be downloaded to the user’s computer. • @font-face{font-family: nametodownload; src:url(filelocation);} • Best idea—use browser-safe screen fonts (Georgia, Verdana)

  25. Other font properties • font-size: • Absolute (pt, in cm, mm) • Relative (sort of) (px, em, %) • Absolute expression • xx-small, x-small, small, medium, large, x-large, xx-large (smaller, larger are relative) • font-style: • italic

  26. font-weight: • normal, bold, lighter. • Or use a value of 100 to 900 in increments of 100. • Creating smallcaps • font-variant • small-caps • normal • Shorthand: font options separated by spaces after the font: property. E.g.h1 {font: bold italic small-caps 12px/18px verdana, serif;} • At a minimum, need font-family, font-size. E.g.h1 {font: 12px georgia, "times new roman", times, serif;

More Related