CSS NOTES
!important css attribute helps to make an element important
Css stands for cascading style sheet. Used to give styling to the
web pages which is structured by the html language.
There are three ways in css to style the web pages.
1.Inline css
2. Internal css
3. External css
1. Inline css: inline css code is written in the operating tag of the html
element by using style attribute.
2. Internal css:internal css is written in the head section of an html
element using <style>
Syntax: <head> <style> tagname{} </style> </head>
3. External css : External css styling can be done by using a external
css file_name.css extension and providing the link between that css
file to html file by <link> tag in the head section of html element.
Syntax: <head>
<link rel=”stylesheet” href=”filename”> </head>
Note: The first priority is inline css.
If,
<style> </style>
<link rel="stylesheet" href="style.css">
Here, the first priority is for external css.
writing-mode: vertical-lr; tag helps to set items vertically
text-orientation: upright; helps to add space between elements
text-transform: uppercase; helps to change texts to uppercase letters.
Ctrl + space it helps to give you/show you options.
Underline only works after the value underline and then wavy.
text-shadow: 2px 2px 2px black; it helps to add shadow to an element and also helps
to add blurry effect to the element. // consolas is a good font family in ms word.
Outline css key helps to create border between margin and border.
outline: 30px solid green;
In child elements we should go with percentage% rather
than percentage.
In height we should mostly prefer vh(viewport height)
for making a website responsive.
border-top-left-radius: 50px; helps to add border radius in the left
Value and attribute that helps to zoom an image
img{
transform: scale(1);
transition: transform 0.3s;
}
img:hover{
transform: scale(1.3);
}
.div+p{
/* it will select the first sibling */ adjacent
}
div>p{
/* it will select all the p's inside the div or it will select the direct child/
}
Div ~ h2{
Adjacent selector
}
:hover is a pseudo class.
:active pseudo class helps to add clicked colors nwhen it gets clicked
:focus pseudo class helps to do stuffs when it get clicked
:visited pseudo class helps to let us know that this thingy is visited
:first-child helps to select the first child
:nth-child(even) will select the even numbers
span::before{
content: "Before"; //helps to add content beforewards
}
span::after{
content: "After";//helps to add content afterwards
}
p::first-line{
/* changes the first line or highlight it */
}
p::first-letter{
/* changes the first letter.. or highlight it */
}
p::selection{
/* helps to select a particular file/lines */
}
Pixabay is a free website where we could download any picture without having
copyrights.
Transition
ease - specifies a transition effect with a slow start, then fast, then end slowly
(this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier
function
transition-delay property specifies a delay (in seconds) for the transition
effect.
Display
For inline elements the height and width is not applicable but to use
we have to use display: block;.
In display:inline-block; we can give height and width externally and
it will be acceptable that way.It is the combination of block and
inline .
opacity: 0; opacity helps to stop the unwanted fluctuation in a website.
It will disappear the content as well and we don’t have to add display none and if we
does then it will be fluctuating.
position: sticky;
top: 0; it will stick the content to the top of the webpage
justify-content helps to move the content in x direction._____horizontally like this.
Align items:center helps to move the particular item in y direction vertically.
We can’t use top,buttom,left and right without using position attribute.
If you use flex direction then it converts cross
axis to main axis and main axis to cross axis.
If we wanna add direction to a liner gradient then
use (to-right, black,white)
z-index: 5; gives importance to the particular element, position property is
mandatory to use z-index.
If the z index value is in negative or lower then that element will get the less
priority than the z index having higher values.
overflow: hidden;// hides all the overflowing content
overflow: scroll;// helps to scroll all the overflowing content
overflow-y: scroll;// helps us to scroll on y axis
keyframe helps to add animation effect in css
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
@keyframes mymove {
from {left: 0px; background-color: yellow;}
to {left: 100px; background-color: blue;}
}
Div{
Animation-name: example; //this helps to add animation like class
animation-duration: 4s; // this helps to set the duration for animation
animation-delay: 2s;// helps to delay the animation effect
animation-iteration-count: 3;// helps to iterate it like a loop
animation-fill-mode: forwards;// helps to move the content to forward
direction
Responsive image
img {
max-width: 100%;
height: auto;
} (it will be helpful for responsiveness)
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
} (will be helpful to center the image)
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>Responsive Polaroid Images / Cards</h2>
<div class="polaroid">
<img src="img_5terre.jpg" alt="5 Terre" style="width:100%">
<div class="container">
<p>Cinque Terre</p>
</div>
</div>
<div class="polaroid">
<img src="lights600x400.jpg" alt="Norther Lights" style="width:100%">
<div class="container">
<p>Northern Lights</p>
</div>
/* </div> This will be helpful for creating a polaroid style image with caption
*/
We can add filter effects to our image by the help of
img {
filter: grayscale(100%);
}
img:hover {
transform: scaleX(-1);
} //helps to move the image or element to the left or kinda of give the
transformation to the element/image
It's better to use percentage in child elements for
responsiveness and there should parent relationship for that.
box-sizing: x y b s color; // where x and y stands for directions, b stands for blur
and s stands for spreading
text-shadow: x y b color;
Resposnsive Designing from w3school
Responsive image
For width, set it to max-width: 100%; it will adjust the sized based upon
it’s requirements or you can go with like this as well.
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
Responsive text
Set the text size to vw(viewport width)unit. That way the text
size will follow the size of the browser window.
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.
Media queries
