CSS

VIGNESH M
What is css?
CSS
Cascading Style Sheet is styling language used to define presentation of document written
in markup language like HTML

Lets break down the word

Cascading
-refers to the order of priority and inheritance when applying multiple style
instructions to HTML elements
Stylesheet
is a document that contains styles and instructions for how html elements
should be presented
Ways to provide CSS:
Inline CSS
Internal or embedded CSS
external CSS

Inline CSS:
IF we providing css as a style attribute to individual element in HTML it is inline css
Eg: <h1 style=“color:red”>red</h1>

Internal CSS:
If we providing css by using <style> element in Header part of HTML it is Internal css.
Eg:<header>
<style>
p{color:red;
font-size:60px;}
</style></header>
External CSS:
If we provide css by using separate file with “.css ”extension it is external css. But this file should link
HTML document .
HTML:
<header>
<link rel=“stylesheet” href=“here we have to provide css file path”>
</header>
CSS:
p{
color:red;
font-size:60px;
}
NOTE:
IF all three together given for one particular element first preference will give to inline . Second preference
depends on which connect the last .and this process of providing priority is known as cascading
Selectors :
In CSS, selectors are the patterns used to identify and target specific
elements within your HTML document. They act as the foundation for applying styles to
different parts of your web page content.

Simple selectors :
by using name and attribute if we are selecting elements is simple selectors
Types of simple selectors
1.Element selector
2.Id selector
3.Class
4.Universal
5.Attribute selector
1.Element Selector :
by using tag name if we are selecting HTML element is element selector
eg: HTML : <h1> element selector </h1>
2.ID
ID will target specific element with unique identifier. It is a nattribute to HTML Element.IT should be
unique .for name should start with alphabets. Can be followed by letters,numbers,Hypens(-) and
underscores(_)
To trigger id selector in css we have to use # followed by the name.

Eg:
HTML : <h2 id=“ex1”>id</h2>
CSS: #ex1{ color:red;}
3.Class
Class selector used to target and style HTML elements hat have a specific class
attribute.for single element we can give multiple class name for multiple element we can
give common class name . For name should start with alphabets. Can be followed by
letters,numbers,Hypens(-) and underscores(_)
To trigger calss selector in css we have to use . followed by the name.
Eg:
HTML : <h2 class=“ex1”>id</h2>
Universal selector :
If we need to select each and every element in html then we have to go for universal selector .
In css we have to use * for universal selector

Css:
*{
Color:red;
}

Attribute selector :
By using attribute if we are selecting an element in HTML it is attribute selector . For triggering
attribute in css we have to use [ ] . Within [ ] we have to mention the attribute
HTML : <input type= “text”> <input type =“password”>
CSS: [type=“password”]{
Color : red;
}
This will select only password input not text input
Combinator selectors:
Combinator selectors define relationships between different elements,
specifying how they should be related for styling.

Types of combinator selectors:

1.Decendant selector ( space)
2.Child selector (>)
3.Adjacent Siblings (+)
4.General Siblings (~)
1.Decendant selector :
Selects all descendants of a specified ancestor. Triggered by space
Eg: HTML CSS output
<div>
<h1> hi </h1><section> div h1{
<h1>hello</h1> color: red;
</section> }
</div>
2.Child Selector ( >)
Selects direct children of a specified parent. It will get triggered by (>)
Eg: HTML CSS output
<div>
<h1> hi </h1><section> div > h1{
<h1>hello</h1> color: red;
</section> }
</div>
3.Adjacent selector (+)
Selects an element that directly follows another element. It will get triggered
by (+)

Eg: HTML CSS output

