CSS : - cascading style sheets

- it is used to format the layout of web pages and adding style.

- it can control the layout of all multiple web pages at once.

advantages of CSS :

- css saves time.

- increases the download speed.

- Easy maintainance

- it is better look to html page in comparision to html attributes.

CSS style rule :

1. selector - it is any html tag at which style will be applied.

2. property - it is a type of attribute of html tag.

but simply all the html attributes are converted into css
properties.

3. value - values are assigned to properties.

note : each decleration consists of property and value. each property as a

value.

CSS selectors :

1. Element selector : it selects the element based on element name.

2. id selector : to select a specific element.

it is unique. to select one unique element.

write a '#' character followed by id of the

element.

3. class selector : to select html elements with a specific class

attribute.

write a '.' character followed by class name.

4. universal selector : it selects all html elements on the page.

it denotes '*' character.

5. grouping selector : it selects all html elements with the same style
definitions.

we use seperated by ','

ways to insert CSS : 1. Inline CSS - by using style attribute in the relevant
tag.
 2. Internal CSS - by using <style> tag in the head section.

it should be used when a single document has

a unique style.

3. external CSS - by using external style sheet, the style is

applied to many pages.

we can change the look of an entire website

by changing one file.

each page must link to the style sheet using

<link> tag.

<link> tag goes inside the head section.

- A block-level element always starts on a new line and takes up the full width
available.
- The <div> element is a block-level element.

- Examples of block-level elements: <div> <h1> <h6> <p> <form> <header>

<footer> <section> <div>

- div is the standard block-level element. A block-level element starts on a new

line.

- An inline element does not start on a new line and only takes up as much width as
necessary.

- This is an inline <span> element inside a paragraph.

- <span> <a> <img>

background image handling : by default image is repeated so it covers the entire

element.

background properties :

1. background-image : to set the background image of an

element.

background-image : url("image.jpg");

2. background-repeat : to control the repetition of an

image of background.

background-repeat : no-repeat;

vertically, background-repeat :
repeat-y;

horizontally, background-repeat :
repeat-x;
 3. background-position : to control the position of an
image in background.

background-position : top, center,

bottom, left, right or (px)

4. background-attachment : to control the scrolling of an

image in the background.

background-attachment : fixed;

background color management : it specifies the background color of an element.

color types :

1. hex values --> #000000

2. RGB values --> rgb(255,0,0)

3. color name --> red

hex codes :

- it is a 6-digit representation of color.

- the first two digits (RR) represent a red value.

- the next two are green value (GG).

- the last two are blue value (BB).

- code will be proceeded by '#'.

RGB values :

- it is specified using the rgb( ) property.

- this property takes three values. red, green, blue.

- the value can be integer between (0 to 255) or %.

- all the browsers doesn't support rgb( ) property of color.

text management :

1. color : it is used to set the color of text.

color: red;

color: #0000FF;

color: rgb(0,255,255);

2. direction : it is used to set the direction.

direction: rtl;

3. letter-spacing : used to add or subtract space between the letters,

make up a word.

letter-spacing: 5px;

4. word-spacing : it is used to add or subtract space between the word

of a sentence.

word-spacing: 5px;

5. text-indent : it is used to indent the text of a paragraph.

text-indent: 1cm;

6. text-align : it is used to align the text of document.

text-align: right,center,left ;

7. text-decoration : it is used to underline, overline, strike through

text.

text-decoration : underline; (underlined)

text-decoration : line-through; (striked)

text-decoration : overline; (overlined)

text-decoration : blink; (blinking effect)

text-decoration : none;

8. text-transform : it is used to capitalize text or convert text to

upper or lower letters.

text-transform : capitalize;

text-transform : upper case;

text-transform : lower case;

9. white-space : it is used to control the flow and formatting of

text.

10. text-shadow : it is used to set the text shadow around a text.

font management:

font-family : it is used to change the face of a font.

font-family : 'Time-new-roman':

font-style : it is used to make a font italic or oblique.

font-style : italic;

font-variant : it is used to create a small caps effect.

font-variant : small-caps;

font-variant : inherit; (Inherits this property from

its parent element)

font-variant : initial; (Set this property to its

default value)

font-weight : it is used to increase or decrease how bold or light a

font appears.

font-weight : bold;

font-weight : bolder;

font-weight : 900;

font-size : it is used to increase or decrease the size of font.

font-size : 20px;

font-size : small;

font-size : large;

font-size-adjust : 0.61;

font-stretch : ultra-expanded;

font : it is used to shortand to specify a number of other font

properties.

managing hyperlinks :

link : unvisited hyperlinks

