CSS3 PPT.pptx

https://www.achieversit.com
The main advantage of CSS is that style is
applied consistently across variety of sites. One
instruction can control several areas which is
advantageous. Web designers needs to use few
lines of programming for every page improving
site speed.
What are advantages of CSS ?

Design services are required to consider and test all CSS codes
across different browsers for compatibility. Due to developers
testing compatibility for different browsers, their workload
increases. Overall, we can say that if you are passionate about web
development, try to learn HTML and CSS.

Example:-

What is Selector?
A CSS selector is the first part of a CSS Rule. It is a pattern of
elements and other terms that tell the browser which HTML
elements should be selected to have the CSS property values
inside the rule applied to them.

Achievers IT

•The id selector uses the id attribute of an
HTML element to select a specific element.
•The id of an element is unique within a page,
so the id selector is used to select one
unique element!
•To select an element with a specific id, write
a hash (#) character, followed by the id of the
element.
WHAT IS ID SELECTOR (#) ?

WHAT IS CLASS SELECTOR (.)?
class selector selects elements with a
specific class attribute. To select elements
with a specific class, write a period (.)
character, followed by the name of the class.
You can also specify that only specific HTML
elements should be affected by a class.

general
general

WHAT IS UNIVERSAL SELECTOR (*)?
The universal selector (*) selects all HTML elements on the page.

WHAT IS GROUPING SELECTOR ?
•The grouping selector selects all the HTML elements with the same
style definitions.

The [attribute] selector is used to select elements with
a specified attribute.

A pseudo-class is used to define a
special state of an element.
For example, 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.

A CSS pseudo-element is used to style specified
parts of an element.
For example, it can be used to:
•Style the first letter, or line, of an element.
•Insert content before, or after, the content
of an element.

 In CSS, the term "box model" is used when talking about design and layout.
 The CSS box model is essentially a box that wraps around every HTML element. 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
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Explanation of the different parts:

The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
The float property can have one of the following values:
•left - The element floats to the left of its container
•right - The element floats to the right of its container
•none - The element does not float (will be displayed just where it occurs in
the text). This is default
•inherit - The element inherits the float value of its parent
FLOAT :-

FLEX :-
The flex property is a shorthand property
for:
•flex-grow
•flex-shrink
•flex-basis
The flex property sets the flexible length
on flexible items.
Note: If the element is not a flexible item,
the flex property has no effect.

FLEX :-
Flex box is largely a one-
dimensional system

GRID :-
 The CSS Grid Layout Module offers a grid-
based layout system, with rows and
columns, making it easier to design web
pages.
CSS Grid Layout is a two-dimensional
system, meaning it can handle both
columns and rows. Grid layout is
intended for larger-scale layouts which
aren’t linear in design.

The position property specifies the type of positioning method used for an
element.
There are five different position values:
static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right
properties.
However, these properties will not work unless the position property is set
first. They also work differently depending on the position value.

Static Position
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom,
left, and right properties.
An element with position: static; is not positioned in any special
way; it is always positioned according to the normal flow of the
page:

Relative Position
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element
will cause it to be adjusted away from its normal position. Other content will not be
adjusted to fit into any gap left by the element.

Fixed Position
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. A fixed element does not leave a gap in the
page where it would normally have been located.

Absolute Position
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page
scrolling.
Note: Absolute positioned elements are removed from the normal
flow, and can overlap elements.

Sticky Position
An element with position: sticky; is positioned based on the
user's scroll position.
A sticky element toggles between relative and fixed, depending
on the scroll position.
It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position: fixed).
Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit-
prefix (see example below). You must also specify at least one
of top, right, bottom or left for sticky positioning to work.

Typography
Typography is all about style, proportions, and spacing. Good typography is not only
imperative for aesthetic appeal, but it also improves site usability when text legibility
and readability concepts are applied.
Typography is also about emotion. Do the letters complement your content, or contradict it?
Even when typography is applied to the same text, it can make different people feel different
things. Therefore, being deliberate about typography lets us control these feelings.

Transforms
The transform property applies a 2D or 3D transformation to an element.
This property allows you to rotate, scale, move, skew, etc., elements.

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the
Y-axis).
The rotate() method rotates an element clockwise or counter-clockwise
according to a given degree.
The scale() method increases or decreases the size of an element
(according to the parameters given for the width and height).
The skew() method skews an element along the X and Y-axis by the
given angles.
The matrix() method combines all the 2D transform methods into one.
The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate),
Rotate
Scale
Skew

The translate() method moves an element from its current position
(according to the parameters given for the X-axis and the Y-axis).
The matrix() method combines all the 2D transform methods into one.
The matrix() method take six parameters, containing mathematic
functions, which allows you to rotate, scale, move (translate), and skew
elements.
Translate
Matrix

The transition property is a shorthand property for:
transition-property
transition-duration
transition-timing-function
transition-delay
Note: Always specify the transition-duration property, otherwise the duration
is 0s, and the transition will have no effect.
Transitions
The transition-property property specifies the name of the CSS property the transition effect is
for (the transition effect will start when the specified CSS property changes).
Transition Property
transition-property: none |all |property |initial | inherit;
Values

Transition-Duration
The transition-duration property specifies how many seconds (s) or milliseconds
(ms) a transition effect takes to complete.
transition-duration: time | Initial | inherit;
Values
Transition-timing
The transition-timing-function property specifies the speed curve of the transition effect.
This property allows a transition effect to change speed over its duration.
transition-timing-function: linear |ease | ease-in | ease-out | ease-in-out | step-start | step-
end|steps(int,start|end)|cubic-bezier(n,n,n,n) | initial | inherit;
Values
Transition-delay
The transition-delay property specifies when the transition effect will start.
The transition-delay value is defined in seconds (s) or milliseconds (ms).
transition-delay: time | initial | inherit;
Values

The opacity property specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Responsive web design makes your web page look
good on all devices.
Responsive web design uses only HTML and CSS.
What is Responsive Web Design?

What is a Media Query?
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition
is true.
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up) */
/* Extra large devices (large laptops and desktops, 1200px and up) */
Example

info@achiversit.com

CSS3 PPT.pptx

More Related Content

Similar to CSS3 PPT.pptx

More from AchieversIT

Recently uploaded

CSS3 PPT.pptx