Image for post
Image for post

Cascading Style Sheets (CSS) is what controls the aesthetics of a webpage. It determines the colors, sizes, and fonts of elements on a webpage. CSS is applied to HTML elements.

Writing CSS

When writing CSS, there are two parts to a CSS declaration; a property and a value. The property is what aspect of an HTML element you are changing. The value is what you want the property to be. For example, if you want to make your text blue, you will set the color property to blue.

A value can be either a word or a number. Some number values require units. There are two types of CSS units; absolute units and relative units. Absolute units are tied to physical units (inches, millimeters). Relative units can be relative to either the size of a user’s viewport or to the size of another element on the webpage. Some of the most common units are pt (point), pixels (px), and % (percent). Point refers to font size. Pixels refers to how many pixels an element will span. Percent indicates what percentage of the screen an element will fill.

Applying CSS

There are three ways CSS can be written. It can be written with inline formatting, meaning the CSS is written inside of an HTML tag, using the “style” attribute. This CSS would apply only to this single HTML element.

<p style=”color : blue”>This text will be blue!</p>

Inline formatting is not commonly used because it is inefficient and introduces opportunities for inconsistent styling.

The second way of writing CSS is through internal formatting. This means the CSS is written between HTML <style> tags. Internal formatting allows for many CSS declarations to be made within the <style> tags. This can be used to form a style section of a program which contains all of the CSS for the webpage. When a CSS declaration is made within the style tags, the syntax is as follows.

<style>selector{property:value;}</style>

A selector is used to select the element or elements to which the CSS will be applied. Common ways for elements can be selected by type, by id, or by class. Multiple selectors can be used in the same CSS declaration.

Image for post
Image for post
CSS Selectors

A class is a set of CSS declarations that can be applied to an HTML element. When a class is written, it is given a name. To assign an HTML element to a class, give the element an attribute of class and set the value of that attribute equal to the CSS class name.

The <style> section is written in the head of an HTML document. It is important that this section goes in the head because the head is one of the first things that a browser reads when loads a webpage. Putting CSS information in the head tag ensures that a computer will know how to render HTML before it reaches the HTML code.

CSS can also be written using external format. This means that the CSS is written in a separate file from the HTML code and this CSS file is linked to the HTML pages. The link to the CSS page is written inside the <head> tag.

Specificity

With so many different ways to stylize HTML elements, there is a chance for a single element to receive multiple different CSS assignments. For example, let’s say a webpage is programmed with many paragraph elements, all with 12pt font. This webpage has a very important paragraph that a developer wants to emphasize to users. The developer could create an “important” class that has 14pt font. This means that the important paragraph is being told it should have 12pt font and 14pt font. In cases where an HTML element is assigned multiple conflicting CSS styles, specificity is used to resolve any conflicts. A more specific CSS assignment will override a less specific one. Inline styling overrides id, which overrides class, which overrides type.

inline styling > id > class > type

CSS Colors

Image for post
Image for post

There are many different ways to choose colors in CSS. The simplest way is to enter the name of a color. CSS recognizes common color names such as blue and green. It also has less common color names such as orchid, aliceblue, and aquamarine. Although this is an easy way to access a color, it makes for a limited pallet.

Hexadecimal (hex) code can be used to get a greater variety of colors. Hexadecimals are similar to decimals except they have a base of 16 instead of 10. 0 through 9 is represented with numbers 0 through 9 and 10 through 15 are represented with letters A through F. In CSS, hex code is written with 6 digits. The first two digits represent the color’s red value, the next two digits represent the color’s green value, and the last two digits represent the color’s blue value. Hex code can be abbreviated to three digits where the first represents the color’s red value, the second digit represents the color’s green value, and the third digit represents the color’s blue value.

Colors can also be accessed using RGB format, which is written with three values. Each of these values is a number which ranges from 0 to 255. 0 is the least amount of red, green, or blue that a color can have and 255 is the most. RGB values of 0, 0, and 0 make black and RGB values of 255, 255, and 255 make white.

Image for post
Image for post
Color Formatting

CSS Layouts

CSS treats every HTML element as a box. This box has four zones, as pictured below.

Image for post
Image for post
HTML box model anatomy

The margin is the space surrounding the element. The border is the edge of the element. Padding is space inside the element that surrounds the element’s content.

Each of these parts of an HTML element can be changed with CSS.

p{padding: 20px}

The code above would give the top, bottom, left, and right sides of all paragraph elements padding of 10 pixels while the code below would give the top of all images margins of 5 pixels and the bottom of all images margins of 15 pixels.

img{margin-top: 5px;margin-bottom: 15px;}

More to CSS

There is much more to CSS than what this article covers. This is meant to be only a brief overview of some of the most common and fundamental parts of CSS. For more information and resources on CSS, you can use the following resources.

Full Stack Software Engineer/ Web Developer and former Mechanical Engineer https://www.linkedin.com/in/ariel-jakubowski/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store