CSS: THE VISUAL LANGUAGE OF THE WEB
The front end of a website is everything that a user sees and interacts with when they land on your site. Its core trio of technologies includes:
- HTML markup, which dictates the organization, structure, and content of a site;
- JavaScript, which gives everything on a page interactivity and animation; and
- CSS (Cascading Style Sheets), the style-sheet language designers use to give a site its look and feel.
Everything visual about a website—from background colors and navigation bars to fonts and text alignment—is a product of CSS.
HOW CSS WORKS
CSS and HTML are the duo that gives a site its static structure and style. HTML defines what elements are on a page, while CSS defines how those HTML elements appear. If HTML tags text as a page’s <header>, CSS tells a computer how everything marked <header> on that website should appear, e.g., in bold, blue font.
CSS and HTML naturally work together as the foundation of a site, but exist as totally separate files—something that saves developers a lot of hassle. By storing a CSS file externally, developers can update design aspects for multiple pages at once without touching a site’s HTML. An entire site’s design can be edited in that one, external document. Attaching a CSS file to an HTML document is possible with a single HTML tag embedded into the site’s code; they can be embedded, linked, imported, or added inline into HTML; each method has its own advantages.
From there, every design element in that CSS file is globally applied to a site, allowing a programmer to define the look and format of multiple webpages at once. Imagine trying to code design individually for every page of a 1,000-page site, adding in the font and color code for every single page. CSS streamlines this process down to one, externally linked, layered file.
“CASCADING” CREATES EFFICIENCY
Once that CSS is applied to a site, “cascading” pages come into play. In CSS, sheets are layered onto one another, adding more complexity without disrupting one another. A base page can dictate the site-wide color scheme, background, and font, letting developers “set it and forget it.” The flexibility comes in with the sheets they can layer on to that, adding more complexity and page-specific designs that can be turned on or off without changing any other aspects of the site’s design.
Some of the most important CSS3 modules include:
- Selectors: Developers can edit elements by name, class, type, attribute, and more.
- The Box Model module: This describes an approach to creating consistency between HTML elements on a page, or “boxes.” By applying margins, borders, and padding to a box’s content, developers can clear area around an element, give it borders, and more.
- Backgrounds and borders: With better control of the treatments of element borders and page backgrounds, CSS3 also enables rounded corners on boxes and drop shadows.
- Images values and replaced content
- Text effects: CSS3 includes shadow effects, text overflow (hiding text that gets too long for its element), word breaking (automatically breaking text so it fits within a box), and text wrapping.
- 2D and 3D transformations: These effects allow elements on a page to rotate, grow, shrink, flip, or translate into a different color.
- Animations: For the first time, CSS elements can move without using JavaScript or Flash.
- Transitions: An element can seamlessly change size and color.
- Multiple column layout: This allows pages to have more than one column of text, like a newspaper, with adjustments for width, rule, color, and more.
- User interface module: There are new ways to edit user interface elements.