Computer Science
CSS
CSS, or Cascading Style Sheets, is a language used for describing the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and other visual aspects of a web page, allowing for the separation of content from design. CSS is essential for creating visually appealing and user-friendly websites.
Written by Perlego with AI-assistance
Related key terms
8 Key excerpts on "CSS"
eBook - ePub- 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
eBook - ePubCreating Data-Driven Web Sites
An Introduction to HTML, CSS, PHP, and MySQL
- Bob Terrell(Author)
- 2019(Publication Date)
- Momentum Press(Publisher)
CHAPTER 2CASCADING 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 SYNTAXAs seen in the introduction, a CSS declaration consists of two parts: The selector and the declaration block
eBook - ePubJavaScript for Modern Web Development
Building a Web Application Using HTML, CSS, and JavaScript
- Alok Ranjan(Author)
- 2020(Publication Date)
- BPB Publications(Publisher)
CSS (Cascading Style Sheets). CSS takes complete control of styling the web and strengthens the content with visual design, the power of which is boundless. It improves the intuitiveness of the web, along with enhancing its appearance. CSS is an absolute must have skill in web development.Structure
- Power of CSS3
- Basics of CSS
- CSS precedence and specificity
- CSS styling – Font, text, background properties
- CSS – The box model
- Positioning elements
- Responsive design
Objective
After studying this chapter, you will learn about the basic syntax and properties of CSS and how it can be used to our advantage to improve the overall appearance of the web pages.Power of CSS
To understand and realize what CSS can do, you need to see this webpage in the following two forms. The first diagram is of the webpage without any styling applied:Figure 3.1: A login page without CSSThe next diagram shows the same content with CSS applied for styling:Figure 3.2: The same page after applying CSSWhat a drastic makeover! That's the power of CSS! You now know that HTML defines content and CSS defines the presentation of the content:- With CSS, you can control the layout of multiple web pages all at once and make your website consistent
- With CSS, you can apply different styles to the same content to change the look for different media devices very easily
Basics of CSS
CSS code structure is very simple to understand. The CSS code body comprises of CSS rule sets. A CSS rule-set consists of two main parts, as follows:- A selector: The selector points to the HTML element you want to style.
- A declaration block: The declaration block contains one or more declarations separated by semicolons. Each declaration/rule includes a CSS property name and a value, separated by a colon:
- The property is the property to be modified
- the value to be assigned to the property
eBook - ePub- Rob Larsen(Author)
- 2013(Publication Date)
- Wrox(Publisher)
Chapter 7Cascading Style Sheets
What You Will Learn in This Chapter- What makes up a CSS rule
- How properties and values control the presentation of different elements within your document
- How to control the presentation of text using CSS
- How CSS is based on a box model, and how you set different properties for these boxes (such as width and styles of borders)
Wrox.com Code Downloads for this ChapterThe wrox.com code downloads for this chapter are found at www.wrox.com/remtitle.cgi?isbn=9781118340189 on the Download Code tab. The code is in the Chapter 7 download and individually named according to the names throughout the chapter.Having learned how to structure the content of your documents using HTML’s wide variety of elements and attributes, you can now start making your pages look a lot more exciting.In this chapter, you learn how to use cascading style sheets (CSS ) to take control of the style of your pages, including the color and size of fonts, the width and color of lines, and the amount of space between items on the page. The cascading style sheets specification works by enabling you to specify rules that say how the content of elements within your document should appear. For example, you can specify that the background of the page is a cream color, the contents of all <p> elements should display in gray using the Arial typeface, and all <h1> elements should be in red using the Times New Roman typeface.By the end of the chapter, you should be confidently writing CSS style sheets and should have learned many of the properties you can use to affect the presentation of any document using CSS.Introducing CSS
CSS works by enabling you to associate rules with the elements that appear in a web page. These rules govern how the content of those elements should be rendered. Figure 7-1 shows an example of a CSS rule, which is made up of two parts:- The selector
eBook - ePub- Imar Spaanjaars(Author)
- 2014(Publication Date)
- Wrox(Publisher)
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. If you find that the browser is not picking up the changes you made to a CSS file, use Ctrl+F5 or Ctl+R in the browser (not in VS) to get a fresh copy from the server.Now that you have seen why CSS is so important, it’s time to find out how it looks and how to use it.AN INTRODUCTION TO CSS
In terms of syntax, CSS is an easy language to learn. Its “grammar” consists of only a few concepts. That makes it relatively easy to get started with. What makes CSS a bit more difficult is the way all major browsers render a page. Although virtually every modern desktop browser understands CSS, they all have their quirks when it comes to displaying a page according to the CSS standard. This standard, maintained by the same organization that maintains the HTML standard, the World Wide Web Consortium, or W3C for short, comes in three different versions: 1.0, 2.1, and 3.0. Of these three versions, 2.1 is the most applicable today. It contains everything that version 1.0 contains but also adds a lot of possibilities on top of that. It’s also the version that VS uses and generates by default. Version 3.0 is currently under development and it’s expected to take some time before the major browsers have solid support for it.Before you look at the actual syntax of CSS, it’s a good idea to see an example first. In the following exercise, you will write a simple ASPX page that contains some CSS to format the contents of the page. This helps in understanding the CSS language, which is discussed in full detail in the section that follows.
eBook - ePub- Steven M. Schafer(Author)
- 2011(Publication Date)
- Wiley(Publisher)
Part III Controlling Presentation with CSSChapter 25: CSS BasicsChapter 26: Style DefinitionsChapter 27: CSS Values and UnitsChapter 28: CSS Inheritance and CascadeChapter 29: Font PropertiesChapter 30: Text FormattingChapter 31: CSS ListsChapter 32: Padding, Margins, and BordersChapter 33: Colors and BackgroundsChapter 34: CSS LayoutsChapter 35: Pseudo-Elements and Generated ContentChapter 36: Dynamic HTML with CSSChapter 37: Media Styles and Defining Documents for PrintingChapter 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 StylesStyles 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.NoteAnyone 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.
eBook - ePub- Imar Spaanjaars(Author)
- 2012(Publication Date)
- Wrox(Publisher)
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 then 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 decrease in 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. If you find that the browser is not picking up the changes you made to a CSS file, use Ctrl+F5 or Ctl+R in the browser (not in VS) to get a fresh copy from the server.Now that you have seen why CSS is so important, it's time to find out how it looks and how to use it.An Introduction to CSS
In terms of syntax, CSS is an easy language to learn. Its “grammar” consists of only a few concepts. That makes it relatively easy to get started with. What makes CSS a bit more difficult is the way all major browsers render a page. Although virtually every modern desktop browser understands CSS, they all have their quirks when it comes to displaying a page according to the CSS standard. This standard, maintained by the same organization that maintains the HTML standard, the World Wide Web Consortium, or W3C
eBook - ePubBeginning ASP.NET 4
in C# and VB
- Imar Spaanjaars(Author)
- 2010(Publication Date)
- Wrox(Publisher)
CSS can be applied not only to HTML as you’ve seen in this chapter, but also to ASP.NET Server Controls. The CSS you apply to those controls eventually ends up in the browser as plain HTML where the same principles apply as those you’ve seen in this chapter. The next chapter gives you a detailed look at the many available ASP.NET Server Controls.EXERCISES
- 1. What is the main benefit of using an external style over embedded style sheets?
- 2. Write a CSS rule that changes the appearance of all headings at level one (h1 ) in your page to the following:
- The heading uses an Arial font face.
- The heading should be blue.
- The heading must have a font size of 18 pixels.
- The heading has a blue, thin border at the top and left sides.
- For the last requirement, check out VWD’s IntelliSense list in a CSS file to discover another shorthand version for the border property.
- 3. Which of the two following rules is easier to reuse across pages in your web site? Can you explain why?
#MainContent { border: 1px solid blue; } .BoxWithBorders { border: 1px solid blue; }
- 4. VWD enables you to attach an external style sheet to a page in a number of different ways. Can you name three different options to do this?
What You Learned in this Chapter CSS Cascading Style Sheets: the language to layout web pages in the browser CSS Box Model The model on which the dimensions of elements are calculated with regard to height, width, padding, border, and margin Declaration A combination of a property and a value that determines the styling for the element to which the declaration applies Embedded style sheets CSS code that is defined in a page in a <style /> element External style sheets CSS code that is defined in a separate file and then included in a page using the <link /> element In-line style sheets CSS defined directly on an element using the style attribute Rule set A combination of a selector and one or more declarations wrapped in a pair of curly braces Selector A CSS construct to point to one or more elements in the page. Different selectors exist, including the universal selector, the ID and class selectors and the element selector
Learn about this page
Index pages curate the most relevant extracts from our library of academic textbooks. They’ve been created using an in-house natural language model (NLM), each adding context and meaning to key research topics.
