Intro to CSS

CSS stands for cascading style sheets. It’s a language used to shape the presentation of webpages and other media, and is a one of the three cornerstone languages of web-design. HTML defines the structure of a webpage, javascript defines the functionality, and CSS defines the presentation. Anytime you see an eye-catching webpage, it’s due in no small part to the functionality of this language.

The idea for CSS came about in 1994 amidst a burgeoning web-based community. Designers were adding more complex appearances to their webpages, but these more modern looks came at the cost of increasingly complex HTML and pages that loaded inconsistently across browsers. As a result, members of the World Wide Web Consortium (W3C) pushed for development of a framework that would enable the separation of style code from HTML. Several different style sheet languages were proposed by several different entities, but ultimately CSS1 won out, and has continued to be the primary style sheet language on the web.

CSS works by assigning values to various style attributes of HTML elements to a priority scheme. These style assignments are then applied to a document in a “cascading” and predictable order. This code is written in a css file that can then be linked to and HTML file. The language allows for stylization of specific elements or groupings of elements through the ID, class, and tag selectors.

The format for CSS code blocks is:

selector {
	attribute: value;
	attribute: value1, value2, value3;
}
/* and you can add comments like this */

CSS has many kinds of selectors, but a few of there are a few primary one that are quite common. You can select via element tag, for instance:

h1 {
	attribute: value
}
/* This will apply the declared styling to all of those kinds of tag on 
the corresponding HTML. */

You can select by class: .blog-class {…}. This kind of declaration applies stying to every element assigned to the class name. Classes can be assigned in the element of tags of the HTML file so that various kinds of tags can be grouped together with a consistent look. Also, you can target individual tags by selecting ID’s: #id-name {…}. ID’s, like class names, can be assigned to tags within the HTML file.

Just like with selectors, there are many attributes to customize and in many ways. These are some of the biggest categories of attributes and some of the most common options for changing them.

Boxes:

All CSS elements are considered boxes, and the “box model” is used to discuss the design and shape of these elements. The element has its content in its center (although not necessarily centered). If a border is assigned to the element it will surround the content. Assigning padding will apply buffer space inside the border, and conversely, margin will add buffer space outside the border. These box elements have their own attributes that can be changed.

• the border attribute is a shortcut syntax for a few different attributes (border-width / border-style / border-color).
• border, padding, and margin all begin with a “width” attribute whose value determines the uniform width around the element. You can pass in several unit types (pixels, percent, mm etc).
• border-radius determines the the roundness of the borders corners. Like width, this attribute can accept many unit types including pixels.

Color:

• color can be assigned several ways: color name, RGB values, and color hex code. CSS knows a robust selection of color names so it’s easy to pick just by name however the other two methods can provide finer selection.
• background-color is just as it sounds. It adjust the background color of an element
• the border attribute is a shortcut syntax for a few different attributes (border-width / border-style / border-color), but notices that we can use this to also assign a color to an element around the border
• the color attribute will assign the chosen color to text inside the element

Text:

• these attributes adjust the inner text of an element
• alignment will adjust the overall positioning of text. This value defaults to the left side, but you can choose center or right as well as “justify” to spread the words out evenly. Similarly you adjust the vertical position of text with the vertical-alignment attribute
• decoration lets you apply effects such as underline or even over- and through-lines
• font-family lets you change the font style. This attribute lets you repeatedly input family names and it will try to apply the leftmost family first and sequentially default to the next family if it can’t find it.
• font size increases the size of all the characters

These are some of the basic styling options you can use to quickly add some flair to a webpage, but there are many more options available too. There’s also other selector options that allow you to select combinations of elements, or elements according to relative position. Resources like w3schools and MDN provide lots of documentation to explore on CSS. Also, there are many CSS libraries available online such as Bootstrap that let you browse already compiled CSS designs. I hope this was a helpful introduction to this useful language.