css_notes

CSS
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
4. Import.
1. Inline CSS: Inline CSS code is written in the opening tag of the HTML
element by using style attribute.
Syntax: <p style=" "> </p>
2. Internal CSS: Internal CSS code is written in the head section of an HTML
element using <style> tag.
Syntax: <head>
<style>
tag_name{
property: value;
}
<style>
</head>
3. External CSS: External CSS styling can be done by creating a external CSS
file with file_name.css extention 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=" file_name.css">
</head>
4. @import: This Styling can be done by linking one CSS file to another CSS
file.
Syntax: @import url(file_name.css)
Import should be written in very first line of the CSS file which has to be
linked.
NOTE: The first priority is inline CSS

But the priorities of the Internal and External CSS varies accordingly depending
on the declared position
if, <link rel="stylesheet href="index.css">
<style> </style>
Here, the first priority is for Internal CSS.
if, <style> </style>

<link rel="stylesheet href="index.css">
Here, the first priority is for External CSS.
SELECTOR
Selectors are used to select the particular HTML element and to style
them.
There are five types of Selectors
1. Simple Selectors
2. Combinator Selectors
3. Attribute Selectors
4. Pseudo Element Selectors.
5. Pseudo Classes Selectors.
Simple Selectors
Simple selectors style the HTML element in five ways:
1. Id Selector.
2. Class Selector.
3. Tagname.
4. Groupname.
5. Universe.
Id selectors:
Id selector targets only individual element in the HTML
document.
Prefix symbol used for id selector is # (hash)
Example: #demo{
color: red;
background: yellow;
}
Class Selector
Class selector targets multiple elements in the HTML document.
Prefix symbol used for id selector is . (dot)
Example: .test{
color: red;
background: yellow;
}
Tagname Selector
Tagname selector targets the HTML elements by tag name.
There is no symbol used in tagname selectors.
Example: h1{
color: magenta;
background: green;
}
h2{
color: red;
background: black;
}
h3{
color: yellow;
background: orange;
}
Grouping Selector
Groupname selector targets a group of HTML elements by
tagname separated by commas.
Example: p, div, h4{
color: magenta;
background: green;
}
Universal Selector
Universal Selectors targets every HMTL element.
The symbol of Universal Selector is *
There is no selector is declared in css.
Example: *{
color: yellow;
background: magenta;
}
Combinator Selector
Combinator Selectors are used to style the combination of HTML
elements.
There are four Combinator Selectors:
1. Descendent Selectors
2. Child Selectors
3. Adjacent Sibling Selectors
4. General Sibling Selectors
1. Descendent Selectors: This Selector targets both direct and indirect children
of a parent tag. The symbol is (space)
Syntax: parent_tag child_tag{property: value;}
2. Child Selectors: This Selector targets the only the direct children of the
parent tag. The symbol is > (greater than)
Syntax: parent_tag > child_tag{property: value;}
3. Adjacent Selectors: This Selector targets the element which is the first
sibling of the targeted HTML tag or element.
(or)
This Selector targets the element which is exactly adjacent to the targeted
HTML tag or element.
The symbol is + (plus)
Syntax: parent_tag + target_tag{property: value;}
4. General Sibling Selectors: This Selector targets all the siblings of the target
HTML tag or element.
(or)
This Selector targets all the adjacent tags of the target HTML tag or element.
The symbol is ~ (tilde)
Syntax: parent_tag ~ target_tag{property: value;}
Attribute Selector: Attribute Selectors are used to style the HTML element by
targeting the respective attributes and with their values.
Types of Attribute Selector:
1. tag_name[attribute_name]: Represents elements with an attribute name
of attribute_name.
2. tag_name [ attribute_name= “value” ]: Represents element with an
attribute name of attribute_name whose value is exactly value.
Pseudo Element Selectors.
Pseudo Elements targets the content of the HTML element by the
following ways:
1. First Letter
2. First Line
3. Before
4. After
5. Selection
6. Marker
Each pseudo element selectors is declared with the double colon : :
First Letter: The first letter styles the very first letter of the content in the
targeted HTML element.
Example: p : : first-letter{
font-size: 30px;
color: black;
}
First Line: The first line styles the very first line of the content in the targeted
HTML element.
Example: p : : first-line{
background-color: black;
color: white;
}
Before: The before pseudo element is used to place the specific content before
the targeted HTML element.
Example: p : : before{
content: “&phone”;
background-color: black;
color: white;
}
After: The after pseudo element is used to place the specific content after the
targeted HTML element.
Example: p : : after{
content: “Thank You”;
color: blue;
}
Selection: The selection pseudo element is used to style the content when the
cursor is dragged on the content (when the content is selected) on the targeted
HTML element.
Also copying the text content from the user can also be disabled, by using the
property user-select: none.
Example: p : : selection{
background-color: pink;
color: magenta;
}
Marker: Marker pseudo element is used to style the lists in the HTML
document.
Marker is only used to style the list type not the content.
Declaration of selector is not mandatory here.
Background color will not work for Marker.
Example: li : : marker{
color: red;
font-size: 30px;
}
(or)
: : marker{
color: red;
font-size: 30px;
}
Pseudo Classes
1. Dynamic Pseudo Classes.
2. Structural Pseudo Classes.
Dynamic Pseudo Classes

 Link
 Visited
 Hover
 Active
 Focus
