CSS is an acronym for Cascading Style Sheets. In a nutshell, CSS is a language that enhances the appearance of a website by allowing a developer to manipulate the appearance of elements on a page or the entire website. CSS defines the visual structure and aesthetic of HTML elements within a website and allows developers to give character and visual appeal to otherwise dull looking HTML. Using CSS, we can alter an almost infinite amount of properties of an element, ranging from size, to colour and even incorporate some animations. When you think of CSS, think of “look and feel.”
HTML provides the bones of the website, Javascript acts as the muscles – giving the website more functionality, and CSS is the skin that we put over it to make it look good and not terrifying.
How does CSS work?
CSS interacts with and manipulates HTML elements on a web page through linked CSS which we can be written in three different methods: External, Internal and Inline. The difference between these methods is only where the CSS is stored, and the CSS written does not differ. External involves an external style sheet linked to the HTML file, Internal involves CSS being stored within the Head of an HTML file while Inline involves CSS being written directly into the HTML element. It is best practice to use external stylesheets where possible.
We can target these specific elements through what are known as Selectors. Selectors allow us to specifically target a single element, or even various elements simultaneously through a series of identifiers known as ID’s, Classes and HTML tags. The difference between ID’s and Classes is that ID’s are unique identifiers that cannot be used on more than a single element, whereas Classes can be applied to multiple elements simultaneously which allow us to simplify our CSS and not have repetitions within the stylesheet – staying true to the DRY (Don’t Repeat Yourself) principle within development. The more work we can make fewer lines of code do for us as developers, the cleaner our code will be and the faster our website can load.
When your browser sends a request and fetches the resources for the page you are viewing, it collects most of the files and assets that the HTML file calls. One of these resources is the CSS file. The browser will then evaluate the stylesheet and sort the various rules implemented by their selectors and therefore to which elements within the web page. Finally showing you a great looking website that is styled, instead of just text and blue hyperlinks.
