CSS

10 Key excerpts on "CSS"

• 

  eBook - ePub

  Web Design in easy steps, 6th edition

  • Sean McManus(Author)
  • 2014(Publication Date)
  • In Easy Steps Limited

    (Publisher)

  If a site degrades gracefully, it means that it still works even if certain browser features aren’t available. Another term that is used is progressive enhancement: providing additional presentation features for browsers that support them, but ensuring there is still a good visitor experience for those that don’t.

  CSS is short for cascading style sheets. The idea is that you put all the instructions for the design of your web page into a separate document called a style sheet. That single style sheet can be shared by lots of different web pages.

  It is possible to put style instructions into your HTML file, but it’s better to separate your content and design for several reasons:

  • When it’s time to refresh your site’s look, you won’t have to trawl through all your HTML files – just update your style sheet and the design across your whole site will change.

  • It’s easier to edit your HTML page content, too, because it’s not cluttered up with layout and design instructions.

  • You can easily define style sheets for different media (such as print and screen). This means you can use the same HTML to deliver web pages that are optimized for different devices.

  • Removing the style from your HTML pages makes them smaller, and the style sheet can be cached for use across your site. That means the site will download more quickly because visitors won’t need to download the same layout instructions in different web pages.

  • Your design is more likely to degrade gracefully if you use style sheets and structural HTML. It might not look great on an ancient browser, but it should still work okay.

  • Users can specify their own style sheet to use on your page (in IE, go to Tools/Options/Accessibility), so they can customize their experience of your site. This could be particularly valuable for those using assistive technology, such as screenreaders or Braille screens.

  •

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Dreamweaver CC Digital Classroom

  • Michael Arguin, Greg Heald(Authors)
  • 2013(Publication Date)
  • Wiley

    (Publisher)

  CSS is a simple language that works alongside HTML to apply formatting to content in web pages, such as text, images, tables, and form elements. Developed by the World Wide Web Consortium (W3C), CSS creates rules, or style instructions, that elements on your page follow. There are three locations for CSS: (1) An internal style sheet where the styles are located directly within the section of an HTML document, (2) inline styles (the CSS is located side by side with your HTML tags), or (3) An external style sheet where styles are located in an external file that can be linked to any number of HTML pages. If you completed Lesson 3, “Adding Text and Images,” you have had experience with the first option. A style sheet is a collection of CSS rules; typically, rules that belong to a specific project, theme, or section are grouped together, but you can group rules in any way you want. You can place styles directly within your page using the

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Creating Data-Driven Web Sites

  An Introduction to HTML, CSS, PHP, and MySQL

  • Bob Terrell(Author)
  • 2019(Publication Date)
  • Momentum Press

    (Publisher)

  CHAPTER 2

  CASCADING STYLE SHEETS (CSS)

  Originally, both content and presentation were part of HTML. However, as websites grew in size and complexity, it became clear the two needed to be separated. Consider the following overly simple web page:

  Websites used to be written like this, but it proved to be quite problematic for two overarching reasons. First, it creates a lot of duplication. Every time we want to change the color of the font (or text), it requires another tag. In fact, it requires another opening tag and another closing tag, lest our chosen font color go on forever. It’s clear from our sample that paragraphs should be green and links should be red. While it’s not too troublesome for one page and two paragraphs, imagine doing that for a website with hundreds of pages. Second, imagine the day that our boss comes in, realizes that green text with red links looks terrible, and wants it changed. How many font tags would we need to change? How many instances of “green” would we find and replace?

  And so Cascading Style Sheets (CSS) was developed. CSS, which separates the style or presentation of a website from its content, offers two major advantages: It allows the same style to be applied to many elements, and it allows a given style to be easily changed. It does so by using selectors to match style declarations to elements, assigning the properties of the matched elements the corresponding values in the declaration block. Our page above could be rewritten as follows:

  Already it looks much cleaner. However, if this style were to apply to all pages, we would split it out into a separate file.

  In a file called style.CSS :

  And then, in our HTML file above, we would replace the <head> tag with: Including that <link> element in every page in our website causes its style to apply to every page. And that, in a nutshell, is why CSS exists. CSS SYNTAX

  As seen in the introduction, a CSS declaration consists of two parts: The selector and the declaration block

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Principles of Web Design

  The Web Warrior Series

  • Joel Sklar(Author)
  • 2014(Publication Date)
  • Cengage Learning EMEA

    (Publisher)

  You may decide to implement CSS features realizing that some browsers do not offer users the same result that they may see in other browsers. In some cases, these differences are negligible, so you can include the CSS feature without seriously affecting the user’s view of your content. CSS properties are always indicated as such throughout this book so you can make informed decisions about which properties to implement. Web sites such as www.caniuse.com and www.quirksmode.org offer browser support cross-reference charts to help you determine which CSS properties are supported by different browser versions. Note Copyright 2015 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. 140 Chapter 4 Cascading Style Sheets CSS Style Rules In CSS, style rules express the style characteristics for an HTML element. A set of style rules is called a style sheet. Style rules are easy to write and interpret. For example, the following style rule sets all

  elements in the document to blue text. p {color: blue;} A style rule is composed of two parts: a selector and a declaration. The style rule expresses the style information for an element. The selector determines the element to which the rule is applied. Selection is the key to working with CSS. As you will learn later in this chapter, CSS contains a variety of powerful selection techniques. By using the different types of selectors available, you build styles that affect an entire web site or you can drill down to one specific paragraph or word in a web page. The declaration, contained within curly brackets, details the exact property values.

  Sign up to read

  Learn more about book
