CSS- Course for Beginners
Hello there!
Lets move forward from html basics to CSS..
Abbreviation: Cascading style sheets
CSS is a scripting language which is somewhat like extension to html, used to design our web pages!
->Extension-filename.css
Linking .html file to .css file
.png)
We use 'link' -->tag to link html to other files
rel->linking to stylesheet like relation
href->as we know its for urls, here we should mention its location
type->type of doucment linking to it, here text/css
Selectors
They are ways of grabbing and manipulating HTML
- Element Selector
- Class Selector-> We can style classes by selecting them as shown:
- Id selector->Styling ids
'.' is a prefix for classes!
'#' is a prefix for ids!
classes and ids are to style a specified selected object, if we use element selector consider for example of h1 all the h1 tags become modified into same style as you mentioned, but using classes and ids for it makes them specified to select.
Specificity
It tells us about when to use which type of selector, all selectors differ in thier superiority complex! ->Id over writes the class, class over writes element; ->But above all this inline selection style over writes all, as we don't use it much we can ignore;
Pseudo Selectors
We can use hover in tags like header to make it colored when we mark our cursor on it. We use colon after tags to mention it as a pseudo selectors. (h1:hover{ }) ->also there are concepts like only child, nth-child(n), 3rd child concepts in lists and tables. ->We can also select links to make them pseudo link and visited:-if visited its different else different.
Advanced Selectors
Some basic advanced selectors are:
->Following selector-selects the every following tag which follows the mentioned tag//Format: tag + tag'{}
->Sibling selector-selects the following sibling of mentioned *only sibling if not even if its following it don't selects it*//Format: tag ~ tag'{}
->child selector-for example in lists it selects all the children of main tag//Format for e.g: ul > li{}
->descendent selector-for example in lists it selects all the children even its grand//Format: ul li{}
Attribute Selectors
We can select attributes and design them. Let's see some cases:
h1[attribute=value]{}->it is same as .class for class and #id for ids etc
img[src="location or link"]:through img[src^="if they are in same folder"]=>they makes every image in that folder as mentioned style
through img[src*="if they are in same folder or even in different location which starts with that location"]=>same style as mentioned
h1[class~=sub-link]: This is for attribute values containing white spaces(it implies a class either named sub-link or which includes sub-link)
Here is some example
Html file:
.png)
Css file:
.png)
Designed Page
.png)
Colors
Basic structre:
selector{
property: value; ->This part in braces is called as css block.
}
Use this color picker provided by google, a knowledge learnt above about selectors to build a simple web page of your own:
Color Picker
Background Image Setups
background: url("");
Go through the code and made observations, how div makes a container and images are contained(without changning proportions), covered(only a single image), or some random size. Its default is repeat, you need to set it to no-repeat if needed in div.
Html:
.png)
Css:
.png)
Designed Page:
.png)
Opacity and Transparency
In color selection while using rgb( , , ), you can add another component to it called alpha, formatted as rgba( , , , ). Here unlike others a is not from 0 upto 255, it's starts from 0 and ends at 1(even decimals are used) which implies 0->fully transaparent, 1->fully opaque.
Gradient
You can make divisons and backgrounds as gradient.There are two types, linear and radial.
Linear->
background:linear-gradient(to right, color1, color2, ...); ---top, right, bottom and left are directions.
background:linear-gradient(to top right, color1, color2, ...); ---also known as diagonal gradient.
background:linear-gradient(someangledeg, color1, color2, ...); ---to make it to a specific angle.
Radial->
background:radial-gradient(20%red, 30%orange, 40%yellow); ---But percentages must be in increasing order.
background:radial-gradient(circle, 20%red, 30%orange, 40%yellow); ---controls shape.
E.g., for linear: background: linear-gradient(to right, black, white);
.png)
E.g., for radial: background: radial-gradient( black, white);
.png)
Text manipulation
.class{
text-decoration: underline/overline/line-through;
text-transform: capitalise/uppercase/lowercase;
text-align: center/justify/left/right;
}
#note:
size: num%em -> make specified amount of changes on default size. numvw -> num times the view width. numvh -> num times the view height.
Font manipulation
.class{
font-size: size;
font-weight: 0 to based on font limit;
font-style: normal/italic/oblique;
}
Font families
font-family: type;
like->san-serif, monospace, etc...
If given font is not able to display the gievn we can specify more than one.
font-family: "main" , temp1, temp2;
Using external fonts
Find google fonts: GOOGLE FONTS
Follow comments mentioned in image after selecting which kinda family you needed in above link:
.png)
Take this example:
Html:
.png)
Css:
.png)
Designed page:
.png)
Layouts
Box model
In css everything can be divided into a box and asumed as below:
.png)
Css Borders
Use same format as background:
border: size style color;
commonly used styles- solid, dotted, dashed, double;
Margin and Padding
Padding=>the space between inner content and its border. Margin=>the space between outer content and border of inner.
Format: padding: size;-> applies for all
padding: top right bottom left;->to specify differently
margin: size;-> applies for all
margin: top & bottom right & left;->sepcifies differently with two components as same.
Float and display
float: right/left/center;->makes the selected to float at the mentioned and push the compliments to top.
float: inherit; -> inherits the same float property as of its parent;
float: initial; -> intialises as it was initially.
E.g.,
#me{
float: right;
width: 500px;
height: 500px;
border: 10px solid steelblue;
padding: 20px;
margin: 20px;
}
.png)
Display
display: none; -> To make it invisible
display: inline-block; -> inline-block implies creating a seperate block in the same line
display: inline; -> as we know inline implies next element starts next to the ended
diplay: block; -> It doesn't tolerates any elements beside it and
Flex
Flex is somewhat like aligning elements in container. display: flex; -> makes specified container to display as flex which is row as default & we can change it using flex-alignment: column; justify-content: space-between/space-around/space-evenly/center; -> It justifies the content in the container as speicified.
Look at this:
Html:
.png)
Css:
.png)
Designed Page:
.png)
Alignment
align-items: center/flex-start/flex-end; -> aligns elements with respect to flex;
align-items: base-line/stretch; -> stretches the selected or make all the selected with same base-line as mentioned;
You can also use order for flex: order: num between min to max; -> to align objects in random manner as you needed.
Shrink, Grow and Basis
flex-basis: size; -> minimum width of the selected in flex box
flex-shrink: 1; -> 1 is default value which makes all elements to shrink in same size.
flex-grow: 0; -> 0 is default value, for others it will be mentioned times grown.
Flex Property
We can make use of above three in one as in background.
flex: grow shrink basis; -> three in one statement!
Align-self
We can make use of above three in one as in background.
flex: grow shrink basis; -> three in one statement!
Grid
Difference between flex and grid
->Displays differently
->Grid provides more tools to design as our wish
->Grid concentrantes both on width and height whereas flex more on width.
Display:
-> just replace display: flex; with display: grid; which makes container to display as grid, here column is default.
-> jusitfy-content: space-around/space-between/center;
-> align-content: start/end/space-between; -> Here it spaces considering heights where as it is not available in flex since it only concentrates weight.
-> grid-row-gap: size;/grid-column-gap: size;
-> You can also specify them both in one as -> grid-gap: size size; here First size is row where as other is column;
Columns and Rows
-> You can specify number of rows and columns in the using:
grid-template-column: 1px 2px 3px 4px;
grid-template-row: 1px 2px 3px 4px;
You can also keep auto at the place of size in px to specify it itself accordningly.
-> Row & column line concept
-This is main and al others we studied above are some extensions of this concept
-using grid-row: from_row / to_row; and grid-column: from_column / to_column; provides space to the specified as mentioned.
Take a look:
Html:
.png)
Css:
.png)
Designed page:
.png)
=>We can also specify them both in one if we are getting confused using grid-area: from_row/to_row/from_column/to_column;
Transition
-> trasintion is nothing but the usual meaning changing from one state to other, we commonly use pseudoselectors and add transition.
transition: property duration style delay;
Commonly used styles are ease, ease-in-out, linear.
Some old browsers don't support transitions, so we need to specify prefixes of certain browsers to not to face any kinda errors.
-webkit-transition: ->for chromium/android/iOS/safari
-webkit-transition: ->for chromium/android/iOS/safari
-moz-transition: -> for mozilo firefox
-o-transition: -> for opera
-ms-transition: -> for internet explorer
Transformation
Just keep in mind that using a statement in pseudoselector is different from using it in common selectors
->transform: translate(px, px) -> it is somewhat like shifting its axis, to left is negetive to right is positive. Its just 2d translation.
->transform: scale(size) -> it scales i.e., sizes the selected.
->transform: rotate(deg) -> it rotates the selected.
->transform: skewX(deg)/skewY(deg)/skew() -> skew is somewhat like rotating only keeping a rod at the mentioned. skew is same as skewX which is default
->transform: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) -> Use decimals at skew like 0.45
for 45deg and no need to specify units for others It is better to use others since matrix() funciton is slight messed up and confusing!
Animations
Creation
@keyframes custom-name{
from{
}
to{
}
}
You can also use percentages like at 0% at 30% at 100% randomly any number of times. @keyframes is common for all custom-name is you choice. You can add any proporties you wanna animate in that specified place between braces of from and to or even percentages if you used: