CSS & Text Properties
Text properties can be very useful in the flow of a page as well as modernizing a page. I was recently working on something completely unrelated to coding and I was told it was “not millennial enough”. My initial response was: “Ok?”
I’m not a millennial and had to take a step back and talk it through. The point was more that what I had produced was not modern enough. Too boxy, too drab (I thought having color meant it wasn’t drab, but apparently I was wrong).
Think of the icons and widgets on smart phones. They used to be little boxes. now they have rounded corners, different colors based on marketing studies, etc. They change and update as they progress. Using CSS text properties can help do this for a webpage. Here are some basic text properties to take a look at and play with. Once these are added into a page, they can be fairly easily updated over time but just swapping out the values to make some easy adjustments and create a better flowing, modern, or millennial-esque page.
Text Align
Aligning text on a page is somewhat similar to aligning text in a word processing document. One of the big differences is when you align text with CSS, you are aligning within the element rather than the whole page (the float property will align the element within the page). Thinking in terms of word processing is helpful in remembering the names of the text-align values (left, right, center, justify, and inherit).
For example:
In the sample above, all h1’s will now be centered within the element where the h1 exists.
Text Indent
The text-indent property can be thought of similar to using the tab key to start a paragraph in word processing. Using text-indent will indent the first line within an element, similar to the first line of a paragraph. The bonus of text-indent is the value can be a positive or negative value. A positive value will indent text to the right (what you would typically see for a paragraph) and a negative value will indent to the left. The text-indent values can be any common type of length (px, pt, cm, em).
Text Decoration
Using the text-decoration property can create emphasis on a particular piece of text and make it stand out. It can accept values such as underline, overline, line-through, none, colors, and styles. The example below includes underline, overline, styles, and colors.
These are just the beginning of CSS text properties that you can use to help a page and/or text stand out and be unique. I highly recommend taking a deeper look at text properties and trying them out to see what they can do.
