Cascading Style Sheets and HTML

What is CSS?

Cascading StyleSheets or CSS is a stylesheet language that affects how an HTML document will appear in your browser. CSS files are stored in a separate folder than the HTML, and are linked in and applied to the HTML. We can also simply write some CSS in our HTML file inside a specific page, but we’ll talk more about that next. Although CSS has hundreds if not thousands of styling possibilities, it will make it easier for us to understand how it works by focusing on just a few.

How Can I Use CSS?

CSS stylings are defined by first referencing a piece of HTML, and then add a property to them. This is all done within a <style> tag in HTML. A style tag has an opening and closing tag and will wrap all the CSS we want to use in that specific HTML view.

Styling Fonts

Styling the font of an HTML element with a class attribute of “body-paragraph”
Font Family monospace, cursive, and fantasy respectively

Animations with CSS

Not impressed yet? Another great function of CSS is to add animation to our HTML! Using the @keyframes rule specifies the animation code. The animation happens by changing frames at a specific time, either with the keywords ‘from’ and ‘to, or with percentages between 0 and 100. The animation begins at 0% or from and goes until ‘to’ or 100%. We can see this in action styling the background of a div tag:

Why Use CSS?

Besides adding fun animations and font styles, why would we use CSS? CSS provides a huge library of styling options that can be applied for each individual page of your website or application. This means that not every page has to look alike. CSS allows for making webpages look more professional and less like a bad dream from your mom’s old computer. Styling webpages can help with advertising, enticing consumers, making your website easier to navigate, and just be generally pleasing to look at. Since websites exist to be viewed and used, we may as well make that experience as pleasurable as possible.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aidan McBride

Aidan McBride

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer