CSS Basics for Absolute Beginners
If you are here, I’m going to assume that you have already visited my previous article on HTML basics for absolute beginners. If not click here and have a glance at it ASAP!!!
What is CSS?
CSS stands for Cascading Style Sheets, where HTML defines the structure of the web-page and CSS helps us to change the appearance of the HTML. HTML without CSS is ugly, therefore HTML and CSS go hand in hand. The version of CSS that we are gonna use here is known as the CSS3 (like HTML5). Apart from the structure and appearance, if you want to add functionality to the webpage, then we need something known as the Javascript which will be the topic for another blog, so now without further adue, let us dive into CSS3.
Why CSS?
The best thing about CSS is that it allows you to make global changes throughout your website thereby maintaining a consistent appearance. It means that you don’t have to change each and every page individually, instead, CSS helps you to change every instance of a particular element in a single go, saving you loads of time!
Here’s an example, where H1 is the heading tag of your website, and suppose you have multiple H1 tags in your website and you want to change all of their colors at once, then all you gotta do is define how the H1 would wanna look like, in your CSS file.
How to add CSS?
There are three ways to add CSS into your HTML file:
1) Inline CSS: means adding CSS directly into the HTML tag which is not at all recommended as it goes against the whole purpose of using CSS, hence it is considered as a horrible practice unless very rare situations are involved.
2) Internal CSS: means defining the CSS style tags/attributes directly in the head section of the HTML file.
3) External CSS: means adding a link to an external CSS file in the head section of the HTML file.
Before you choose one among the above-mentioned types, always remember that our main goal is to make our HTML file as slim as possible, so choose accordingly.
Examples:
1) Inline:
<h1 style = “color : red”> Hello </h1>
2) Internal :
<head>
<title> My website </title>
<style type = “text/css”>
h1{ color : red; }
</style>
3) External :
<head>
<title> My website</title>
<link rel =”stylesheet” type=”text/css”
href = “ritchie.css”>
</head>
where ritchie.css is the css file inside the folder, same as the html file.
CSS structure
Selector: is the piece of element we want to target and add style. It could be an HTML element, a Class name, or an ID. There could be multiple elements/ classes/ ID as well.
Property: are predefined terms in CSS that the web browsers understand, like font-family, font-size and so on.
Value: defines the style or variable you assign to a property, like Arial, 16px and so on. A value should always end with a semi colon.
Declaration: Everything specified inside the curly brackets of a selector is termed as the declaration part.
CLASSES, ID, and PSEUDOCLASSES
Classes and ID’s are very similar, except the fact that unlike Classes, ID’s are unique, which means multiple ID’s with the same name cannot be used inside an HTML/CSS. Also, inside the CSS file, the classes are called or targeted using the dot operator (.) whereas ID’s using the hash operator (#). Click here, to learn more about Classes and ID’s.
Suppose you have a list of elements defined in an HTML file with the class name my-list, then all the elements inside the list can be called within the CSS file using PseudoClasses. Click here, to learn more about PseudoClasses.
Padding, Border, and Margin
The content displayed over the web browser is always surrounded by padding, border, and margin which can be tweaked easily inside our CSS file.
The values defined inside these properties follow the order [top, right, bottom, left] and if the top/bottom and right/left pixel values are the same, they could be combined, reduce the number of values to two. Similarly, if all the four-pixel values of the properties are equal then we can reduce the values to one. All these are confined into a single term known as the Box Model. Click here, to know more.
Positioning in CSS
This is the final topic I would wanna cover here, as discussing all the CSS attributes and selectors are way beyond the scope of this blog. But don’t worry, towards the end of this blog there’s gonna be a little something that I would wanna share with you all :)
Alright, so there are 5 main types of positioning in CSS:
1) Static: every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element
2) Relative: an element’s original position remains in the flow of the document, just like the value. But now left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.
3) Absolute: The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
4) Fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
5) Inherit: the position of the value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.
Finally, we are left with CSS attributes and selectors, and we are not gonna cover all of them here since there are way too much to discuss, so I thought of providing you with a complete CSS cheat sheet, click here to download!
Once you have mastered basic HTML and CSS, we can actually start building basic local websites, although it may not have any functionality (Try it out !). However, to add functionality to our website we might have to learn JavaScript, which will be the topic for another article of this series and it might take a while, cuz up next we are gonna cover the basics of an operating system. Until then take care :)
