CSS is the shortened form of Cascading Style Sheets. This web language arose after developers could not adapt HTML to stylize large websites. Since CSS is a distinct web language, its syntax differs from HTML 5. Users can stylize CSS as external style sheets, inline styles, and internal styles. CSS affects the positioning of website elements, including fonts and colors.

CSS defines the display of HTML elements. Before the introduction of CSS, web developers needed to code tags for fonts and colors repeatedly on every webpage. Thus, coding many descriptive tags on a large website created a nightmare. Therefore, the World Wide Web Consortium (W3C) developed CSS to alleviate the issue (“CSS Introduction”).

Furthermore, the syntax for CSS differs from HTML. Developers should signify the style type use of CSS in the head section. This notation will inform the document’s use of CSS (AGI Creative Team 41). CSS code splits into several distinct sections. For example, a developer might write:

h2 {

            color: black;

}

The first component, the selector, denotes the stylized part of the HTML. For this example, the selector is h2. More specialized selectors commonly used include the class selector and ID selector. The declaration is the second part which features the given styles. In this example, the declaration is “color: black.” Furthermore, the declaration divides into a property: value pair. In the example, color is the property while black is the value (Schmitt 25). However, many web designers do not use these technical terms daily (AGI Creative Team 40).

Ultimately, developers can code CSS in three ways. First, developers can create an external style sheet document that links to an attached file with a CSS extension. This file allows developers to include all the CSS styles for a website. This style sheet type is the only CSS styling method used on multiple web pages (AGI Creative Team 45). Sometimes developers add numerous external CSS files that categorize CSS styles in separate documents. Secondly, developers can use internal styles that integrate a webpage’s styles in the head section. These styles only affect the webpage where the embedded styles appear. Internal styles can be useful for changing styles by overriding inline and external styles. Lastly, developers can use inline styles by directly entering the HTML code. Examples of inline elements include img or em (Schmitt 29, 31). Typically, developers use internal and external styles (AGI Creative Team 45-46).

CSS affects the positioning of website elements in a browser in four ways: static, fixed, relative, and absolute. First, the static position, or normal flow of the document, involves vertically stacking each block-level element on top of the next block-level element. Secondly, elements in the fixed position remain in the same location relative to the browser window. Thirdly, in the relative position, given position properties of top, right, bottom, and left offset the relevant element from the static position (Schmitt 38-39). Lastly, elements in the absolute position follow the positioning values of their containers.

CSS stylizes many elements in a website. Fonts and colors are some of the most stylized elements. CSS organizes colors into two main color systems, with each color holding a different value in each system. The RGB system arranges colors according to how much red, green, and blue are in each color. The hexadecimal system categorizes each color in a six-character code headed by a pound sign. Developers can use either system (AGI Creative Team 43, 131). Fonts come in five font family types which each include multiple fonts. These font families include serif fonts, sans fonts, cursive fonts, fantasy fonts, and monospace fonts. Developers can assign different font families to stylize headings and paragraphs (Schmitt 44).

Finally, the importance of CSS in building websites is immense. CSS provides the visual framework for a website in a browser. The most recent version, CSS 3, covers such varied aspects as positioning, layout, typography, and color selection. Properly applied, CSS can successfully launch a visually engaging website.

References

“CSS Introduction.” w3schools.com, https://www.w3schools.com/css/css_intro.asp.

AGI Creative Team. HTML 5 Digital Classroom. Wiley, 2014.

Schmitt, Christopher. Designing Web and Mobile Graphics. New Riders, 2013.