Structural Pseudo Classes

 First-child
 Last-child
 Nth-child
 First-of-type
 Last-of-type
Dynamic Pseudo Classes

Pseudo Class Selector specifies the special state of the content.
The Pseudo Class Selector are:
1. Link
2. Visited
3. Hover
4. Active
5. Focus
o Each dynamic pseudo class selector is declared with the single colon :
o Link, Visited only applicable for anchor tag.
o Link is used to style the unvisited link
o Link doesn’t style the already visited link.
o Active applies the style at the time of click event.
o Hover is applicable for all the HTML elements.
o Focus styles when the element is focused.
o Focus selector is applicable for <a> tag and also for the elements which takes user
input that is for <input> and <textarea> tag.
o While using all the Link, Visited, Hover and Active selectors. Hover should be
declared after Link and Visited. Along with that the Active should be declared
after Hover, because to make the elements effective.
Example:
a : link {
color: aqua;
background-color : red;
}
a : visited {
color : green;
}
a : hover {
color : yellow;
}
a : active {
color : chocolate;
}
input : focus{
color : red;
background-color : yellow;
}
Structural Pseudo Classes: The Structural Pseudo Class selectors is used to

target the combination of the HTML elements and to style them.
1. First-child
2. Last-child
3. Nth-child
4. First-of-type
5. Last-of-type
First-child: The First-child pseudo class selector targets the first child element
of the targeted parent.
Example: div p : first-child{

color: red;
background-color: yellow;
}
Last-child: The Last-child pseudo class selector targets the last child element of
the targeted parent.
Example: div p : last-child{

color: red;
}
Nth-child: The nth-child( ) pseudo class selector targets the elements according
to the argument passed.
Example: div p : nth-child(2){

color: red;
}
First-of-type: The first-of-type pseudo class selectors targets the first element
of the input type.
The input type should be the first type of all the input types.
It also behaves as first-child selector.
It is applicable for text, submit, reset, button.
It is not applicable for radio, checkbox, textarea,.. so on.
Example: input : first-of-type{

color: red;
}
Last-of-type: The Last-of-type pseudo class selectors targets the last element
of the input.
The input type should be the last type of all the input types.
It also behaves as last-child selector.
Example: input : last-of-type{

color: red;
}
Nth-of-type: The nth-of-type pseudo class selectors targets all the element of
the input type.
It also behaves as nth-child selector.
Example: input : nth-of-type(n){

color: red;
BOX Model
Box Model is essentially a box that wraps around every HTML
element. Box Model is used to design and layout.
The CSS Box Model consists of Margin, Border, Padding and the actual Content.
Content: It is the content of the HTML element.
Padding: It is the space after the content.
Border: It is the Border of the HTML element.
Margin: It is the space after the Border of an HTML element.
Padding and Margin allow up to four values.
Syntax: padding: 10px ;

padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px
Text Properties
Formatting text properties:
color- changes the text color

Example - color: red;
text-align- Horizontal alignment of the text (here we have right, left, center,
justify).
Example- text-align: center;
text-transform- converts the text-letter format(UPPERCASE, lowercase,

Capitalize).
Example- text-transform: capitalize;
text-shadow- it allows 4 values they are x-direction y-direction opacity and

color
Example- text-shadow: 2px 2px 5px red;
text-decoration- underline, overline, line-through

Example- text-decoration: none;
letter-spacing- to get the space between letters of a text we use it

Example- letter-spacing:2px;
word-spacing- to get the space between words of a text we use it

Example- word-spacing:5px;
text-indent- it'll be saying from where the text should start.

Example- text-indent:2px;
Background Styling Properties
background-color: The background-color property sets the background color of

an element.
Syntax: background-color: color|transparent|initial|inherit;
background-image: The background-image property sets one or more
background images for an element.
Syntax: background-image: url|none|initial|inherit;
background-position: The background-position property sets the starting

position of a background image.
Syntax: background-position: value;
background-repeat: The background-repeat property sets if/how a background

image will be repeated. By default, a background-image is repeated both
vertically and horizontally.
Syntax: background-repeat: repeat|repeat-x|repeat-y|no-
repeat|initial|inherit;
background-size: The background-size property specifies the size of the

background images.
Syntax: background-size: auto|length|cover|contain|initial|inherit;
CSS Units:
CSS has several different units for expressing a length. Many CSS properties
take "length" values, such as margin, width, padding, height etc.
Absolute Lengths:
The absolute length units are fixed and a length expressed in any of these will
appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen
sizes vary so much. However, they can be used if the output medium is known,
such as for print layout.
Absolute units are mm, cm, in, px-pixels(1/96 of 1 in), pt-points(1/72 of 1 in),
pc- picas (12 pt).
Relative length:
units specify a length relative to another length property. Relative length units
scale better between different rendering medium.
Relative units are em, rem, vh, vw, % .
Why ? *{Padding:0, margin:0 , box-sizing: border-box;}
Targeting the universal selector (*) and setting properties like padding: 0,
margin: 0, and box-sizing: border-box is a common practice in web
development, and it serves several purposes:
Resetting Default Styles: Browsers apply default styles to various HTML

elements, such as adding default margins and paddings to elements like body,
div, ul, li, etc. By targeting the universal selector, you can reset these default
styles to ensure a consistent starting point for styling your webpage.
Consistency: Setting padding: 0 and margin: 0 to all elements eliminates any

unexpected spacing or layout issues caused by inconsistent default styles
across different browsers. This helps in achieving a consistent look and feel for
your website.
Box Sizing: The box-sizing: border-box property ensures that an element's

padding and border are included in its total width and height. This can be more
intuitive for layout purposes and helps avoid unexpected layout issues.
Without this setting, padding and borders would add to the element's specified
width and height, potentially causing layout problems.
Flex:
display: flex; is a CSS property that is used to create a flexible container for a
set of items (usually referred to as flex items) in a web page layout. When you
apply display: flex; to an HTML element, it turns that element into a flex
container, and its child elements become flex items. This allows you to control
the layout and alignment of these items within the container using various flex
properties.
Flex Container: The element to which you apply display: flex; becomes a flex
container. It can contain one or more flex items. The container is responsible
for defining how the items should be arranged and distributed within the
available space.
Flex Items: The child elements of a flex container are referred to as flex items.
These items can be text, images, divs, or any other HTML elements. Flex items
are aligned and distributed within the flex container according to the rules
defined by flex properties.
Main Axis and Cross Axis: Flex layouts are based on two axes. The main axis is
the primary axis along which the flex items are aligned, and the cross axis is
perpendicular to the main axis. You can control the direction of the main axis
using the flex-direction property.
flex-direction: This property determines the direction of the main axis within
the flex container. Common values include row (default), row-reverse, column,
and column-reverse. These values control whether flex items are arranged
horizontally or vertically and in which order.
justify-content: This property controls the alignment of flex items along the
main axis. It specifies how the extra space in the container (if any) should be
distributed among the items. Common values include flex-start, flex-end,
centre, space-between, and space-around.
align-items: This property controls the alignment of flex items along the cross
axis. It specifies how items should be aligned vertically within the container.
Common values include flex-start, flex-end, centre.
flex-basis: This property sets the initial size of a flex item before any available
space is distributed. It can be specified as a fixed size, a percentage, or auto.
flex-wrap: wrap, nowrap, wrap-reverse.
Gap: In the context of Flexbox layouts, the gap property controls the spacing
between flex items within a flex container.
Example: .flex-container {
Display: flex;
gap: 10px; }
Display: grid;
display: grid is a CSS property that allows you to create grid layouts in web design. It is a
powerful and flexible way to arrange elements on a web page, providing control over both rows
and columns. Grid layouts are particularly useful for creating complex and responsive designs.
Container and Items: To use grid layout, you first define a grid container by setting display: grid;
on an element. This container then becomes the parent for grid items, which are the elements
you want to arrange within the grid.
Grid Lines: Grids consist of horizontal and vertical lines. You can specify the number of rows and
columns in the grid using the grid-template-rows and grid-template-columns properties. You
can use various units (like pixels, percentages, or fractions) to define the size of rows and
columns.
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr; /* Two rows with 1:2 height ratio */
grid-template-columns: 1fr 1fr 1fr; /* Three columns with equal width */
Grid Gap: You can create spacing between grid items using the grid-gap or its individual
properties, grid-row-gap and grid-column-gap.
CSS POSITION:
In CSS, the position property is used to control the positioning of elements within a web page.
There are several values for the position property, each of which determines how an element is
positioned relative to its normal position in the document flow. Here are the main values for the
position property:
Static (Default):
position: static;
This is the default value, and it means that the element is positioned in the normal document
flow. It is not affected by the top, right, bottom, or left properties.
Relative:
position: relative;
When an element is set to position: relative;, it is positioned relative to its normal position in
the document flow. You can use the top, right, bottom, and left properties to offset the element
from its original position.
Absolute:
position: absolute;
Elements with position: absolute; are positioned relative to their nearest positioned ancestor
(an ancestor with position relative). If there is no positioned ancestor, it will be positioned
relative to the initial containing block (usually the viewport).
Fixed:
position: fixed;
Elements with position: fixed; are positioned relative to the viewport, so they stay in the same
place even when the user scrolls the page. Commonly used for creating headers, footers, or
other elements that should always be visible.
sticky:
position: sticky;
Elements with position: sticky; behave like position: relative; until they reach a specified scroll
position, at which point they become "sticky" and are positioned relative to the nearest scrolling
ancestor or the viewport.
CSS TRANSFORM
In CSS, the transform property allows you to apply various 2D and 3D transformations to
elements, altering their size, position, and orientation.
translate, scale, rotate, and skew.
Translate:
transform: translate(x, y);

The translate transformation moves an element along the X and Y axes. It displaces the element
from its original position without changing its size or shape.
Scale:
transform: scale(x, y);
The scale transformation enlarges or shrinks an element along the X and Y axes. A scale of 1 is
the original size, values less than 1 make it smaller, and values greater than 1 make it larger.
Rotate:
transform: rotate(angle);
The rotate transformation rotates an element by a specified angle (in degrees) clockwise.
Positive values rotate clockwise, while negative values rotate counterclockwise.
Skew:
transform: skew(x-angle, y-angle);

The skew transformation skews an element by a specified angle along the X and Y axes. Positive
values create a clockwise skew, and negative values create a counterclockwise skew.
You can combine multiple transformations by applying them sequentially within the transform
property:
.element {
transform: translate(50px, 20px) rotate(45deg) scale(1.5);

}
Transformations are great for creating interactive and visually appealing effects on web
elements, such as animations, transitions, and hover effects.
Keyframes and animations:
In CSS, keyframes and animations are used to create dynamic and visually engaging effects on
web elements. Keyframes define the specific points in an animation sequence, while animations
apply these keyframes to elements. Let's break down keyframes, animations, and the relevant
animation properties:
Keyframes define a series of styles or transformations that an element should go through during
an animation. These keyframes are defined using the @keyframes rule. Each keyframe specifies
the properties and values at a particular point in time during the animation.
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
In this example, we've defined a keyframe animation called slide-in that starts with the element
translated to the left (-100%), gradually moves it to its original position (0%), and then translates
it to the right (100%) while fading out.
Common Animation Properties:
animation-name: Specifies the name of the keyframes you want to use.
animation-duration: Sets the duration of the animation in seconds (s) or milliseconds (ms).
animation-timing-function: Defines the timing function to control the acceleration and

deceleration of the animation. Common values include ease, ease-in, ease-out, ease-in-out,
linear, and cubic-bezier() for custom curves.
animation-delay: Specifies the delay before the animation starts.
animation-iteration-count: Determines how many times the animation should repeat (e.g.,
infinite, 3, 2.5).
animation-direction: Sets the direction of the animation (normal, reverse, alternate, alternate-
reverse).
Media Queries:
Media queries in CSS are a powerful technique for making your web designs responsive to
different screen sizes and devices. They allow you to apply specific CSS rules based on the
characteristics of the user's device, such as its screen width, height, orientation, and more.
Media queries are essential for creating designs that adapt and look good on various devices,
from desktop computers to smartphones and tablets.
Media queries are introduced using the @media rule, followed by a set of conditions enclosed
in parentheses. If the conditions in the parentheses are true, the CSS rules within the media
query block will be applied. Here's the basic structure:
@media (condition) {
/* CSS rules for the specified condition */
}
Example 1: Adjusting Font Size for Smaller Screens:
/* Default styles for all screen sizes */

p{
font-size: 16px;
}
/* Media query for screens with a maximum width of 768px */
@media (max-width: 768px) {
p{
font-size: 14px;
}
}
In this example, paragraphs will have a font size of 16px by default. However, for screens with a
maximum width of 768px (typically smaller screens like smartphones and tablets), the font size
is reduced to 14px.
Example 2 :Changing Layout for Different Screen Widths:
/* Default styles for wider screens */

.container {
width: 960px;
margin: 0 auto;
}
/* Media query for screens with a maximum width of 768px */
@media (max-width: 768px) {

.container {
width: 100%;
padding: 10px;
}
}
In this example, the .container element has a fixed width and is horizontally centered for wider
screens. For screens with a maximum width of 768px or less, the container's width is set to
100%, and padding is added for better spacing.
Media queries are incredibly versatile, allowing you to tailor your website's design and layout to
fit the characteristics of different devices and screens. They are a fundamental tool for creating
responsive and user-friendly web designs.

css_notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

css_notes

Uploaded by

Copyright:

Available Formats

CSS

CSS stands for Cascading Style Sheet.

NOTE: The first priority is inline CSS

if, <style> </style>

Each pseudo element selectors is declared with the double colon : :

Dynamic Pseudo Classes

Structural Pseudo Classes

Dynamic Pseudo Classes

Structural Pseudo Classes: The Structural Pseudo Class selectors is used to

Example: div p : first-child{

Example: div p : last-child{

Example: div p : nth-child(2){

Example: input : first-of-type{

Example: input : last-of-type{

Example: input : nth-of-type(n){

Syntax: padding: 10px ;

Formatting text properties:

color- changes the text color

text-transform- converts the text-letter format(UPPERCASE, lowercase,

text-shadow- it allows 4 values they are x-direction y-direction opacity and

text-decoration- underline, overline, line-through

letter-spacing- to get the space between letters of a text we use it

word-spacing- to get the space between words of a text we use it

text-indent- it'll be saying from where the text should start.

Background Styling Properties

background-color: The background-color property sets the background color of

background-position: The background-position property sets the starting

background-repeat: The background-repeat property sets if/how a background

background-size: The background-size property specifies the size of the

Why ? *{Padding:0, margin:0 , box-sizing: border-box;}

Resetting Default Styles: Browsers apply default styles to various HTML

Consistency: Setting padding: 0 and margin: 0 to all elements eliminates any

Box Sizing: The box-sizing: border-box property ensures that an element's

flex-wrap: wrap, nowrap, wrap-reverse.

translate, scale, rotate, and skew.

transform: translate(x, y);

transform: scale(x, y);

transform: skew(x-angle, y-angle);

transform: translate(50px, 20px) rotate(45deg) scale(1.5);

Keyframes and animations:

Common Animation Properties:

animation-name: Specifies the name of the keyframes you want to use.

animation-timing-function: Defines the timing function to control the acceleration and

Example 1: Adjusting Font Size for Smaller Screens:

/* Default styles for all screen sizes */

Example 2 :Changing Layout for Different Screen Widths:

/* Default styles for wider screens */

/* Media query for screens with a maximum width of 768px */

@media (max-width: 768px) {

You might also like