Introduction to CSS and Styling
What is CSS?
CSS, or Cascading Style Sheets, lets you control how HTML elements look in the browser. HTML already has some default styles, based on the browser. But CSS lets you override the browser’s default display style. In other words, CSS allows us to write a set of rules which define exactly how to display a particular type of data on a website. A CSS rule might translate to something like “display all paragraphs in the Arial font”.
Practical Applications
CSS ensures a consistent look across a website by applying the same style from a single file to multiple pages. A website can use one CSS file for every page – each page will have its own unique data and information, but all pages will have a similar appearance, and changing the appearance for the entire website can be done instantly by modifying a single file. This consistency helps your website to maintain a unified visual theme or brand, providing an easy end-user experience for visitors.
More Information
CSS rules are standardized by the World Wide Web Consortium (W3C), with CSS3 being the latest major version (written July 2024). W3C provides an online tool that anyone can use in order to test whether a piece of CSS code is completely valid, called the CSS Validation Service.
This textbook will discuss the most frequently used CSS rules. The content discussed in this textbook is a very small subset of what is possible in CSS. To learn more, read the Mozilla Developer Network’s CSS Documentation or the Official W3C Language Specification.
CSS files are written using plain-text editors, just like HTML files. Some text editors include Notepad++ on Windows, for Mac OSX users is Textwrangler, and for Linux users is Gedit.
Learning Outcomes
Create and design basic web pages
Chapter Learning Outcomes
- Override the browser’s default presentation style using CSS rules.
- Differentiate selector scope on name, id, and class selectors.
- Learn to define sizes and colors on the screen using accepted units.
- Create a consistent style across multiple web pages using an external stylesheet.
- Use the style attribute to handle edge cases.