• 

  No longer available |Learn more

  Multimedia Web Design and Development

  Using Languages to Build Dynamic Web Pages

  • Theodor Richardson, Charles Thies(Authors)
  • 2012(Publication Date)
  • Mercury Learning and Information

    (Publisher)

  CHAPTER 4 CSS3 IN THIS CHAPTER

  The chapter covers the use of Cascading Style Sheets (CSS). The style commands in this language allow you to modify the presentation of your HTML elements in a complex way and achieve unique, layered displays of information and images within a page. CSS commands are essential to site branding and will allow you to create a consistent look and feel across your entire site. Once you have completed this chapter, you should be able to:

  •   Create a style class

  •   Use style commands to modify positioning and placement of elements in a page

  •   Use style commands to modify the color and display of elements in a page

  •   Create an external CSS document that can be referenced across an entire Web site

  4.1 INTRODUCTION TO CASCADING STYLE SHEETS

  Cascading Style Sheets (CSS) is a language added to Web design to allow the separation of presentation (or style) from structure. This reduces the amount of code in a page by providing a centralized location for presentation information, which can be reused through tags and classes. CSS3 is the current standard for CSS. A style command works just like an HTML tag attribute. It contains a property and value pair with the structure:

  You can invoke a style command independently within a tag by using the style property. An example of this is:

  The power of style commands is not in their individual use. Instead, their value comes from establishing classes and defining style sets for tags across entire pages and entire Web sites. This section will look at the structure of various CSS classes and their applications. The rest of the chapter will explore some of the specific style commands that are most useful for constructing the layout of your HTML pages. You should keep a copy of your current index.html page from the case project (you can save it as nostyle.html

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Beginning HTML5 and CSS3 For Dummies

  • Ed Tittel, Chris Minnick(Authors)
  • 2013(Publication Date)
  • For Dummies

    (Publisher)

  Part IV Adopting CSS Style To find out more about CSS markup and best practices, visit www.dummies.com/ extras/beginninghtml5CSS3 . Find the examples for these chapters at www. html4dummies.com/html5cafe in the sections labeled Ch11 through Ch13. In this part . . . ✓ Understanding the oh-so-crucial distinction between content and appearance ✓ Working your way through CSS units of measure ✓ Digging into CSS syntax and structure by using selectors and declarations ✓ Using classes and IDs to focus style on elements or instances ✓ Working with inline, internal, and external style sheets ✓ Resolving multiple style selectors through the CSS cascade 11 Advantages of Style Sheets In This Chapter ▶ Understanding the role of style sheets ▶ Discovering Cascading Style Sheets (CSS) ▶ Understanding the viewport ▶ Using different types of measurement units C ascading Style Sheets (CSS) is the language web page authors use to tell a browser (or another user agent) how to format an HTML document. Remember: HTML5 is primarily a language for defining the structure (like the bones and muscles) of a document. The structural elements of a page, such as headings (

  through ) and body text, don’t affect how those ele-ments look. By applying styles to those elements, though, you can specify an element’s layout on the page and add design attributes (such as fonts, colors, and text indentation). CSS is the tool that lets you add skin (and even fancy clothing) to the structure created by your HTML markup and content. Style sheets give you precise control over how structural elements appear on a web page. Better yet, you can create one style sheet for an entire website to keep the layout and look of your content consistent from page to page. And here’s the icing on this cake: Style sheets are easy to build and even easier to integrate into web pages. In fact, with style sheets, you can ✓ Add style markup to individual HTML elements (called inline style ).

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Computer Programming NQF4 Student's Book

  TVET FIRST

  • S Sasti D Sasti(Author)
  • 2020(Publication Date)
  • Troupant

    (Publisher)

  • Unit 9.2: Add CSS to a webpage as a presentation layer. • Unit 9.3: Use different CSS selectors to select elements. • Unit 9.4: Add visual elements to a webpage using CSS. In Module 8 we introduced you to HTML5 which is the language we use to create webpages. HTML was originally meant to describe the content, for example text, images, audio and video, that is going onto a webpage. It was meant to specify things such as the text on a page, headings, paragraphs, and so on. HTML was not meant for formatting the webpages by changing fonts and colours. Later versions of HTML then introduced a font element to format webpages. This started to make webpages look cluttered as developers were using different types of formatting throughout a page. Owing to these problems, the W3C (World Wide Web Consortium) introduced cascading style sheets (CSS) which were specifically meant to define the styles and presentation of the webpage and websites. We will look at how to create CSS files in this module. Figure 9.1: Cascading style sheets describe how HTML elements are to be displayed on screen 228 Topic 5 Unit 9.1: Cascading style sheets attribute-value pairs 9.1.1 What are cascading style sheets? Cascading style sheets (CSS) specify the style of your website. CSS files contain the definitions for the styles to be used on a webpage. We create the CSS file in a text editor and save it externally with the extension: .CSS. These files are then accessed via a link in your HTML code. We will see more about how to access these files in Unit 9.2. The advantages of creating CSS files are: l They save coding time. l You can create one style and apply it to the entire website. l You can easily change the style of the entire website by changing just one file. l Pages load faster because there are fewer HTML tags for formatting on the webpage. l It is a global Web standard. 9.1.2 Style rules for CSS A CSS is made up of style rules that are read by a Web browser and then applied to the webpage.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  HTML, XHTML, and CSS Bible

  • Steven M. Schafer(Author)
  • 2011(Publication Date)
  • Wiley

    (Publisher)

  Part III Controlling Presentation with CSS

  Chapter 25: CSS Basics

  Chapter 26: Style Definitions

  Chapter 27: CSS Values and Units

  Chapter 28: CSS Inheritance and Cascade

  Chapter 29: Font Properties

  Chapter 30: Text Formatting

  Chapter 31: CSS Lists

  Chapter 32: Padding, Margins, and Borders

  Chapter 33: Colors and Backgrounds

  Chapter 34: CSS Layouts

  Chapter 35: Pseudo-Elements and Generated Content

  Chapter 36: Dynamic HTML with CSS

  Chapter 37: Media Styles and Defining Documents for Printing

  Chapter 38: The Future of CSS: CSS3

  Passage contains an image Chapter 25 CSS Basics In This Chapter

  • The Purpose of Styles
  • Styles and HTML
  • CSS Levels 1, 2, and 3
  • Defining Styles
  • Cascading Styles

  The Web was founded on HTML and plain-text documents. Over the last few years the Web has become a household and industrial mainstay, maturing into a viable publishing platform thanks in no small part to Cascading Style Sheets (CSS).

  CSS enables Web authors and programmers to finely tune elements for publishing both online and across several different types of media, including print format. This chapter serves as the introduction to CSS. Subsequent chapters in this section will show you how to use styles with specific elements.

  The Purpose of Styles

  Styles are an electronic publishing invention for dynamically coding text and other document elements with formatting. For example, a style called “Heading” would be attached to every heading in the document. The style definition would contain information about how headings should be formatted. In this book, for example, headings (such as “The Purpose of Styles,” above) use a larger, bold font.

  Note

  Anyone who has spent an appreciable amount of time in and around a word-processing program has no doubt encountered styles. The concept of styles used by word processors does not differ appreciably from that of CSS and the Web—if you understand the former, you should have a good grasp on usage of the latter.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Beginning ASP.NET 4.5.1: in C# and VB

  • Imar Spaanjaars(Author)
  • 2014(Publication Date)
  • Wrox

    (Publisher)

  It offers a rich set of options to change every little aspect of your web page, including fonts (size, color, family, and so on), colors and background colors, borders around HTML elements, positioning of elements in your page, and much more. CSS is understood by all major browsers today, so it’s the language for visual presentation of web pages and very popular among web developers. CSS overcomes the problem of mixed data and presentation by enabling you to define all formatting information in external files. Your ASPX or HTML pages can then reference these files and the browser will apply the correct styles for you. With this separation, the HTML document contains what you want to display, and the CSS file defines how you want to display it, enabling you to change or replace one of the two documents, leaving the other unmodified. In addition, you can place CSS directly in an HTML or ASPX page, which gives you a chance to add small snippets of CSS exactly where you need them. You should be cautious when placing CSS directly in an HTML or ASPX page, because you can no longer control style information from a single, central location. Because you can place all CSS code in a separate file, it’s easy to offer the user a choice between different styles — for example, one with a larger font size. You can create a copy of the external style sheet, make the necessary changes, and then offer this alternative style sheet to the user. You see how this works in Chapter 6 when ASP.NET Themes are discussed. Another benefit of a separate style sheet file is the decreased bandwidth that is required for your site. Style sheets don’t change with each request, so a browser saves a local copy of the style sheet the first time it downloads it. From then on, it uses this cached copy instead of requesting it from the server over and over again. Sometimes this caching can work against you when the browser doesn’t download the latest CSS files with your changes

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Beginning HTML and CSS

  • Rob Larsen(Author)
  • 2013(Publication Date)
  • Wrox

    (Publisher)

  STYLING TEXT The single most common task with CSS on the web is styling text. In this next Try It Out, you style text on the sample website. TRY IT OUT Styling the Example Café Text Now that you’ve learned about using CSS to format text, it is time to put what you have learned into practice by adding styles to the Example Café website. 1. To create an external style sheet, start your text editor and create a file called interface.CSS. Save it in a folder called CSS with the rest of the Example Café files. At the beginning of the style sheet, add a comment to explain what the style sheet is for: /* style sheet for Example Cafe */ 2. The default font family should be Arial. If the user does not have Arial installed, suggest Verdana, failing which the computer’s default is sans-serif font. body { font-family : arial, verdana, sans-serif; } 222 ❘ CHAPTER 7 CASCADING STYLE SHEETS 3. To have the headings stand out in a different font, have Georgia as the first choice for headings, then Times, and finally the default serif font. To have them appear in gray rather than black, specify a color for the headings using the color property (which is discussed in more detail in the following chapter). Because you want to make all headings the same, specify the styles in a single rule like so: h2 { font-family : georgia, times, serif; color : #666666; } 4. The paragraphs of text might look a little better slightly smaller than the default size of text, so make them 90 percent of the default size. Also make the text dark gray rather than black. p { font-size:90%; color:#333333; } 5. Now look at the navigation. In particular, you want to control the appearance of the links in the navigation. To do this, open the HTML pages and add an id attribute to the

  Sign up to read

  Learn more about book