Upgrading Our Text Editor With CSS: Practicum by Yandex

By Evgeniy Lebedev Chief Marketing Officer Practicum by Yandex, edtech expert, practicum.yandex.com Message

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.

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 CSS</h1>
<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 editor</a>. 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">
Simple, right?
<h1>
stands for a header,
<p>
stands for a paragraph,
<a>
means hyperlink and
<img>
is an image. HTML is good at marking up text, and it’s very readable. It was originally designed to mark up scientific papers, and at that, it’s really good. 

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.

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
<head>
part of the page, surrounded by
<style>...</style>
tags, like so:
<!DOCTYPE html>
<html> <head> <title>My text editor</title> <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>
From last time, I already have a CSS instruction that defines our
<body>
element. <Body> 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 <div> 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; }

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
<style>
block at the top of our page, like so:
#editor{ background-color: white;
height: 100%;
width: 70%;
border: solid;
border-width: 1px;
padding:15px; }

And our div in the code will now look much cleaner and more compact:

<div id="editor" contenteditable="true"></div>
Although technically I could write all editor-specific CSS inline, like before, this is considered bad practice: the HTML becomes messy and hard to read. Now I have all of our design above in the
<style>
section and all of our content and scripts below in the
<body>
section. 

Also I wanted to remove the borders from our editor. Here is what remains in the style declaration:

#editor{ background-color: white;
height: 100%;
width: 70%;
padding:15px; }

CSS has a fantastic set of properties about sizes. Try to read these and guess what they mean in the context of our task:

#editor{ background-color: white;
height: 100%;
width:94%;
max-width: 760px;
padding:15px; } 

In English, this reads: ‘the width of this is 94% of the container that you sit in, but you cannot exceed 760 px;’ In this case, if I have a wide desktop screen, I’ll have an editor that’ 760 pixels wide. On mobile, it will be 96% wide, with thin margins around the editor, so your scrollbar can live there. 

Similarly, I can add paddings to the editor itself, allowing it to adjust its margins according to screen size. Notice that I’ll have to shrink the width a little because paddings cause the editor to expand:

#editor{ background-color: white;
height: 100%;
width:90%;
max-width: 760px;
padding: 5vw 5vw 10vw 5vw; }

These paddings are spaces between the text you type and the edge of the sheet. When the text touches the edge of the sheet, this looks unnatural.

If you now save the program and load it in the browser, you’ll see a refined new look. And if you resize the window, you’ll see the margins adapt to screen size:

Our body already has some typographic declarations: 

body{ background-color: #dcdcdc; text-align: left; padding: 20px 2vw 0px 2vw; font-family: Verdana, Arial, sans-serif; font-size: 16px; }
Since it’s in
<body>
, this typography affects the entire document. But I can redefine typography for some elements. What if you wanted a different font to write with? 
Google ‘Css typography generator’ and use it to create CSS declarations that you like. I used csstypeset.com and here is what I came up with:
font-family: helvetica, sans-serif;
font-size: 1.3em;
line-height: 1.4;

I put this code into my #editor declaration like so:

Some objects in HTML can cast shadows with CSS. A Div can so let’s give it a shadow. Google ‘Box Shadow CSS Generator’ and generate away. Here is what I got: 

#editor{ background-color: white;
height: 100%;
width:90%;
max-width: 760px;
padding: 5vw 5vw 10vw 5vw;
font-family: helvetica, sans-serif;
font-size: 1.3em;
line-height: 1.4;
-webkit-box-shadow: 2px 10px 35px -16px rgba(0,0,0,0.52);
-moz-box-shadow: 2px 10px 35px -16px rgba(0,0,0,0.52);
box-shadow: 2px 10px 35px -16px rgba(0,0,0,0.52); }

The three lines are because different browsers use different instructions for shadows, so generators have to do all three. This isn’t very nice, but it is what it is.

Look how far I’ve come:

And here is the entire code:

<html> <head> <title>My text editor</title> <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"> body{ background-color: #dcdcdc; text-align: left; padding: 20px 2vw 0px 2vw; font-family: Verdana, Arial, sans-serif; font-size: 16px; } #editor{ background-color: white; height: 100%; width:90%; max-width: 760px; padding: 5vw 5vw 10vw 5vw; font-family: helvetica, sans-serif; font-size: 1.3em; line-height: 1.4; -webkit-box-shadow: 2px 10px 35px -16px rgba(0,0,0,0.52); -moz-box-shadow: 2px 10px 35px -16px rgba(0,0,0,0.52); box-shadow: 2px 10px 35px -16px rgba(0,0,0,0.52); } </style>
</head>
<body> <h2>Text editor with auto-save</h2> <div id="editor" contenteditable="true"></div> <script> if (localStorage.getItem('text_in_editor') !== null) { document.getElementById('editor').innerHTML = localStorage.getItem('text_in_editor'); } document.addEventListener('keydown', function(e) { localStorage.setItem('text_in_editor', document.getElementById('editor').innerHTML); }); </script>
</body>
</html>