Upgrading Our Text Editor With CSS: Practicum by Yandex

In one of my previous posts, I showed you how to make your own text editor. It is quite simple now, only supports one document and stores it inside your browser’s memory. But it works, and it’s yours. 

Today’ let’s give this project a facelift and learn some CSS along the way. I’ll take our editor from this to this: 

Classy. To achieve this, I’ll need to learn a bit about CSS, what it is and how it works.

What is CSS

CSS is Cascading Style Sheets, a part of a web page that tells that page how to look. Here is how it came to be.

Like at the very beginning of the web, all web sites are composed of a markup language called HTML — HyperText Markup Language. This language was designed to explain to the browser, which part of the page is a headline, which is a paragraph, what is the structure of tables, where to put images and where the hyperlinks take you. It’s a fairly simple language that uses tags to mark up the content. 

For example, here is what the beginning of this article looks like in HTML:

<h1>Upgrading our text editor with CSSh1>
<p>In one of my previous posts, I showed you <a href="https://hackernoon.com/make-your-own-text-editor-in-15-minutes-with-practicum-by-yandex-rvt2g5g">how to make your own text editora>. It is quite simple now, only supports one document and stores it inside your browser’s memory. But it works, and it’s yours. 
<p>Today’ let’s give this project a facelift and learn some CSS along the way. We’ll take our editor from this to this:p>
<img src="..." alt="Our own text editor, redesigned">

But HTML was never intended for web design: originally it could do very little to make the text look nice. You could specify some colors and sizes, but to make a three-column website, you needed extensive workarounds. For example, web designers had to make a three-column table for the outer structure of the site, and them more tables for the internal structure. Web sites in the late 1990-s were tables inside tables with loads of spaghetti code to make them all look nice. 

Then, CSS came along. 

CSS is a list of instructions that tells the browser how to render all the HTML elements: where, in what size, color, and background, how these objects line up against each other, how they resize, do they cast shadows, what borders they have and even how they move.

CSS instructions live separately from the HTML: you can have the same CSS control different web pages. This is useful when you want your entire site to look coherent: you design one set of CSS instructions and attach it to all web pages, so they all look similar in design, albeit different in content. 

These instructions can be specific to one element — for example, paint some specific part of the text in some color; but more often CSS is generalized to the entire document. For example, a typical use of CSS would be something like this: 

p{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin-bottom:24px;
}

This reads: ‘To all paragraphs apply font Arial, or Helvetica, or any other sans-serif font if you don’t have Arial or Helvetica. Make the font size of 16 pixels. At the bottom of the paragraph, add a margin of 24 pixels’. This instruction doesn’t care what’s written inside the paragraph, how many paragraphs there are on the page and how long they are. All it cares about is how that paragraph looks. 

There is a lot more to learn about CSS, but let’s dive into work.

The plan

In our current state, our text editor isn’t really nice-looking. I need the browser to render it differently:

  1. Paint the body of the program in grey and the editor — white, so I don’t need the ugly black border on our editor’s page. Also, maybe, some padding from the edges of the screen to make it look nice.
  2. Make the editor adapt to screen size: so it’s not too wide, but collapses to full width on mobile.
  3. Adjust typography in the editor, so I have nicer fonts and font sizes
  4. Maybe cast a shadow a little bit? 
  5. Enjoy
All this will be done inside our web page that contains the code for our program. CSS goes into the

part of the page, surrounded by

tags, like so:


<html> 
<head> 
  <title>My text editortitle>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <style type="text/css">
  -- here be our design (actually, already there is some)-->
    body{
      text-align: left;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }
  style>

head>

1. Background colors and margins

From last time, I already have a CSS instruction that defines our

element. is the foundation of our web page, kind of the root of all objects. Let’s make sure our body’s background is grey:

 body{
      background-color: #dcdcdc;
      text-align: left;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }
The

#dcdcdc;

is a hex number that stands for the color light gray. You can pick your own color by googling Hex Color Picker. Look for the code after the hash, e.g.

#aab1b3

(this would be a blueish light-grey).

Now I need to paint our editor white. The editor is a

element, and theoretically, I could add a CSS instruction for div. But that will mean all divs on-page will turn white. At this moment, there are no other divs on the page, but should I need to add them in later versions, they too will turn white. So I need to target not all divs in general, but a specific div with the editor.

In CSS, there are many ways to target things. One of them is target by ID, where ID is the name of the object that I gave while developing the program. You may remember that our editor div has id=”editor”, so I can target that like so:

#editor{
      background-color: white;
    }

CSS accepts different styles of color codes, including some human-readable names (like white, red, black, yellow, etc). You can also specify colors in RGB — red, green, blue and alpha (transparency). So all these three instructions mean the same thing:

#editor{
      background-color: white;
      background-color: #fff;
      background-color: #ffffff;
      background-color: rgba(255,255,255,1);
    }
I’ll stick with

‘white’

, because it’s more readable like that.

Let’s look at the margins of the page. Now I have an instruction that tells the page to have margins of 10 pixels from each side. I can adjust that to our taste:

body{
      background-color: #dcdcdc;
      text-align: left;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
padding-top: 20px;
padding-right: 2vw;
padding-bottom: 0px;
padding-left: 2vw;
    }
I used four instructions to specify how the page should pad itself around the edges. Notice the

vw

— it’s a dimension that stands for ‘percent of screen width’.

2vw

means ‘Two percent of the screen width’, so when the screen gets narrower, the left and right margins get smaller. This is nice. 

The four instructions look kind of bulky, so CSS has a short way of writing the same instruction. You use the instruction ‘margin’ and specify the four margins starting from the top, moving clockwise. This is much more compact, although less readable:

body{
      background-color: #dcdcdc;
      text-align: left;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
padding: 20px 2vw 0px 2vw;
    }

Housekeeping

From our project last time, you may remember this bit of code:

<div id="editor" contenteditable="true" style="height: 100%; width: 70%; border: solid; border-width: 1px; padding:15px;">div>
The style declaration here is called inline css: this is the same CSS, but targeting this specific div and not touching on anything else. Since I’ve already targeted this div with

#editor

, I can move this in-line styles into the