AchieversIT1
Uploaded by
55 SLIDES
551 VIEWS
550LIKES

CSS3 PPT

DESCRIPTION

Learn Social Media Marketing Course from AchieversIT in Bangalore. Why youu should you learn Social media in 2021, because most demaned jobs nn every business. In this course we will teach you all concepts of social media in depth knowledge with practical. such as (facebook, Instagram, Pinterest, LinkeDin, and so on.). We give you 100% placement, woking on Real-time Projects, affordable fees with 3 installment. We providesClass Room / Online Sessions, 200 hour course, Assignments, 24 x 7 Expert Support.

1 / 55

Download Presentation

CSS3 PPT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. https://www.achieversit.com

  2. https://www.achieversit.com

  3. https://www.achieversit.com

  4. https://www.achieversit.com

  5. https://www.achieversit.com

  6. HOW CSS WORKS https://www.achieversit.com

  7. Advantage Of CSS What are advantages of CSS ? 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. https://www.achieversit.com

  8. Disadvantage 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. https://www.achieversit.com

  9. TYPES OF CSS https://www.achieversit.com

  10. Types of CSS Example:- https://www.achieversit.com

  11. SELECTORS 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. https://www.achieversit.com

  12. TYPES OF SELECTORS Achievers IT https://www.achieversit.com

  13. ELEMENT SELECTOR https://www.achieversit.com

  14. ID SELECTOR (#) WHAT IS ID SELECTOR (#) ? • 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. https://www.achieversit.com

  15. Achievers IT https://www.achieversit.com

  16. CLASS 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. https://www.achieversit.com

  17. Achievers IT https://www.achieversit.com

  18. ID V/S CLASS https://www.achieversit.com

  19. COMBINATORS https://www.achieversit.com

  20. DESCEDANT SELECTOR https://www.achieversit.com

  21. CHILD SELECTOR (>) https://www.achieversit.com

  22. ADJACENT SIBLING (+) https://www.achieversit.com

  23. GENERAL SIBLING (~) general general https://www.achieversit.com

  24. UNIVERSAL SELECTOR (*) WHAT IS UNIVERSAL SELECTOR (*)? The universal selector (*) selects all HTML elements on the page. https://www.achieversit.com

  25. AchieversIT https://www.achieversit.com

  26. GROUPING SELECTOR WHAT IS GROUPING SELECTOR ? • The grouping selector selects all the HTML elements with the same • style definitions. https://www.achieversit.com

  27. Achievers IT https://www.achieversit.com

  28. ATTRIBUTE SELECTOR The [attribute] selector is used to select elements with a specified attribute. https://www.achieversit.com

  29. AchieversIT https://www.achieversit.com

  30. https://www.achieversit.com

  31. PSEUDO CLASSES • 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. https://www.achieversit.com

  32. PSEUDO ELEMENTS • 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. https://www.achieversit.com

  33. BOX MODEL https://www.achieversit.com

  34. 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. Explanation of the different parts: 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 https://www.achieversit.com

  35. CREATING LAYOUT FLOAT :- 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 https://www.achieversit.com

  36. 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. https://www.achieversit.com

  37. FLEX :- • Flex box is largely a one- • dimensional system https://www.achieversit.com

  38. 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. https://www.achieversit.com

  39. https://www.achieversit.com

  40. POSITIONS 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. https://www.achieversit.com

  41. 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: https://www.achieversit.com

  42. 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. https://www.achieversit.com

  43. 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. https://www.achieversit.com

  44. 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. https://www.achieversit.com

  45. 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. https://www.achieversit.com

  46. 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. https://www.achieversit.com

  47. Transforms The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. https://www.achieversit.com

  48. Rotate The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. Scale The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). Skew 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), and skew elements. The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). https://www.achieversit.com

  49. Translate The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). Matrix • 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. https://www.achieversit.com

  50. Transitions 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. Transition Property 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). Values transition-property: none |all |property |initial | inherit; https://www.achieversit.com

More Related