Written By Kevin Juhasz
When you click on an article like this one, things appear that you might not consciously think about. For example, there’s a headline with a larger font than the rest of the text on the page, lines separate different sections of the page, and in the upper right corner, a blue button reads “Apply Now” for when you’re ready to enroll in a coding bootcamp.
Much of this is made possible with CSS, which is short for cascading style sheets.
CSS and how it works
CSS takes the functionality and words on a web page and tells your browser how to present them to visitors.
“HTML is a set of Lego pieces,” explains Stefan Ristic, a freelance WordPress developer. “CSS is the color and the shape of those Lego pieces.”
An important aspect of CSS is the “cascading” part. Depending on the business or topic, websites can have dozens to hundreds of pages. If you had to create the style for each element on every page, building a site would be a long and tedious process. CSS allows a designer to create the same look across many pages, saving valuable time.
HTML and CSS
When designing web pages, the HTML tells a browser what something is. If you’re placing paragraphs on the pages of a site, HTML is needed to tell your browser that this element is a paragraph. CSS is then used to guide how that element should appear on the pages, including factors such as font, size, and color of the words. This process is the same for all of the other elements – the color of the background, shape and color of a button, and other graphic elements – all of it requires CSS to get the desired look.
HTML and CSS need each other to work on multiple pages and neither can achieve its goal without the other.
Three types of CSS
There are three different types of CSS used when creating a website. Each one works differently, depending on what is needed for a page or an element on that page.
External – when you’re building a website, the external type of CSS is most important when it comes to saving time. External CSS is saved as a “.css” file and can be used to create a style sheet for every element across an entire website. When building a site, you can direct a page to use that sheet to determine how that element will look.
“This CSS technique is more efficient, particularly when styling a huge website,” said Amber Morland, CEO and Founder of WinCope. “You may alter your entire site by editing a single.css file.”
Internal – internal CSS is written in the header of a specific page. Why have internal CSS if you can just use an external file to create a look? Well, you may be designing a page that will be unique and you want to make sure a certain type of CSS is applied to only that element and only on that page. Internal CSS gives the ability to better control that.
Inline – this type of CSS goes a little narrower than internal CSS and is used in the HTML code. It will only apply to a single instance on the page it’s being used.
“If you simply utilize inline CSS, managing your website may become too difficult,” Morland explained. “Inline CSS in HTML, on the other hand, can be advantageous in some instances. For instance, in situations where you don’t have access to CSS files or only need to style a single element.”
It’s important to know each type and how they work within a page, but you’re more likely to use external CSS when building pages. Most companies or people for whom you create pages will desire a consistent look that falls in line with their brand. External CSS will make sure that happens. Still, there might be times when internal and inline CSS are needed to create unique elements on a single page.
CSS and JavaScript
There’s one language that’s often needed to help make sure visitors can use a website – and that’s JavaScript, which handles all the functionality of the site.
HTML makes sure a spot on the page is known to be a button and what it says. CSS comes in to give that button its shape, font, and color. And JavaScript is used to make sure that the button does what it’s supposed to do when it gets clicked.
As far as how CSS functions with JavaScript, CSS can be used to perform functions on a page that will reduce the stress on resources for that page that might occur from just using JavaScript.
“If we look at an example of a page element fading in once the user scrolls down to a particular location. JavaScript would be responsible for tracking the page scroll and once it reaches the trigger value, it would then simply add a class to the relevant HTML element,” explains Daniel Wright, director of training at Jellyfish Training. “CSS would take over at this point and apply a prewritten transition to fade the element in. Although JavaScript could handle the whole of this operation, CSS can perform the fade-in with significantly less strain on the page resources.
CSS Grid
One of the important aspects of web design is to make sure your pages are getting a similar look and feel across multiple devices. Smartphones are increasingly becoming the method by which people visit sites, but that doesn’t mean that other devices should be dismissed. CSS Grid is a helpful way to make sure you can achieve the desired consistency.
“CSS Grid plays an important role in implementing responsive design for the site,” said Andrew Zanouski, a JavaScript Developer at OrangeSoft. “It looks like a two-dimensional grid system used to work on the layout of UI elements and segments of a webpage. CSS Grid helps the same webpage adjust its design according to the screen size of various devices like phones, tablets, and desktops.”
The 4 CSS selectors
To make it easier to locate and handle items that require CSS, you can use CSS selectors. One thing that hasn’t been agreed upon for selectors is the selection of names. The terms you see below may differ from terms you’ve heard in the past or might hear in the future.
Basic – used to select a single HTML element, such as a tag, class, id, or attribute.
Grouping – used to join multiple selectors together, allowing for the same rule to be applied to multiple elements. This allows you to minimize code for the elements in the group.
Combinator – used to select elements that are related to other elements within the site. For instance, you might want different elements in a page to all use the same style when it comes to the font.
Pseudo – used to change the state of a particular element. For example, an item might change words or shape when a visitor hovers over the object.
In our coding bootcamps, we spend a lot of time covering JavaScript, specifically. Learn more about our full-time and part-time programs.
Want to learn more? Create an account, check out our syllabus and take a quick assessment to see if you have what it takes to be a software engineer.