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.
