What is CSS used for?

By Matt Lipman     October 20, 2017

CSS stands for Cascading Style Sheets. It is code that controls the visual styling of HTML elements from the colors of text, to the sizes or positioning of images. In its latest version, CSS3, animation can be accomplished.

CSS is often used as a stand-alone file using a ‘.css’ file extension, but it can be included with HTML code for smaller projects. Designers and developers typically keep the styling rules separate using a stand-alone CSS files because doing so keeps everything organized and makes it easier to build upon.

CSS is text based, so one rule designers follow is not to use images, if the same can be done using CSS. This is simply because images are large in file size and will make a website take longer to load, which is especially bad for mobile visitors who may be on slow connections.

The greatest feature of CSS is that its code is reusable. In other words, you can style a box to be yellow with large black text and rounded corners, then apply that styling to as many HTML elements as you want. All you would need to do is reference the styling in the HTML element to inherit given styles.


What can you do with CSS?

CSS is powerful. You can specify how HTML elements look and behave in various situations. With text, you can select its color, size, font, alignment, and more. With CCS3, you can now even give text shadows, or slowly change colors with cursor interaction. You can now specify different styles based on screen width, which is the foundation of responsive design.

@media (min-width: 500px) {
   .logo {
      width: 300px;
   }
}

The above CSS code tells the browser “If the screen width is at least 500 pixels big, apply these styles.”

Here are common uses of CSS:

  • Displaying background visuals, from solid colors or gradients to full-screen or tiled images
  • Positioning content into columns of various fixed or fluid sizes
  • Hiding elements is also a way to style HTML
  • Aligning navigation to the top, sides, or even hidden until a button press reveals a drop down menu
  • Animating elements from a simple button hover state to a repeating sequence of 3D transformations

How does CSS work?

Browsers render HTML, which means that the HTML code is realized visually. CSS gives instruction on how HTML elements should look. Without CSS, the browser would still render the HTML code with default stylings, which differs from browser to browser.

CSS works by connecting HTML elements, such as text or images, with CSS refernces. The references are id‘s, classes, and HTML element names.

<img id="logo" class="graphic" src="/logo.jpg">

In the example above, you have an image HTML element (<img>) that has ‘logo’ as the id and ‘graphic’ as the class. There are four ways to change the visual styling of this element with CSS. The following examples are different ways in which you could set the width of the image to be 200px.

img {
   width: 200px;
}

The first ways references the HTML element name: “img”, which represents images. This will instruct not only this image, but all images that appear in the HTML code. In this case you would be telling the browser to set all images to have a width of 200px.

#logo {
   width :200px;
}

The above example showcases an id, which should be only given to unique HTML elements. The pound sign ‘#’ (aka the number symbol or hashtag if social media is your thing) tells us that we are working with an id. If you need to have multiple instance of this element, you should use a class instead, which brings us to our next example.

.graphic {
   width: 200px;
}

In the example above, “.graphic” is a reference to a class, as a period precedes the name of the class. Classes are reusable styles that can be applied to different HTML elements. In this case, the image will have a width of 200px. You could give other HTML elements, like an input box, the same class to set the same dimensions. The first three methods, demonstrated so far, allow coders to style HTML elements from a stand-alone ‘.css’ file. The last method is different.

<img style="width:200px;" src="/logo.jpg">

Inline CSS, used above, is a way to style an element from the HTML element directly. Inline CSS is hard to manage and should be avoided in many cases, but can come in handy for a few situations.


CSS is the visual heart of web design

We’ve touched upon the basics of Cascading Style Sheets (CSS), but we are far from covering the limits of CSS. We have not even mentioned how the functionality of CSS can be extended through preprocessors like SASS or LESS, or how you can interact with CSS in real-time with JavaScript. One thing is for sure, CSS is a critical component of web design.


What is website hosting?

By Matt Lipman     October 12, 2017

Hosting is a service that uses servers to store website files and contents, allowing visitors to download that material and view the website in a browser.

In order for this all to work, a domain name must be connected to the host’s servers. Your host should tell you the information you need in order to point Nameservers to the hosting company. After this step is completed,  when you type the domain address into a browser, the host can serve up the website files over the internet.


Do I need to pay for hosting for my website?

The simple answer is yes.

You could technically host your website from your very own computer, people would download files from your hard drive instead of servers. But there are many issues with this setup. When you turn off your computer or lose internet service, no one could access your website. Your computer might also struggle with handling 5-10 users at the same time, never mind 100. Most importantly, would you want to give access to your computer to everyone on the entire internet?


How much does hosting typically cost?

$5, $10, or $15 per month should suffice for most small business websites. Hosting costs are affordable because hosting companies will put multiple websites on the same server. The cheapest hosting option, known as shared hosting, might come with a few speed hiccups at times because other websites might hog the server resources. This might be caused by content hosted on the server going viral, too may websites hosted on the same server, or a ‘host’ of other reasons. If your host doesn’t address a server that is constantly sluggish, you should look for a new hosting company.

The other types of hosting can get a little more pricey. VPS hosting, while still shared with other websites, reserves a specific amount of processing resources for your website.  In costs, you are looking about double the price of what shared hosting costs. There is also dedicated server hosting which essentially gets you your own server. Dedicated servers are expensive and typically costs a three-figure monthly number.


Should I buy my domain name from my hosting company?

No. The only substantial reason to buy a domain name from a hosting company is to save money. The hosting company might offer a package deal on buying hosting and your domain name for a full year. That savings is perhaps equivalent to about $10 or $15.

I’ve heard horror stories where hosting companies would hold a website hostage or shut it down, leveraging the domain and hosting in order to address an outstanding issue. In this case, if the owner purchased the domain from a different service, the owner could simply point the domain to a new host to avoid getting their website shutdown.