For as many that don't know, I've been writing on a series of Frontend Development and the guideline being used is Roadmaps For Developers - Frontend
Check out my blog here to follow up on the series.
Without further ado, I'll be moving to our topic for today,
THE BASICS OF CSS
CSS is the acronym for Cascading Style Sheets.
As a web developer, there's undoubtedly no way you haven't come across this.
It is a very wide subject on its own but I'd be trying my best in explaining it in it's simplest terms.
As we know, HTML deals with markups on a page. It also uses tags to add contents and meanings to a page. CSS, simply put, selectively adds styles to the contents on your page.
CSS is a stylesheet language used to add the presentation of a website by controlling how contents are displayed.
Implementing CSS
CSS can be used to style almost all elements on a page depending on the properties the element possesses. In CSS, we have;
Internal CSS
Here, the CSS is used in the same file as the HTML you are intending to style. They could be used in the head tag or in the body tag but advisable practices suggest the head tag.
<html>
<head>
<title>CSS Basics</title>
<style>
h1 {
color: pink;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Frontend Development Series</h1>
</body>
</html>
Most part of this program shouldn't look strange to you as you should be familiar with HTML by now.
Let's take into consideration the CSS part of the program
....
<style>
h1 {
color: pink;
font-size: 16px;
}
</style>
....
This is the major syntax of CSS. It involves the selector (in our case, it is the h1).
It selects all <h1> elements present in the current HTML file.
Next, we have the declaration. The declaration is divided into two parts namely: property and property value
The property is the color and font-size, and the value is pink and 16px respectively. The color can also be a hexadecimal representative.
What our program does above is to select all h1 elements and apply a color of pink and font-size of 16pixels to each and every one of those elements.
Different elements in HTML possess different properties. The color property does not exist in all elements. You would need the knowledge of properties present in an element so as to know how to modify it with CSS.
Inline CSS
This style of implementation is somewhat similar to the internal CSS. The difference here is that the styles are applied to the elements in-line. What do I mean?
....
<h1 style='color:pink; font-size: 16px'>Frontend Development Series</h1>
....
Our program above and this one presents the same thing. But, our styles here are applied on element in-linely (couldn't get a better word, 😜).
Another thing to note here is that the styles only apply to the
h1element on that line, not to allh1elements on the page.
External CSS
Here, the styles are applied are declared on a separate file and then referenced on the HTML file that needs it.
<!-- The html file by name, index.html -->
<html>
<head>
<title>CSS Basics</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<h1>Frontend Development Series</h1>
</body>
</html>
/* The css file by name, style.css */
h1 {
color: pink;
font-size: 16px;
}
Pay close attention to the <link> tag in our index.html. It has the rel attribute which specifies the relationship between the two linked documents and the value is given there is stylesheet. We also have the type attribute with value type/css for the file to be identified as a .css file. And lastly, the href attribute specifying the location of our style file.
Remember, this depends on the location of the file. Me using style.css directly means the index.html and style.css file are in the same directory on the same level.
This is pretty much the basic basics of CSS.
You could read more here.
The article referenced is a great documentation of basic CSS. You would also be referred to other articles from there. I would love to write more on CSS as it is a wide and still expanding topic but the articles out there have done most of the job.
I hope this summarized article of mine has given you the basic ideas as regards CSS 😃
Thanks for reading : )
I would also be sharing these series of articles on my Dev-to @ Dillion Megida Profile
You could check out my past articles on the Frontend Development Series