<div> h1+p{
<h1> hi </h1> color : red;
<p>hello</p> }
<p>bye</p>
General Sibling selector (~):
Selects all siblings that come after a specified element.It will triggered by ~
Eg:
Eg: HTML CSS output
<div> h1 ~ p{
<h1> hi </h1> color : red;
<p>hello</p> }
<p>bye</p>
<p>tata</p></div>
Pseudo class selector :
Pseudo-classes select and style elements based on their state or interaction.
Pusedo class selectors begin with a colon ‘ : ’
:hover -Applies styles when the user hovers over an element with the mouse
:active -Applies styles when the user clicks on an element and holds down the
mouse button
:focus -Applies styles when an element receives focus
:link - Applies styles to unvisited links
:visited- Applies styles to visited links
:first-child-Applies styles to the first child element of its parent
:last-child-Applies styles to the last child element of its parent
:nth-child(n)-Selects elements based on their position in the parent.
Eg:
h1:hover { background-color:
lightblue; }
button:active { background-color:
darkblue; color: white; }
input:focus { outline: 2px solid green;
}
li:first-child { font-weight: bold; }
li:last-child { color: red; }
li:nth-child(2n) { background-color:
#f2f2f2; }
Pseudo Element selector :

Pseudo-elements in HTML are used to style a specific part of an element or

generate content that is not part of the actual HTML document structure.
Types of pseudo elements:
1::before:
Generates content before the selected element.
2::after:
Generates content after the selected element.
3::first-line:
Selects the first line of text within an element.
4::first-letter:
elects the first letter of text within an element.
• HTML:
<p>This is a paragraph.</p>
<p class="highlight">This is another
paragraph with some text. It will have
the first line highlighted.</p>
<p class="large-initial">This paragraph
has a larger initial letter.</p>
CSS:
p::before {content: "Before ";color:
blue; }
p::after {content: " After";color: red;
}
.highlight::first-line { font-
weight:bold; color: green;}
.large-initial::first-letter {font-size:
1.5em;
color: purple; }
Background:
Background Single color :
body{
Background-color:red;
}
Background multi color :
body{
background-image:linear-gradient(blue,red,yellow)
}
Background image:
body{
background-imgae:url();
}
Other properties:
background-repeat – for avoiding repetition
background-size – for size
background-position –for placing image
Box model:

The CSS box model is a fundamental concept that describes how elements in
HTML are rendered as rectangular boxes on a web page. Each box consists of several
components, including content, padding, border, and margin.
Content:
The actual content of the box, such as text, images, or other media.
Padding:
The space between the content and the border. Padding adds internal spacing
within the box.
Border:
The border surrounds the padding. It is a line or area that goes around the
padding and content.
Margin:
The space outside the border. Margin defines the gap between the border of the
box and the adjacent elements.
div{
width:500px;
height:500px;
padding:10px;
margin:10px;
border:2px solid black;
}

Box-sizing: border-box is used for width and height properties set the total width and height of the
element, including content, padding, and border.
Box-sizing :content-box border-box is used for width and height properties set the total width and
height of the element, excluding padding, and border

Border-radius useful for change corner to curve edges

Properties for text :
color – property used for coloring the text
text-align –property used for align text in the element
text-decoration –used for it decorade the text
text-transform-is used to transform the text to uppercase and capitalize
letter-spacing – used for manage space between letters
word-spacing –used for manage space between words
line-height-used for manage space between lines
text-shadow – used to provide shadow
font-size-used for modify font-size
font-weight –used for modifying thickness
font-family – used for modifying font-style
Lists:
list-style-type –property used to set the type of list
Table :
border – for giving property for td,th,table
we have to give 3 property for border – thickness type color
border-collapse- for merging border
Display :
‘display’ property in CSS is used to control the layout behavior of an element. It
determines how an element should be rendered in the document flow, affecting its
visibility, box type, and interaction with other elements . It having multiple value
display:block
The element generates a block-level box. It starts on a new line and stretches the
full width of its parent.we can provide custom width also
display:inline
The element generates an inline box. It does not start on a new line and only
takes up as much width as necessary. we cannot provide custom width.
display:inline-block
The element generates an inline-level block container.It behaves like an inline
element but allows setting a width and height.
display:none
The element is not displayed at all. does not take up any space in the document
flow and is not interactable.
display:flex
The element generates a block-level container with a flexible box as its layout
model. It enables a flex container and allows child elements to be flex items.
flex-direction:Specifies the direction of the main axis along which flex items are
placed.
value:row(default),row revese,column,column-reverse
justify-content: Aligns flex items along the main axis of the flex container.
values:start,end,center,space-between
align-items: Aligns flex items along the cross axis (perpendicular to the main
axis)
Position:
position property is fundamental for controlling the positioning of elements on a webpage.
Values of position
Position :static
Default value. Elements are positioned according to the normal flow of the
document.top,left,bottom,right,z-index not having effect
Position:relative
The element is positioned relative to its normal position in the document flow. We can use
top,left,bottom,right,z-index properties
Position:absolute
The element is removed from the normal document flow and positioned relative to its
nearest positioned (not static) ancestor. If no positioned ancestor is found, it will go to top left corner
of the document.
Position:fixed
The element is removed from the normal document flow and positioned relative to the
viewport. It stays fixed at its specified position even when the page is scrolled.
Position:sticky
The element is treated as ‘relative’ positioned until it crosses a specified point during
scrolling, then it is treated as ‘fixed’ positioned. It’s a hybrid of ‘relative’ and ‘fixed’ positioning.
Z-index:
The z-index property in CSS is used to control the stacking order of positioned elements along
the z-axis (depth) within a stacking context. Which element having more z-index that will go to top.

Overflow:
The ‘overflow’ property in CSS is used to control how content that is too large to fit into an
element's box is handled.
values:
visible - It may overflow the box, extending beyond its boundaries.(default)
hidden-Content that exceeds the box is clipped and not visible.
scroll-A scrollbar is always provided, allowing the user to scroll to see the hidden content.
auto-A scrollbar is provided only when the content overflows the box. Otherwise, no
scrollbar is shown.
transition:
transition property in CSS is used to create smooth animations and transitions between
different states of an element.
Syntax:
transition : property duration timing function delay
For different screen css:
Media queries used for writing css for different screens
Syntax:
/* Styles for small screens */
@media (max-width: 600px) {
/* ... */
}

/* Styles for medium screens */

@media (min-width: 601px) and (max-width: 1024px) {
/* ... */
}

/* Styles for large screens */

@media (min-width: 1025px) {
/* ... */
}
Keyframes:
In CSS, keyframes are used to define the intermediate steps or waypoints during an
animation. Keyframes allow you to specify styles at various points in the animation, controlling how
an element should appear and behave at each step.

@keyframes animation-name {

0% {
/* Styles at the start of the animation */
}
50% {
/* Styles in the middle of the animation */
}
100% {
/* Styles at the end of the animation */
}
}
Absolute units :
Absolute units in CSS have a fixed and consistent size regardless of the viewing device or
user preferences.
Eg:cm,mm,in,pt,px
Relative units :
Relative units in CSS are units of measurement that are based on the size or characteristics
of other elements in the document, or on the viewport dimensions
Ex:em,rem,%,vh,vw

Use case :
px-for precise measurement .generally used for border and border-radius
rem or em- used for padding margin font-size
%-used for width
vh,vw-when we want sizes to be relative to the viewport dimensions.