css tutorial

[ WORK IN PROGRESS ]

welcome to my first tutorial! in this i will show you how HTML CSS (cascading style sheets) coding works! i hope my explanations will make sense :')

DISCLAIMER AND NOTE: please do keep in mind that at least basic html coding knowledge is required to understand this tutorial! given this, i am not a professional coder nor am i proficient in html, i am just making this as a reference for myself & other people who might be looking to use these for carrd and website making services akin to it, or who just want to learn something about css! in case you're more of a visual learner, i have created a folder with all html files containing demonstrations and examples: https://mega.nz/folder/DxwRkIIB#tszEEpCNwJzspfMpcZV4XA (written in visual studio code 1.62.3)

with all that said, let's begin!

HOW TO START A CSS CODE?

a css code has two basic components:
	- the <style></style> section
	- the label of the class where the code will be, separated by {}

which means that a css code would look like this at the baseline:
<style>
.your-class-name {
	your properties go here!
}
</style>

usually in the case of a website built from scratch, the css code will be in a .css file separate from the .html file, but you can just put the <style> section in the .html file if you don't mind long codes!

to refer back to these classes in text, you would use <p></p> or your relevant text style and insert the class:
<p class='your-class-name'>text here</p>

of course, css codes don't only pertain to text! you can use them on images too with the right properties! there are also codes that only come into the conversation once you hover over or click on an object, i will mention these later on! given that <style> is a section, you can put differently labelled css properties pertaining to different objects too!

TEXT CSS PROPERTIES

the most basic text properties include:
font-size (works with specified px, percentage, em with 1em being 2in or keywords like 'large' and 'small')
font-family (built in or custom - tutorial for custom fonts in carrd: https://www.youtube.com/watch?v=sctl4iZEIqo&t=9s)
text-align
text-decoration (i usually use this to remove any underlines)
text-color (hex code, keywords like 'red' and 'blue' or rgb code)

the text classes can still be transformed outside of the style, i.e if you only want certain parts italicized for emphasis!
in the code below, only the word 'emphasis' would be italicized
<style>
    .red-text {
        color: red;
    }
    </style>
<p class='red-text'>the <em>emphasis</em> is here</p>

MISC (IMAGE, GENERAL, BACKGROUND/CONTAINER) PROPERTIES

there are a myriad of other properties that can apply to either all objects, images or containers (boxes). such include:
transform
position
z-index (specifies stack order)
border
padding (top/left/bottom/right)
height & width
color
background properties, such as color, position, size etc.

i will explain each of these and how to use them (to an extent)!

1. TRANSFORM

there are many transform functions, i will only list some - website containing all transform functions: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

rotate (3d, X, Y, Z), scale (X, Y, Z), skew (X, Y), translate (3d, X, Y, Z)
these are pretty self explanatory, however there are some where you need to specify multiple numbers or a specific type of value - ex. rotate and skew would need a degree: rotateX(10deg), skewY(50deg); 3d functions need multiple values, ex. rotate3d(1, 2, 3, 10deg)

translate works in a similar way to the position property, however it can also provide placement in a 3d perspective, i.e translate3d(10px, 10px, 50px) would bring an object seemingly closer and above other objects without this property

you can also put multiple function values into one transform function:
transform: rotateX(5deg) translate(50px, 50px, 0) scale(1.7);

2. POSITION

position is exactly what it says - it can change the position of objects. there are three important types of position properties:

position: static; positions the element according to the document flow with top, right, left, bottom and z-index having *no effect* on it. this is the default value

position: relative; positions the element according to the document flow and relative to itself taking into account the top, right, left, bottom and z-index values. this will not affect other objects without the property

position: absolute; removes the element from the document flow and does not create space for the object. it positions the element relative to its closest positioned ancestor, meaning if there are three images next to eachother and the one with this property is in the middle, it will be placed relative to the first image. the final position is determined by the top, bottom, right and left values and a new stacking context will be created if the value of z-index is not auto - if your middle image overlaps with its ancestor, it will be on top unless you specify the z-index value

the usage of the position value:
<style>
    .pos {
        position: relative | absolute;
        left: 50px;
        top: 50px;
    }
</style>

!!! it is important to note that the direction values do not equal the direction the object will be moved in; if increased, 'left' will move objects to the right, 'right' to the left, 'top' to the bottom and 'bottom' to the top and vice versa when decreased !!!

!!! OTHER IMPORTANT NOTE !!! that one object's position value WILL NOT affect other objects', i.e if you move something downward and want to put other objects right below it, you would also need to adjust the position value of the other objects

3. Z-INDEX

z-index defines stack order - the higher the value of the z-index property, the higher it will be if it overlaps with other items. the default value for this is 'auto'. if you have 7 items you want to stack on top of eachother, the object you want to be on top would have the z-index value of 7, and the one on the very bottom would have the value of -7.

usage of the z-index value:
<style>
	.ind {
    	z-index: [value]
    }
</style>

although this property is mostly used when elements are moved around with the position value, it may be useful in itself aswell!