Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
11 views

CSS Notes

Uploaded by

Dheerendra Purohit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

CSS Notes

Uploaded by

Dheerendra Purohit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

TRAINER

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

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>

NOTE: The first priority is inline CSS


But the priorities of the Internal and External CSS varies accordingly depending
on the declared position
TRAINER

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{
TRAINER

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{
TRAINER

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;}
TRAINER

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.
TRAINER

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;
TRAINER

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;
}
TRAINER

Pseudo Classes
There are three types of Pseudo Classes.
1. Dynamic Pseudo Classes.
2. User Interface Pseudo Classes.

Dynamic Pseudo Classes


 Link
 Visited
 Hover
 Active
 Focus

User Interface Pseudo Classes


 Enabled
 Disabled
 Checked

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

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 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.
TRAINER

Example:
a : link {
color: aqua;
background-color : red;
}

a : visited {
color : green;
}

a : hover {
color : yellow;
}

a : active {
color : chocolate;
}

User Interface Pseudo Classes: The UI pseudo classes is used to style the HTML
element in the case of user input.

Enabled: The enabled pseudo class enables the properties to the user input
field with the specific style only if the field is available to take user input.
Example: input : enabled{
color: blueviolet;
background-color: aqua;
}

Disabled: The disabled pseudo class styles with the specific properties to the
user for which the input type is disabled.
Example: input : disabled{
color:white;
background-color: gray;
}

Checked: The checked pseudo class styles with the outline property to radio
and checkbox.
TRAINER

Example: input : checked{


outline: 2px solid blue;
}

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;
TRAINER

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 Specifies the background color to be used.

background-image Specifies ONE or MORE background images to be


used.
background-image: url('paper.gif');
background-image: url('img_tree.gif'), url('paper.gif');
background-image: conic-gradient(red, yellow, green);
background-image: linear-gradient(red, yellow, blue);
background-image: radial-gradient(red, green, blue);
background-image: repeating-conic-gradient(red 10%, yellow 20%);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

background-position Specifies the position of the background images.


background-position: left top;
background-position: left bottom;
background-position: right top;
background-position: right bottom;
background-position: top;
background-position: bottom;
TRAINER

background-position: left;
background-position: right;
background-position: 10% 40%;
background-position: 50px 100px;

background-size Specifies the size of the background images.


background-size: auto;
background-size: contain;
background-size: cover;
background-size: 50%;
background-size: 30px;
background-size: 60px;

background-repeat Specifies how to repeat the background images.


background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

background-origin Specifies the positioning area of the background


images
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

background-clip Specifies the painting area of the background imag


background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-attachment Specifies whether the background images are fixed


or scrolls with the rest of the page
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
local The background image will scroll with the element's contents
TRAINER

CSS GRADIENTS
CSS defines three types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)


Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

Linear Gradients
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: to top, to bottom, to left, to right,
and in degree:
0deg ->to top
90deg ->to right
180deg ->to bottom
270deg ->to left

Repeating a linear-gradient
The repeating-linear-gradient()
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

Radial Gradient
background-image: radial-gradient(shape size at position, start-color, ..., last-
color);
background-image: radial-gradient(circle, red, yellow, green);
shape:circle, ellipse

The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner

background-image: radial-gradient(closest-side at 10% 15%, red, yellow, black);

Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
TRAINER

Conic Gradient With Specified From Angle


background-image: conic-gradient(red, yellow, green);
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);

The [from angle] specifies an angle that the entire conic gradient is rotated by.
The following example shows a conic gradient with a from angle of 90deg:
background-image: conic-gradient(from 90deg, red, yellow, green);
background-image: conic-gradient(at 60% 45%, red, yellow, green);

Repeating a Conic Gradient


The repeating-conic-gradient() function is used to repeat conic gradients:
background-image: repeating-conic-gradient(red 10%, yellow 20%);
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg
20deg, blue 20deg 30deg);

Height and Width properties

The CSS height and width properties are used to set the height and width of
an element.
The height and width properties do not include padding, borders, or margins.
It sets the height/width of the area inside the padding, border, and margin of
the element.

The height and width properties may have the following values:

 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm, etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value

The CSS height and width properties are:

 Height
TRAINER

 Width
 Max-height
 Max-width
 Min-height
 Min-width

Max-height

Sets the maximum height of an element.

If the content is larger than the maximum height, it will overflow. So to


handle the content overflow we go for overflow property.

If the content is smaller than the maximum height, the max-height property
has no effect.

Note: This prevents the value of the height property from becoming larger
than max-height. The value of the max-height property overrides the height
property.

Max-width

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change
the height of the element.

If the content is smaller than the maximum width, the max-width property
has no effect.

Note: This prevents the value of the width property from becoming larger
than max-width. The value of the max-width property overrides the width
property.

When the width exceeds the view port of the browser the horizontal scroll
bar is added.

Using max-width instead, in this situation, will improve the browser's


handling of small windows.
TRAINER

Min-height

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will
be applied.

If the content is larger than the minimum height, the min-height property
has no effect.

Note: This prevents the value of the height property from becoming smaller
than min-height.

Min-width

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be
applied.

It must be included with the property display : inline-block

If the content is larger than the minimum width, the min-width property has
no effect.

Note: This prevents the value of the width property from becoming smaller
than min-width.

Transition Properties

transition-property: Specifies the name of the CSS property to which the


transition is applied.

transition-duration: Specifies the duration of the transition process form


the old value to the new value.

transition-timing-function: Describes how the intermediate values used


during a transition will be calculated.

transition-delay: Defines when the transition will start. It allows a


transition to begin execution some period of time from when it is applied.
TRAINER

Transform Properties

The transform property applies a 2D or 3D transformation to an element. This


property allows you to rotate, scale, move, skew elements.

 rotate and skew should be declared in terms of degrees.

 scale should be declared in terms of integer.

Syntax: transform: rotate(30deg);

CSS Animation

CSS Animation is used to animate HTML elements from one style to another style.

Without java script we can give 5% and 10% of functionality to the web pages through CSS
animation.

We have following animation property:

 animation-name: it is an identifier which means name of the animation.

 animation-duration: Specifies the time in seconds to perform the animation only till
that specified period of time.

 animation-iteration-count: Specifies the number of times the animation should


perform.

 animation-timing-function: Specifies the mode of transform in animation. The values


are ease-in, ease-out, ease-in-out.

We can animate the HTML element through keyframes

Syntax: @keyframes animation_name{

0%{ property:value;}

25%{ property:value;}

50%{ property:value;}

100%{ property:value;}

}
TRAINER

This specifies that at 0% at the given animation-duration the particular task should be
performed, at 25% at the given animation-duration the particular task should be performed,
so on.

Flex and Grid

The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.

A Flexible Layout must have a parent element with the display property set to flex.

Ex: div {
display: flex;
}

The flex-container properties are

 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

flex-direction: column, row, column-reverse, row-reverse

flex-wrap: wrap, nowrap, wrap-reverse

flex-flow: row wrap

justify-content: center, flex-start, flex-end, space-around, space-between

align-items: center, flex-start, flex-end, stretch, baseline.

align-content: space-between, space-around, stretch, center, flex-start, flex-end.


TRAINER

You might also like