You might be familiar with HTML and have even written basic CSS in your web development experience, but have you ever wondered what is CSS really? This article will help you better understand what the CSS language is and how it applies to a style sheet, web browsers, and html pages.
To best understand exactly what CSS is, we must first understand how web developers build a basic website using markup languages. Web developers start with a simple HTML ( Hypertext Markup Language ) page also known as an “HTML document”. HTML can understood as the structure and scaffolding of a webpage. Inside this HTML document are a series of HTML elements that will contain the content of a website such as a header, article, side bar, footer, etc. and determine the overall layout from top to bottom.
If you had a website with only HTML though, it would look very plain and have no personality, look or feel. With CSS that changes the game and we are able to style our entire website and elements that would otherwise be quite boring.
CSS stands for Cascading Style Sheets (CSS) and it describe how HTML elements are to be displayed on screen, paper or in other media. They save a lot of work and can control the layout for multiple web pages all at once; external stylesheet files store within these CSS documents which makes it easy for website designers who want complete flexibility when designing their sites without having too many limitations based upon what kinds designer features they may need access to such as fonts etc..
The language of CSS is used to describe the presentation on Web pages, including colors and fonts. It allows one to adapt their site’s appearance for different types of screens like large monitors or small phone displays; this includes printers too! The separation between HTML code and the content versus style sheets makes it easier when maintaining sites by keeping everything organized while also allowing you separate styles among various environments without worrying about consistency across all webpages.
Cascading Style Sheets were created in order to have a more consistent style across websites. CSS was first proposed by Hakon Wium Lie on October 10th in 1994. He published his idea in 1996 with influencer Bert Bos as coauthor and afterwards who became known for creating this standardization system we know today. In 1997 he created Level 2 which went into effect November 4th 1998 when it came out at last .
Okay so enough of the high level explanation, lets get into what are CSS features and write CSS. The syntax for CSS is actually quite simple and can be applied in a document, an external style sheet ( recommended for performance and maintainability ) or use what is called “inline CSS” to apply styles directly on elements.
Let’s first create a basic HTML page and use a style sheet to add a CSS rule that will give adjust the background color as well as some font weight.
To start we will create a simple paragraph element using HTML `<p></p>` tags with some text inside for this example. You can use whatever text editor you want to work with. I personally love JetBrains products and use their entire suite for writing my code.
<p>Pro Tip: CSS is great for adding different styles to HTML elements.</p>
So you can see in the rendered example below that we have a simple paragraph that now has a light grey background color and the text is bolded. This is pretty simple right! You might be saying well, it still looks a little ugly. All we need to do to make this look a little better is write some other different styles and you can pretty much make whatever your heart desires!
Let’s add some spacing around the text so it looks a little better and center our text. For this we would just need to add the `padding` CSS property as well as the `text-align` property.
Easy peasy! CSS is such an incredible tool for web designers and web developers to make their HTML web page look so much better.
I mentioned inline CSS earlier so how we would accomplish this if we added the styles directly onto the html element itself. It’s fairly simple and you would just add your CSS rule onto the HTML element using a `style` attribute. What does this look like? Check the example below.
<p style=”background-color: #efefef; font-weight: bold; padding: 15px; text-align: center;”>Pro Tip: CSS is great for adding different styles to HTML elements.</p>
You might guess that this could be hard to maintain over time and is fairly hard to read. One of the best things about CSS is the reusability of CSS classes. To reuse styles without repeating yourself writing the same thing over and over, we use the `class` attribute on our HTML element. Let’s say we want to reuse the styles we created above but only in specific instances instead of on every paragraph.
<p class=”protip”>Pro Tip: CSS is great for adding different styles to HTML elements.</p>
Then in our CSS we would change the CSS rule for our `p` tag to `.protip`. The period prepended to the class name allows to reference HTML elements that have a class attribute of `protip`.
Simple right? CSS will take your HTML code to the next level and have you creating pages on the web that look great with very little extra effort. I highly recommend starting out with CSS frameworks that can help you learn and also reduce the amount of code you need to write.