Cascading Style Sheets and HTML

Although most of my experience in computer programming has been in back end development, the front of the web is magnificent. Have you ever seen a web-page from the late ’90s and thought, “wow, this is a pretty boring website”? Or maybe you’ve seen some beautiful webpages from within the last ten years with varying fonts, colors, and styling.

Image for post
Image for post

Well, you can thank Cascading Style Sheets for the latter. CSS can do almost anything style-wise such as coloring a background, adding animations, and much more. So much, in fact, that this article won’t cover it all. However, this blog will go over the main ideas behind what CSS is, how we can use it, and why we would.

What is CSS?

Cascading StyleSheets or CSS is a stylesheet language that affects how an HTML document will appear in your browser. CSS files are stored in a separate folder than the HTML, and are linked in and applied to the HTML. We can also simply write some CSS in our HTML file inside a specific page, but we’ll talk more about that next. Although CSS has hundreds if not thousands of styling possibilities, it will make it easier for us to understand how it works by focusing on just a few.

How Can I Use CSS?

CSS stylings are defined by first referencing a piece of HTML, and then add a property to them. This is all done within a <style> tag in HTML. A style tag has an opening and closing tag and will wrap all the CSS we want to use in that specific HTML view.

Styling Fonts

Image for post
Image for post

There are many ways to reference your HTML in CSS, such as through an elements id tag or its class. To reference an HTML element with an id of “body-paragraph”, we use the “#” symbol in the syntax on the top. To reference a class attribute, we use the “.” syntax in the example on the bottom. As you can see, the only thing that changes is the prefix; if the attribute is id the prefix is a “#” symbol, and if it is a class attribute the prefix is a ‘“.”

These styling, of course, are pointless without the most important part, the properties. Properties are set to a certain type of styling and then applied to our HTML elements. One of the most common CSS properties is the font-family property. This property sets a specific font-family for your selected text and should hold fallback fonts incase the browser being used does not support the first font. It is a regular practice to have your last listed font as a generic family of your first choice, and your browser will automatically find one it can use that is similar. To use the font-family property, we can write:

Image for post
Image for post
Styling the font of an HTML element with a class attribute of “body-paragraph”

This will tell your browser to first chose Helvetica if it is available, if not to chose Arial, and if neither are available access a similar font in the Sans-Serif family. In practice with more interesting looking fonts it can change this:

Image for post
Image for post

To this:

Image for post
Image for post
Font Family monospace, cursive, and fantasy respectively

Animations with CSS

Not impressed yet? Another great function of CSS is to add animation to our HTML! Using the @keyframes rule specifies the animation code. The animation happens by changing frames at a specific time, either with the keywords ‘from’ and ‘to, or with percentages between 0 and 100. The animation begins at 0% or from and goes until ‘to’ or 100%. We can see this in action styling the background of a div tag:

Image for post
Image for post
Image for post
Image for post

In the above demonstration, the color changes because it is set to different intervals in the CSS. To the left we can see the CSS wrapped in a style tag, accessing the @keyframes animation named “test”. At 0% of the animation, the background of the referenced tag is purple, then at 25% of the total animation time, it changes to blue, and to pink, and so on.

Image for post
Image for post

To our left here we see the div tag being styled in our CSS. The width and height are set in pixels to create the size square we want, and the initial background color is set to purple, meaning the animation will start on the color purple. The animation-name is set so we can reference it with @keyframes, the total duration of the animation is set to 8 seconds. The rest of the div style edits the font to make it cursive, centers the font vertically and horizontally, and changes the font size and color to white.

We can also use the @keyframes rule to make objects move across the screen. By changing animation-name to just animation, and giving it the @keyframes variable name and duration for the animation to last. In the @keyframes rule we define our variable, then set a position from, where the object begins on the page, and to, where the object ends up on the page. And like magic, we have animation!

Image for post
Image for post

Why Use CSS?

Besides adding fun animations and font styles, why would we use CSS? CSS provides a huge library of styling options that can be applied for each individual page of your website or application. This means that not every page has to look alike. CSS allows for making webpages look more professional and less like a bad dream from your mom’s old computer. Styling webpages can help with advertising, enticing consumers, making your website easier to navigate, and just be generally pleasing to look at. Since websites exist to be viewed and used, we may as well make that experience as pleasurable as possible.

There are countless things we can do with CSS. More animations, more element spacing, and font styles. But the overall message of this read is for you to understand that CSS is a tool that is certainly necessary for front end web development. Even just a few touches can make a huge difference to your web page.

I am a Front End Web Developer and Flatiron Academy alumni looking for new opportunities in New Jersey, New York, or Pennsylvania Area.

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