By Kevin Juhasz
For Hack Reactor
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.
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.
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.
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.