Scribd
Upload
1 views7 pages

CSS NOTES Lawan Sir

The document provides comprehensive notes on CSS, covering key concepts such as the importance of the !important attribute, different methods of applying CSS (inline, internal, and external), and various properties for styling elements. It also discusses responsive design techniques, transitions, animations, and the use of pseudo-classes and selectors. Additionally, it includes practical examples for implementing styles and achieving responsive layouts with images and text.

Uploaded by

kumarnitish43686
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views7 pages

CSS NOTES Lawan Sir

The document provides comprehensive notes on CSS, covering key concepts such as the importance of the !important attribute, different methods of applying CSS (inline, internal, and external), and various properties for styling elements. It also discusses responsive design techniques, transitions, animations, and the use of pseudo-classes and selectors. Additionally, it includes practical examples for implementing styles and achieving responsive layouts with images and text.

Uploaded by

kumarnitish43686
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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

You might also like