/*
h1{
color: green;
font-family: monospace;
}
p{
font-size: 50px;
color: purple;
}
body{
background-color: grey;
font-size: 40px;
color: yellow;
}
CSS colors:
pixel - combination RGB values
images - combination of pixels
videos - combination of images
color name
hexadecimal values
rgb values
#000000
1) 00 => red
2) 00 => green
3) 00 => blue
0 1 2 3 4 5 6 7 8 9
A - 11
B - 12
C - 13
D - 14
E - 15
F - 16
0 to 255
rgb(100,75,210)
rgba(50,85,220,0.2)
a(opacity of color)
hsl
h => hue
s => saturation
l => lightness
w => whiteness
b => blackness
hsl(50,20%,10%)
hsla(100,30%,5%,0.2)
hwb()
1) RGB color
RGB(red, green, blue) color values can be used to
define colors in CSS Each color channel is
represented by an integer value between 0 and
255.
p{
color: rgb(255,0,0);
}
2) RGBA color
but with an additional alpha channel that represents
the opacity. The alpha channel ranges from 0
(fully transparent) to 1 (fully opaque).
p{
color: rgba(0,255,0,1);
}
3) color codes
p{
color: #69efa6;
}
4) HSL colors
HSL(hue, saturation, lightness) color values provide
an alternative way to define colors.
hue represents the color itself, saturation control
the intensity and lightness control the brightness.
p{
color: hsl(240,10%,50%);
}
5) HSLA colors
p{
color: hsla(120,100%,40%,0.5);
}
Text in CSS
1) text color:
p{
color: blueviolet;
}
2) align text
h5{
text-align:center;
}
p{
text-align: justify;
}
3) decoration:
p{
text-decoration:overline;
}
4) Text transformation
p{
text-transform: none;
}
5) indendation
p{
text-indent: 100px;
}
6) letter spacing
p{
letter-spacing: 5px;
}
7) word spacing:
p{
word-spacing: 50px;
}
8) shadow
p{
text-shadow: 0px 3px grey;
}
9) height of line
p{
line-height: 0.9;
}
10) white space
p{
white-space:nowrap;
}
Font in CSS:
1) font family
p{
font-family: Georgia;
}
2) font style
p{
font-style:italic;
}
3) font variants
p{
font-variant: small-caps;
}
4) font weight
p{
font-weight:bold;
}
5) font stretch
p{
font-stretch: condensed;
}
6) font size
p{
font-size: 25px;
}
CSS Background:
css background property is used to define the
background effects on element. There are 5 css
background properties that affects the HTML
elements.
1) background-color
2) background-image
3) background-repeat
4) background-position
5) background-attachment
1) background color
p{
background-color: #b0d4de;
}
h3{
background-color: #e4dda5;
}
2) background-image
body{
background-image: url("https://ic1.maxabout.us/autos/tw_india//2/2021/2/2021-yamaha-r1m.jpg");
margin-left: 10px;
background-repeat: repeat-y;
}
5) background attachment
body{
background: white url("https://ic1.maxabout.us/autos/tw_india//2/2021/2/2021-yamaha-r1m.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
margin-left: 250px;
background-size: 1000px;
}
4) Background position
body{
background: white url("https://ic1.maxabout.us/autos/tw_india//2/2021/2/2021-yamaha-r1m.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
background-size: 750px;
background-position:center;
}
CSS Selectors
1) Elements
2) ID
3) Class
4) Universal
5) Grouping
1) The element selector
p{
text-align: center;
color: mediumorchid;
}
2) The CSS ID selector
#para1{
text-align: center;
color: mediumorchid;
}
3) CSS Class selector
.center{
text-align: center;
color: red;
}
p.center{
text-align: center;
color: red;
}
p.center{
text-align: center;
color: red;
}
p.large{
font-size: 250%;
}
4) CSS universal Selector
*{
text-align: center;
color: tomato;
}
5) CSS grouping Selector
h1,h2,p{
text-align: center;
color: tomato;
}
body{
background: white url("https://ic1.maxabout.us/autos/tw_india//2/2021/2/2021-yamaha-r1m.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
background-size: 750px;
background-position:center;
background-origin: content-box;
}
CSS borders
The css border properties are used to specify the
style, color, and size of the border of an element.
1) border style
2) border color
3) border width
4) border radius
1) border style
p.none{border-style: none;}
p.dotted{border-style: dotted;}
p.dashed{border-style: dashed;}
p.solid{border-style: solid;}
p.double{border-style: double;}
p.groove{border-style: groove;}
p.ridge{border-style: ridge;}
p.inset{border-style: inset;}
p.outset{border-style: outset;}
p.hidden{border-style: hidden;}
Css border width
p.one{
border-style: solid;
border-width:5px;
}
p.two{
border-style: solid;
border-width:medium;
}
p.three{
border-style: solid;
border-width: 1px;
}
Css Border-color
1) name
2) RGB
3) Hex
p.one{
border-style: solid;
border-color: red;
}
p.two{
border-style: groove;
border-color: #98bf21;
}
Css border radius property
This css property sets the rounded borders and
provides the rounded corners around an element,
tags or div.
1) border top left radius
2) border top right radius
3) border bottom left radius
4) border bottom right radius
1) if we provide single value(border radius: 30px) to this property, it will set all
corners to the same value.
2) when we specify two values (border-radius: 20% 10%) then the first value will be
used for the top left and bottom right corners and the second value will be used for
the top right and bottom left corners.
3) when we use three values(border radius: 10% 30% 20%) then the first value will
be used for the top left corner, the second value will be applied on top right and
bottom left corners and the third value will be applied to the bottom right corner.
4) similarly when this property has four values(border radius 10% 30% 20% 40%)
then the first value will be radius of top left, the second value will be used for
the top right, the third value will be applied on bottom right and the fourth value
is used for bottom left.
div{
padding: 50px;
margin: 20px;
border: 6px ridge #081591;
width: 350px;
float: left;
height: 200px;
}
p{
font-size: 15px;
}
#one{
border-radius: 90px;
border-color: #f3f702;
}
#two{
border-radius: 25% 10%;
background: #05f7c7;
}
#three{
border-radius: 35px 10em 10%;
background: rgb(253,16,107);
}
#four{
border-radius: 50px 80% 50cm 50em;
background: lime;
}
Box Model
div{
background-color: turquoise;
width: 300px;
height: 300px;
border: 15px ridge blue;
padding: 50px;
margin: 20px;
}
span{
background-color: red;
color: white;
font-family: Georgia;
font-size: 20px;
width: 300px;
height: 300px;
}
Cursor in CSS:
.a{cursor: auto;}
.b{cursor: crosshair;}
.c{cursor: default;}
.d{cursor: pointer;}
.e{cursor: move;}
.f{cursor: e-resize;}
.g{cursor: ne-resize;}
.h{cursor: nw-resize;}
.i{cursor: n-resize;}
.j{cursor: se-resize;}
.k{cursor: sw-resize;}
.l{cursor: s-resize;}
.m{cursor: w-resize;}
.n{cursor: text;}
.o{cursor: wait;}
.p{cursor: help;}
Display properties in CSS:
1) none => empty
2) inline => height and width (not effect span tag)
3) block => start newline, takes up whole width
4) inline block => inline level block
(apply height and width)
p{
color: magenta;
}
p.one{
display: none;
}
p.two{
display: inline;
height: 100px;
width: 200px;
}
p.three{
display: block;
}
p.four{
display: inline-block;
height: 100px;
width: 200px;
}
Lists, Tables and Forms:
ol{
list-style-type: lower-alpha;
}
ul{
list-style-image: url("download\ \(1\).jpeg");
margin-left: 300px;
}
li{
margin: 10px 0px 0px 0px;
}
ul{
width: 300px;
list-style: inside circle;
}
li{
margin: 10px;
}
ul.bike{
list-style-position: outside;
}
ul.cars{
list-style-position: inside;
}
body{
font-family: 'Gill Sans';
color: #111111;
}
table{
width: 600px;
}
th,td{
padding: 7px 10px 10px 10px;
}
th{
text-transform: uppercase;
letter-spacing: 0.2px;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even{
background-color: #efefef;
}
.money{
text-align: right;
}
tr:hover{
background-color: #c3e6e5;
}
td{
border: 1px solid #0088dd;
padding: 15px;
}
table.one{
empty-cells: show;
border-spacing: 5px 15px;
}
table.two{
empty-cells: hide;
border-collapse: collapse;
}
forms:
Aligning Form (style Input)
input{
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 5px 5px;
display: block;
margin-bottom: 10px;
background-size: 20px;
}
input#email{
background-image: url('email.png');
}
input#twitter{
background-image: url('twitter.png');
}
input#website{
background-image: url('website.png');
}
input:focus{
background-color: #321684;
border: 2px solid #654646;
}
Styled form:
form{
width: 400px;
margin: 20px auto;
}
div{
margin-bottom: 15px;
}
.title{
float: left;
width: 100px;
text-align: left;
padding-right: 10px;
}
input[type="text"],
input[type="email"]
{
font-size: 16px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
}
input[type="submit"]{
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
body{
font-family: Georgia;
}
h1{
text-align: center;
}
.container{
width: 800px;
margin: 0px;
}
Submit button:
input#submit{
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
background: -webkit-gradient( linear,
left top, left bottom, from(#654668),
to(#354685));
background: -moz-linear-gradient(top,
#534648, #541351);
background: -o-linear-gradient(top,
#534648, #541351);
background: -ms-linear-gradient(top,
#534648, #541351);
}
input#submit:hover{
color: #333333;
border: 1px solid #a4a4a4;
border-top: 2px solid #b2b2b2;
background: -webkit-gradient( linear,
left top, left bottom, from(#321313),
to(#321351));
background: -moz-linear-gradient(top,
#534648, #541351);
}
Fieldset
fieldset{
width: 300px;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
text-align: left;
}
legend{
background-color: #efefef;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 10px 20px;
text-align: left;
text-transform: uppercase;
}
body{
font-family: 'Gill Sans';
background-color: #f2f2f2;
}
.form-container{
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.form-title{
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
text-transform: uppercase;
}
.form-group{
margin-bottom: 20px;
}
.form-label{
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.form-input{
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-select{
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
appearance: none;
background-color: #f9f9f9;
}
.form-checkbox-group{
margin-bottom: 15px;
}
.form-checkbox-group label{
display: block;
margin-bottom: 5px;
}
.form-submit{
text-align: center;
}
.form-submit button{
padding: 10px 25px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #ffffff;
cursor: pointer;
transition: background-color 0.5s;
}
.form-submit button:hover{
background-color: #0056b3;
}
Input pseudo class:
1) :hover selects the input element when the mouse
pointer is over it.
2) :focus selects the input element when it has
received focus.
3) :disabled selects the input element when it is
disabled
4) :checked selects a radio button or checkbox
input element when it is checked.
5) :required select the input element when it is
required field.
6) :valid selects the input element when its value
satisfies it validation constraints.
7) :invalid selects the input element when its value
does not satisfy its validation constraints.
8) :placeholder-shown selects the input element
when its placeholder text is visible.
9) :read-only selects the input element when it is
read-only.
10) :out-of-range selects the input element when its
value is outside the defined range.
*/
0 Comments