Cascading Style Sheets isa style sheet language used for describing the presentation of a document written in a markup language such as
HTMLit provides design to our web page.
Chapter 1. Creating our first Css Website.
DOM: Document Object Model
en
oot
Tesaeses|
Sat ies
padding: »
‘As shown in image, on a website on clicking the inspect option where we can see the codes is called Document Object Model.
HTML id and class attribute:
When an html element is given an i, it serves as a unique identifier for that element
(On the other hand, when a html element is given a class, t naw belongs to that class More than one elements can belong to a single class
but every element must have a unique idiif assigned).
Three ways to add css to html:
1.
°
2 tnline CSS:In inline css, we write style attribute within the element on which we want it to apply.This is how itis done.
3, External CSS: In this part of css, we create a external css file and then link it with our html page by using code:
Here, stylecss is the name of css file we want to link and where we are going to add our css code.
SS Selectors: Its used to select an element or elements for styling
body( /selector/
color:red; — /declaration/
°
Element Selector: It is used to select an element based on the tag name
‘h2{ colour: blue;
)
ID Selector: Its used to select an element with a given ic:
‘first( color: white;
>
Class Selector: It is used to select an element with a given class:
-main( color: purple;
)
Important:
IF want to apply same css rule that in an element that | have already applied, then | can write it lke h1,h2,h3 (name of the elements in
coma).
+ can be used as universal selector to select all elements. EXAMPLE
«
margi
background-color: red;
)
Chapter 2. Colors and Backgrounds
5S cles are simple key-value pairs with a selector. We can write CSS rules to change color and background
olor: This rule in CSS provides color to the text.
PCcolor: white;
)
Color Values:
1. RGB: By using this value, we can mix three different color, Specify color using Red, green, blue values. Eg. rgb(200,98,70)
2. HEX: Specify color using hex code. Eg, #117180
3. HSL: Specify the color using hsl values. Eg, hsl(8,90%,63%)
HSL stands for Hue, saturation, and lightness
The value of the color or background color is provided as any one of these values.
This rule in CSS specifies the background color of a container.
PC
background-color: brown;
)
The background-color property
The CSS background-color property specifies the background color of a container.
Foreg
}
Background Image Property
This property is used to set an image as the background. For Eg,
The Background-repeat property:
Can be any of following
repeat-x = repeat in horizontal direction
repeat-y = repeat in vertical direction.
no-repeat = image not repeatbackground-repea
The Background-size pro}
Cover: fits and no empty space remains
Contain: fits and image is fully visible
Auto: display in original size
{width) : set the width and height will be set automatically
(width) (height) : set width and height
The Background-position Property
Sets the starting position of a background image *
Background-attachment Property
Defines a background scrollable/non-scrollable character oh a b:
kgroundbackground-attachment: fixe
d
By using thi prperty, we are able to scroll the main content of the page but unable to scroll the image and border.
background-attachment: scroll;
By using this property in background-attachment, we wii be able to scroll image with main content,
‘The Background-shorthand Property
By using this property, we can set multiple background properties,
wred(
background: red uri(‘img.jpg’) no repeat fixed center;
)
Squence will be same, but can add or remove property.
Chapter 3. CSS Box Model
The CSS box mode! looks at the HTML elements as boxes.
CONTENT: The main part which contain text, images etc is content
PADDING: The outer layer of the content is called padding,
BORDER: A border is a layer of padding
MARGIN: Next layer after boder is margin.
Lets understand the layers of htm! body by an example:Aeeear |
background-color:
elke) ara Eelanmer( = 6
padding: 133px;
border: 2px li
margin: 45px;Green highlighted part shows the margin. Brown highligthe:
vignt ttt Ss
on teig 6 OE i
ae af of Zp LPs. ; OD yt
part shows the padding. And Black highlighted part
_ hottom,
boro Seageuee ose — Glachilie Seti
This is how, we can give four different values to margin property and the order is clock wise.
border-radius:
‘And the output will be:
Edges of the boxes are curvier.‘ale anf
background-color:
margin: 34px;
height: 36px;(ia aca hc
the margin which is greater willbe applied and other margin will not be applied
wing
Determines what out of paddling and borders included in elements width and height
Can be content-box or border-box
# Include only content in width/height
Chapter 4. Font and Display
The Display Property
The display property in css is used to determine whether an element is treated as inline or block element and layout is used as its children,
* Display Inline
Takes only the space required by the element, No line breaks before and after. Setting width/height (or margin/padding) not allowed
Examplend the output is
ise we haven't set any diplay property here that's why box is taking 100% width here and we aree unable to
Ay here than we will be able to cut the width and show different div in one line
background-color:
width: 312px;
height: 124px;
display:
a
5
- box2{
background-color:
width: 312px;
height: 124px;Similar to inline but setting height, width, margin, and padding is allowed. Elements can sit next to each other
note: In block and inline property setting margine and padding is not allowed, but we can set padding and margine in property inline-
block.
play None
the element is removed from the document flow. Its space is not blocked.
* Display Hidden
the element is hidden but its space is reserved.
Text-Align Property
This property is used to set the alignment or position of text
Example:
text-align:
Output
By using this propety, we can change the position of the text.
Output
By using startin this this property, we can move text from left to right.
OutputBy using end rule in text align property, we can add text from right to left side.
‘TextDecoration Property,
Used to decorate the text Can be overin, line-through, underline, none
EXAMPLE
text-decoration: underline;
Output
By using underline in text decoration property, we can add a kine under the text,
‘text-decoration: overline;
By using overline in text decoration property, we can add a line over the text.
‘text-decoration
ine-through;
By using line-through in text decoration property, we can add a line throughout the text.
(We can also add dotted and wavy lines under the text by using this property)
‘text-transform property
Used to specify uppercase and lowercase letters in a text
EXAMPLE
text-transform: uppercase;
text-transform: lowercase;
‘Tore ps doors wet conseceirdipscing it epuine bract uodl se pore ee vie omnis cos voluplas etimped a provietvolyratu aun Yop
By using this property we can change text into uppercase or lowercase.
Line-Height Property:
Used to specify the space between lines
t
line-height: 06;
)
Font Property:Font plays a very important role in the look and feel of a website.
*Font Size: This property helps to increase or decrease the size of the font.
EXAMPLE
chjome(
font-size: 2px;
)
*Font Family Property: Font Family specifies the font of a text, Can hold multiple values as a “fallback” system,
For Example
home
font-family: “Gill Sans’, ‘Gill Sans MT", Calibri, “Trebuchet MS’, sans-ser
Here have applied different types of font types. If frst font type is not available in my system then it will automatically set second font type
apply default font type. This is known as Fallback System.
and if any of these font types are not available in my system, then it
| can check which font is applied in the inspect part which can be done on firefox browser.
Here, undreline partis the font used
How can we use google font?
1. We have to search google font and select the type of font we want to use.google fonts
Q All [] Books (2) Image CN eway: @ Shoppin
About 19,90,00,000 results (0.48 seconds)
https://fonts.google.com
Google Fonts: Browse Fonts
Making the web more beautiful, fast, and open through great tyq
eh ake
PA ese UMC ora ar
(ACL ea
> armnge the size of the font and then co \k to the htm! file
font-family: ‘Playfair Display', s
erif;
font-family: ‘Playfair Display’, serif;Output
Other Font Properties
‘Some of the other font properties are listed below:
font-size: Sets the size of the font
font-style: Sets the font style
font-variant: Sets whether the text is displayed in small-caps
font-weight: sets the weight of the font
We can set all these properties in firefox browser easly.
Chapter 5. Size, Position and Lists
There are more unit for describing the size other
then ‘px’. Other units helps to make website look presentable,
There are rem, cm, vw, vh, percentage etc
Pixel: Pixel (px) are relative to the viewing device. For a device with the size 1920x1080, 1px is Tunit out of 1080/1920.
Relative Lengths: These units are relative to the other length property.
Following are some of the commonly used relative length
1. em: unit relative to the parent font size
‘em means "my parent element's font-size
EXAMPLEHere | am taking an example by taking a parent tag that is div class red. And in red class | created one more class blue.
Here in css | have provided font size to the red class 25px and blue tag's font size is 2em which means 2 will be multiplied with 25 Le
2'25=50px. And as result the font size of blue class will be SOpx.
2, rem : unit relative to the root font size ( tag). Similar to the em as the rem size is multiplied by the size of parent tag given in px.
3. yw: unit relative to 19 viewport width,
4. vi: unit relative to 1% viewport height.
EXAMPLE,
Let us say, have created two div classes namely box and boxt. And for the styling is as following:
background-color
height: 45vh;
width:
Here | have provided the background color to both boxes and as for height and width of box, | have provided height of 45vh and width of
-35.w. Which means that height and witha will remain 45 viewport height of whatever device you are viewing the site on. Same goes for ww.
5. %: unit relative to the parent element. 1 Pixel is equal to 625 Percent. 1 Pixel is 6.25 times Bigger than 1 Percent.
Min/max- height/width property
Css has four more properties namely min-height, max-height and min-width, max-width,
By using these property, we ensure thet the maximum or minimum height should not exceed from the limit, EXAMPLE:eee
margin: @px;
background-color:
height: 10vh;
min-height: 15vh;
Here, | have given 15vh min-height to the container class, so even if| give the height less then 15vh as shown in image, its going to show
‘me the height 15vh only, Same goes for all max-min properties.
The position property
Used to manipulate the location of an element
Following are the possible values
+ static: The default position. top/bottom/left/right/z-index has no effect,
+ The top/bottomyleft/right/z-index will now work. Otherwise, the element is in the flow of the document lke static.
+ absolute: The element is removed from the flow and is relatively positioned to its frst non-static ancestor. top/bottom etc. works
+ relati
Basically the element on which absolute position property is applied will be removed from the document flow and it will move
according to its first non-static parent element,
+ fixed: ust Ike absolute except the element is positioned relative to the browser window.
The element will be unscrollabl
+ sticky: The element is positioned based on the user's scroll position
z-index property
‘The z-index property specifies the stack order of an element
It defines which layer will be above which in case of overlapping elements,
BF eter, end dimutsion
x
Chapter 6. Flexbox
Before we look nto float property, we will discuss about float property
Float Property
Float property helps to move athe element towards right/left side.Clear Property
By using clear property in an element, no other element will be able to be float on the direction which is given not to float
By using the clear property for both, no element will be able to float the left and right side of the element on which applied.
The CSS Flexbox
Aims at providing a better way to layout, align, and distribute space among items in a container.
4 ae a erat be aoa veel
For Example:
| have created four different boxes in one container as shown following
rer
eA Cee SUT ir)
Pee Tne eee ml Tey vec ett
See Maer eS edb Com
box4">I live in Ambala Cantt with my mom
After creating different boxes, now | will do the styling..box1{
background-color: Wii
height: 345px;
width: 246px;
border: 2px solid Mgray;
border-radius: 2px;
container{
1bR OE)
Flex-direction:IMy Name Is Diwangna
d am pursuing bachelors of computer
application
I live in Ambala Cantt with my mom
If selected column-reverse, than the boxes will be arranged in reverse direction
2. Flex-Wrap
Can be wrap, nowrap, wrap-reverse, Wrap items as needed with this property
Foer Example;
ee a) Sea ale
Now when | resize the page, all boxes will get arranged according to the size. This property helps to make responsive website,
3. Justify-content Property
Defines alignment al
For Example
enter;4. Align-items Property
Defines alignment along the cross axis.
Example:
align-items: center;
output:
Difference between justif
justify-content — controls alignment ofall items on the main axisalign-items — controls alignment of all tems on the cross axis.
Main Axis -
flex-direction: column
—_———_ Cross Axis - flex-direction: column —————$>
5. Align-content
Aligns a flex containers lines when there is extra space in the cross axis. You must've enabled flex-wrap property to use this property as it
will fil the extra space between the cross axis.
Flex properties for the children element (flex items)
1. Order
Controls the order in which the items appear in the flex container
For Example: | want to change the arder of boxes from 2,3,4 and 1. So I will write the property order:4 on the element which order has to
change.Output
1am pars
opplicat
lors of computer [eeseeroct live in Ambala Cant with my mom |My Name Is Diwanga
The order of boxt has changed to no. 4
2. Align-self
Allows default alignment to be overridden for the individual flex items
For Example: | want to move box3 to the end of fflex page so | will write align-self: flex-end;
‘Tam pursuing bachelors of computer ; Yd live in Ambala Cantt with my mom
application
My Name Te Diwangua
Like this.
3. Flex-grow
Defines the ability fora flex item to grow.
For Example: | want to grow the size of box1, than Iwill use flex-grow: 3:
My Name Is Diwangna
‘And the size of box 1 will increase.
Flex-shrink
Specifies how much a flex item will shrink relative to the rest of the flex items,
Used when the items are overflowing from the flexbox,
Chapter 7. CSS Grid and Media QueriesLike tables, grid layout enables an author to align elements into columns and rows.
and its parent and children elements, lam going to make a ‘container’ div in which we have chil
class
class
class
class
classprid-row-gap: 10px;
erid-column-gap: 16
Output
Grid-template-columns
Used to create more than one columns
Grid-template-column takes a particular width columns and the no. of columns.
prid-template-columns:
JE
IF
Auto stands for automatic here and no. of auto decides the no. of columns.
The grid-gap property
Shorthand property for grid-row-gap & grid-column-gap
grid-gap: 10px 20px;
Note:Fora single ve of grid-gap, both row and column gaps can be set in one value
Following are the properties for grid container:
1. The grid-template-columns property can be used to specify the width of columns
For Example
2. The grid-template-rows property can be used to specify the height of each row
3. The justify content property is used to align the whole grid inside the container.
For Example: justify-content: center:4. The align-content property is used to vertically align the whole grid inside the container.
For Example: align-content: center;
Following are the properties for grid item:
1. The Grid-column property how many columns an items will span,
memes Ne
background-color:
border: 2px
grid-column: 1/
I
* When you add 1/span 3, it means that 1 is the no, of row/column and 3 refers to the no, of boxes itis going to span in one.