CSS Basics - Color, Text, and Space

Let’s make all of our things pretty and just the way we like it.

Photo by Pankaj Patel on Unsplash

We have now not only discussed how to select any HTML element, but also how to structure those elements (getting around a core limitation of HTML, might I add).

Honestly, this one could have come before structure because we are keeping it super simple folks…

Color

HTML elements come to us in the blandest form code exists. We can do something about it through CSS properties, the simplest of which changes the color of text:

color: red;

changes the color of text (for whatever selector the attribute is under, of course) to red. Simple right? Likewise,

background-color: blue;

changes, you guessed it, the background color to blue.

Lastly, we can style an element with a ‘gradient’, which as the name implies gives us a grade of color

We will explore more ways to color things using their built-in shorthand properties.

Text

CSS gives us a variety of ways to format text the easy way. Here are a few:

font-size: 6px; - sets the font size, duhfont-family: Arial; - sets the font style, according to familyfont-weight: 700; - sets the boldness level. 700 is heavy, but not maxtext-transform: uppercase; - applies a format to the text, more heretext-decoration: underline; - adds common decoration (and is shorthand!)

There are many more ways to get text looking the way you want. Utilize these few common ones and explore the other options CSS gives you!

Space

Much like the structures we learned about, CSS gives us little ways to adjust the area our elements inhabit in the page.

Margin and Padding

Every element essentially has an invisible box around it that defines its border. Margin and padding both influence the immediate area around our ‘box’, just in opposite ways.

margin: 10px;

pushes everything outside our element’s ‘box’ 10 pixels away in every direction.

padding: 10px;

does the same thing, but pushes the border of our ‘box’ out from the element by 10px in every direction.

The shorthand here, applying to both margin and padding, is simply addressed by how many sizes we define (up to four). For example:

padding: 10px 20px;

pushes the border from the element 10 pixels top and bottom, and 20 pixels left and right. Going even deeper,

margin: 10px 20px 5px;

pushes neighboring elements from the element in question 10 pixels from the top, 20 pixels on the sides, and 5 pixels from the bottom. Lastly,

margin: 10px 20px 5px 30px;

pushes (going clockwise) the respective pixel value top, right, bottom, and left. This shorthand will save you a ton of time and make your webpage look great, so memorize it ASAP!

Border

Additionally, that little ‘invisible box’ I mentioned? Yeah, that can actually be defined as a ‘border’, and we can do all sorts of things to it with its own shorthand:

border: 5px dotted blue;

produces a border that is 5px thick, a dotted line, and the color blue. Fun fact, if the color is left blank the border will just be the same color as the text! There are a lot of interesting things you can do with a border, so make sure to peruse all that here.

The last thing I will say concerning borders is that you can use this same shorthand method but target a specific side of the border by using border-bottom/top/left/right, whatever the case may be.

Height and Width

Not much to say here besides this — you can set an element to have a certain size. For example, a <p> with some text in it could be set to

height: 400px;width: 800px;

and the element would be that many pixels in size. The text itself wouldn’t, but the ‘box’ around our <p> element would. Then any styles applied to that paragraph would apply to that 400x800 pixel behemoth. Like a background color!

Position

CSS gives us control over the specific position in a page an element can exist. It does so through the ‘position’ attribute (shocker, I know), which has seven different possible values:

static - positions element in the order it appears in your HTML doc.

relative — positioned, wait for it, relative to where it would normally appear. You can designate this through top, right, bottom, or left properties.

absolute - positioned relative to its first positioned ancestor. Sounds crazy but just means if you use the property

left: 20px; 

it will show up 20 pixels to the right of the last ‘ancestor’ or container element you gave a position value to.

fixed - positioned relative to the browser window.

initial - positioned where it should be by default, which is usually static.

inherit - positioned the same way its parent element is.

As you can see, there are a lot of little specific ways to change elements in CSS. Unfortunately, this isn’t the place to go into every infinitesimal detail so make sure to dive into a CSS learning library like w3schools.com. Additionally, CSS is being updated regularly so there might be new, easier ways to accomplish something.

--

--

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