Blog
CSS Blog Post Image

What the Hell is CSS?

By Cole Warren
If you haven’t read our What The Hell Is HTML blog post, I’d suggest giving it a look before reading further. With a quick read, you’ll be be able to understand the full breadth of what is going on here, and learn about how Lunar Logic is making angsty teens into programming maestros with our Explorers Program. This week we’re continuing our look at web development with an exploration of CSS.

What is CSS?


CSS (Cascading Style Sheet) is the code that goes into designing your website. CSS creates every border, background and font size, and allows you to precisely place your elements on a web page. Borders go around your HTML elements, and come in a variety of styles, being used for decoration, separation and segmentation. Backgrounds can be used to give your HTML elements color, transparency, or even a background image. While CSS is easy enough to pick up in a matter of minutes, it will (literally) make or break your website.

Using CSS with HTML:


If you’re familiar with HTML, you may have already seen CSS implemented in the style attribute. This attribute works the same way as any other attribute (ie: href), except you insert CSS code as your value. For example:
<h1 style="color:blue">This is a blue header</h1>

While CSS is usually placed in its own file, an easy way to quickly test your CSS is by using the style tag. This works just like a normal HTML tag, but it allows you to inject CSS code right into html files. Here is an example of setting the same header blue, but with a style tag:
<style>
h1 {
 color:blue;
 }
</style>

This looks quite different from anything else you may have worked with so far, but let’s break it down. The style tag works just like any other HTML tag you’ve worked with. The h1 is called a selector. This will grab all of the h1 tags on your web page, and then apply the rules within the curly brackets to them. The rules placed within the curly brackets can simply be broken down to a CSS attribute, followed by a colon, value, then semicolon. You can apply the aforementioned logic to size an image, give it a thick orange background, and line it up with your other elements on a margin.

<style>
.FrontPageImage{
 width: 50%;
 margin-top: 10px;
 border-width: 10px;
 border-style: solid;
 border-color: orange;
}
</style>

You may have noticed we have a period in our selector. This denotes that we are selecting our HTML element by it’s class. For now, you may think of a class as an attribute that labels or classifies an element.

CSS attributes may often have shorthand for your specific needs. For example: the margin-top, margin-bottom, margin-right, and margin-left attributes can be used within the margin attribute’s shortand. Want to have a 10px margin on top, and 5px margin on bottom? Applying said margins with shorthand would look like so:

<style>
.myHTMLClass{
 margin: 10px 0px 5px;
 }

</style>

This kind of shorthand can be applied to many other CSS attributes, so keep an eye out!

The Box Model:



When tricking out your website with CSS, it’s important to keep in mind the box model. The box model, as shown above, is the way that your web page will apply CSS rules to your target elements. Your CSS will be applied in descending order:

  • Content - The center of the box model. This is your target HTML element that you will be applying rules to.
  • Padding - Creates a transparent area around the content within the border.
  • Border - A border that goes around the padding and content.
  • Margin - Creates an area outside the border. The margin is transparent, and may be applied to a single side, or all sides of your element.

Block vs. Inline elements:


Keep in mind that HTML elements usually display in a block or inline format. Block elements will take up the full width available, and start on a new line. Inline elements will not create a new line, and only use up necessary width. The <div> tag is an element that is block by default, and considering it’s a larger, more standalone HTML element, this make sense. The <span> tag, often used for things such as highlighting text, is inline by default, as it would break the flow of your webpage when trying to highlight text if given a new line by default.

You did it!



Congratulations! You’ve made it through our two-part introduction to web development. CSS will really make or break your website. There are many design philosophies in the world of web development, and none of are held as gospel. As websites evolve and trends come into fashion, it will be important to have a design that suits your business. All websites need to find a balance of beauty, navigation and usability to survive in the modern age.

Check out our 5 Principles of Good Web Design to apply your newfound skills to your site.
Photo by: [1]
Are You Ready to Start Your Project?