a : link{color: #000000}

visited : visited hyperlinks

a : visited{color: #006600}

hover : currently has the user's mouse pointer.

a : hover{color:#FFCC00}

active : used is currently clicking

a : active{color:#FF00CC}

managing lists :

list-style-type : it allows to control the shape of the marker.

list-style : shortand property

marker-offset : distance between marker and text in the list.

unorderlist : default(disc), circle & square

orderlist : decimal, decimal-leading-zero, upper-alpha,

 lower-alpha, lower-roman, upper-roman

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

designing tables :

border-collapse : table borders should collapse into a single

border or be separated.

border-collapse : seperate;

border-spacing : the distance between the borders of adjacent

cells.

border-spacing : 20px 40px;

caption-side : specifies the placement of a table caption.

caption-side : top,bottom;

empty-cells : whether or not to display borders on empty cells in

a table.

empty-cells : hide;

empty-cells : show; (default)

table-layout : used to lay out table cells, rows, and columns.

The main benefit of table-layout: fixed;

height and width properties :

line-height : increase the space between lines of text.

max-height : to specify the max height of box.

max-width : to specify the max-width of a box.

border management :

border-color : color of a border.

border-bottom-color

border-top-color

border-right-color

border-left-color

border-style : border should be solid, dashed line and double line.

 border-bottom-style, border-top-style,

border-left-style, border-right-style

1. none : no border (eq. of border-width:0)

2. solid : single solid line

3. dotted : series of dots

4. dashed : series of short lines

5. double : two solid lines

6. groove : looks as carved into a page.

7. ridge : looks the opposite of groove.

8. hidden : same as none.

border-width : width of borders.

outline management :

outline doesn't takeup space. don't have to be rectangular.

outline is always same on all sides.

we cannot specify different values for different sides of an

element.

outline {outline-width outline-style outline-color};

outline style properties same as border-style properties.

measurement units : absolute (px) & relative ( rem, em, %, vw, vh )

smallest unit - px

1rem & 1em = 16px

1fr = 225px (used in grid)

note : px are not dependent parent element. it depends content

size.

- rem - Relative to font-size of the root element.

- vw - Relative to 1% of the width of the viewport*.

- vh - Relative to 1% of the height of the viewport*.

- vmin - Relative to 1% of viewport's* smaller dimension.

- vmax - Relative to 1% of viewport's* larger dimension.

- % - Relative to the parent element.

Difference between rem and em?

 em Unit: The em unit allows setting the font size of an element, relative to
the font size of its parent.

When the size of parent element changes, the size of the child changes
automatically.

Note: When em units are used on font-size property, the size is relative to
the font-size of its parent.

When used on other properties, it’s relative to font-size of that

element itself.

Here, only the first declaration takes the reference of the parent.

rem Unit: The rem is based upon the font-size value of the root element,
which is the <html> element.

And if the <html> element doesn’t have a specified font-size,

the browser default value of 16px is used.

So here only the value of the root is considered, and there is no

relation with a parent element.

margin : it controls the space outside an element.

it works outside the object. margin value ( px, %), ( w.r.t browser )

it defines space around an html element. it is possible to use -ve

values.

values of the margin property are not inherited by child elements.

margin creates extra space around an element.

margin{ 10px } --> all four margins 15px ( 1 - all

)

margin{ 10px 2% } --> top & bottom = 10px & 10px ( 2 - top
& bot, R & L )

right & left = 2% & 2%

margin {10px 2% -10px } --> top = 10px, left & right = 2%, bottom =
-10px ( 3 - top, L & R, bot )

margin {10px 2% -10px auto } --> top = 10px, right = 2%, bottom = -10px,
left = auto ( 4 - top, R, bot, L )

padding : it controls the space inside an element.

it is similar to margin but padding w.r.t border.

space should appear between the content of an element & its border.
 it is not possible to use -ve values.

values of the padding property are inherited by child elements.

Padding creates extra space within an element.

padding{ 10px } --> all four paddings 15px ( 1 -

all )

padding{ 10px 2% } --> top & bottom = 10px & 10px ( 2 -

top & bot, R & L )

right & left = 2% & 2%

padding {10px 2% 20px } --> top = 10px, left & right = 2%, bottom =
20px ( 3 - top, L & R, bot )

padding {10px 2% 20px auto } --> top = 10px, right = 2%, bottom = 20px,
left = auto ( 4 - top, R, bot, L )

box-model : it is used when talking about design and layout.

It consists of: margins, borders, padding, and the actual content.

Content - The content of the box, where text and images appear.

Padding - Clears an area around the content. The padding is

transparent. (not visible)

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is

transparent.

The box model allows us to add a border around elements, and to define space
between elements.

-------------------------------
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
-------------------------------

320px (width)

+ 20px (left(10) + right(10) padding)

+ 10px (left(5) + right(5) border)
+ 0px (left(0) + right(0) margin) = 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom
border + top margin + bottom margin

images : border height width opacity

display : block-level elements ( div, h1-h6, p, form, header, footer, section)

inline elements ( span, a, img)

display :block;

display : inline;

display : list-item;

display : flex;

transform : it applies a 2D or 3D transformation to an object.

rotate : to rotate the object. (we use degrees)

scale : increase or decrease the size of element. (to multiply width &
height)

translate : we can change the position X and Y axis. (we use pixels also)

translate-X : move the object horizontally. (we use negative

values also)

translate-Y : move the object vertically.

skew : it moves left to right or top to bottom.

flex : group of items in one dimension.

we use child objects in parent object.

flex-direction : it helps in arranging content in row & column

row : Default value. The flexible items are displayed horizontally,

as a row

row-reverse : Same as row, but in reverse order

column : The flexible items are displayed vertically, as a column

column-reverse : Same as column, but in reverse order

justify-content : it helps in arranging content horizontally.

flex-start : Default value. Items are positioned at the beginning

of the container.

flex-end : Items are positioned at the end of the container

 center : Items are positioned in the center of the container

space-between : Items will have space between them.

space-around : Items will have space before, between, and after

them.

space-evenly : Items will have equal space around them

align-items : it helps in arranging content vertically.

stretch : Default. Items are stretched to fit the container

center : Items are positioned at the center of the container

flex-start : Items are positioned at the beginning of the container

flex-end : Items are positioned at the end of the container

baseline : Items are positioned at the baseline of the container

flex-wrap : it helps in arranging content when the size of screen is

reduced.

nowrap : Default value. Specifies that the flexible items will not
wrap

wrap : Specifies that the flexible items will wrap if necessary

wrap-reverse : Specifies that the flexible items will wrap, if

necessary, in reverse order

positions: we can use two values top and left along with the position property to
move an HTML element anywhere in an HTML document.

Move Left - Use a negative value for left.

Move Right - Use a positive value for left.

Move Up - Use a negative value for top.

Move Down - Use a positive value for top.

NOTE: You can use the bottom or right values as well in the same way as top and
left.

default static position.

relative - Relative position changes the position of the HTML element

relative to where it normally appears.

absolute - absolute is positioned at the specifies relative to your screen

top-left corner.

fixed - allows you to fix the position of an element to a particular spot on

the page, regardless of scrolling.

it Specifies will be relative to the browser window.

 sticky - is combination of position relative & position fixed.

- To horizontally center a block element (like <div>), use margin: auto;

.center{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

Note: Center aligning has no effect if the width property is not set (or set
to 100%).

Center Align Text :

To just center the text inside an element, use text-align: center;

Example:

.center{
text-align: center;
border: 3px solid green;
}

Center an Image :

To center an image, use margin: auto; and make it into a block element.
img{
display: block;
margin: auto;
width: 40%;
}

Left and Right Align - Using position

One method for aligning elements is to use position: absolute;

Example:

.right{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Note: Absolute positioned elements are removed from the normal flow, and can
overlap elements.

- When aligning elements with position, always define margin and padding for
the <body> element.

- This is to avoid visual differences in different browsers.

Working with Combinatory :

 - A CSS selector can contain more than one simple selector.

- descendant selector (space)

- child selector (>)

- adjacent sibling selector (+)

- general sibling selector (~)

Working with Pseudo-class :

- A pseudo-class is used to define a special state of an element.

- it can be used to Style an element when a user mouses over it.

- Style visited and unvisited links differently Style an element when it gets
focus.

Anchor Pseudo-classes Links can be displayed in different ways:

/* unvisited link */ a:link { color: #FF0000; }

/* visited link */ a:visited { color: #00FF00; }

/* mouse over link */ a:hover { color: #FF00FF; }

/* selected link */ a:active { color: #0000FF; }

grid :

it is two dimensional layout of items on a webpage.

with rows and columns making it easier to design web pages.

properties of grid :

grid-template-columns : it helps in arranging content in column.

grid-template-rows : it helps in arranging content in row.

grid-template-areas : it specifies named grid areas.

grid-gap : it helps in arranging gap between rows and

columns.

transition : it provides a way to control animation speed when changing css

proprties.

transition-property : it has the name of property. we want to give

transition to. (all) (ms or s)

transition-duration : it is used to give the total duration of

transition. (ms or s)
 transition-timing-function : it is the speed curve of transition. (ease,
ease-in, ease-in-out, ease-out)

transition-delay : it is used to add delay in transition. (ms or s)

media queries : @media(max-width: __px){}

- it is a technique for responsive web design to desktops, laptops, tablets

and mobiles.

- we can use to specify certain styles for printed documents.

- we can apply styles to only particular screens.