Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next

Share

Introduction to CSS3

A brief introduction to CSS3.
Covered:
1) CSS Syntax
2) CSS vs CSS3
3) Cascading
4) Specificity
5) CSS Inheritance
6) CSS Box Model

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Introduction to CSS3

  1. 1. Cascading Style Sheets 3 (CSS3)
  2. 2. What’s CSS? > CSS Stands for Cascading Style Sheets. > It describes how HTML elements are to be displayed on screen, paper, or in other media. > External style sheets are stores in a (.css) file. > Checkout same page, different style sheets here, https://www.w3schools.com/css/css_intro.asp Why CSS? > CSS defines styles for our website. Everything will look weird if we don’t style our web pages. > Imagine living in a building without its wall being painted! > Moreover, we all want our customers / visitors to spend some time on the website instead of just closing them at once. Well, to stop them and gain their first impression as the best one, we need to have some awesome styles for the web page! Where would you want to go is why you want to use CSS!
  3. 3. CSS Syntax CSS Selectors That’s how we style it! 30 CSS Selector you must memorize: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
  4. 4. CSS vs CSS3 > Pseudo Classes (Limited) [selector]:pseudo-class{ // CSS Code here } E.g.: :first-child > No support for animations. Animations were added using JavaScript & jQuery (a JavaScript library). > Before CSS3 developers used to develop images that looked like rounded corners. > Not compatible with CSS3 > Much more pseudo classes E.g.: :nth-child() :root :empty > Supports text shadow > Supports animations > Supports border-radius & gradient > Backward Compatible to CSS > They load faster and time required to write them is lesser as compared to that of CSS.
  5. 5. Cascading Specificity Inheritance What do you think h1 will be colored as? Cascading means that the order of CSS rules matter. When two rules apply that have equal specificity, the latter one will be used. Specificity basically is a measure of the CSS rule priority. In simple words, it is how the browser decides which rule applies if multiple rules have different selectors Here, class has greater specificity than the HTML tag itself [Rule] Some CSS property values set on parent elements are inherited by their child elements, and some aren't. For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them. Some properties do not inherit — for example if you set a width of 50% on an element, all of its descendants do not get a width of 50% of their parent's width. Which properties are inherited by default and which aren't is largely down to common sense.
  6. 6. Controlling CSS Inheritance - ( inherit, initial, unset, revert, all ) Takes computed value from the parent. Sets a property to its initial value defined on a per-property basis by the CSS specifications.. Sets a property to its inherited value if it inherits, or to its initial value if not. https://jsbin.com/sayodab/1/edit?html,css,output New additions: > revert : It resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent stylesheet (or by user styles, if any exist). User Agent Style sheets simply refer to the default styles that browsers apply to web pages. > all : Can be used to apply one of these inheritance values to (almost) all properties at once. https://jsbin.com/livugin/1/edit?html,css,output # Unset vs Revert (Important) https://jsbin.com/famagez/2/edit?html,css,output Not same
  7. 7. More on Cascade Source Order If you have more than one rule, which has exactly the same weight, then the one that comes last in the CSS will win. Specificity 1) Inline Style - 1000 2) Id selector - 100 3) Class selector (.class, [attributes], :pseudo-class, :hover, :focus, etc.) - 10 4) Element / Tag & Pseudo Elements (h1, :pseudo-elements, :before, :after, :first-element, etc.) - 1 5) :not, * - 0 6) !important - 10,000 Note: 1) The universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect on specificity. 2) Inline > Internal > External 101 100 11
  8. 8. CSS Box Model - 1 > Normal : Inline Block > The box will not break into new line. > Width & height properties will not apply. > Only horizontal paddings, margins and borders will apply and will cause other boxes to move away from them. > Vertical padding won’t apply. https://jsbin.com/zexolib/2/edit?html,css,output > E.g. <a>, <span>, <em>, <strong>, etc. > The box will break into new line. > Width & height properties are respected. > Will cover at max 100% by default. > All padding, margin and borders will cause other boxes to move away. > E.g. <div>, <h1>, <p>, etc. > Not Normal : Flex > When flex is set, the outer display turns to block but the inner display is set to flex. > Inline Flex
  9. 9. CSS Box Model - 2 Standart Box Model Alternative Box Model > In this model, the content area of box = (total-width of box - border / padding). > Can be set via: box-sizing: border-box > Applying everywhere only once: > Default > total width = content-area of box > padding & border are added separately. > Can be set via: box-sizing: content-box
  10. 10. You know where to find me! webcrat.tech@gmail.com PS. Keep the subject line as: [ Web Dev BootCamp ‘ 20 ] Github @webber2408 LinkedIn @rahul-sharma-25b30b114 Medium @webcrat.tech
  11. 11. References > Amazon.com > Undraw.co > Icons made by Freepik from www.flaticon.com > MDN (HTML): https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started > MDN (CSS - Important): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks > W3Schools: https://www.w3schools.com/html/ > HTML Semantics: vikingcodeschool.com/html5-and-css3/html5-semantic-tags > WikiPedia: https://en.wikipedia.org/wiki/Semantic_HTML

A brief introduction to CSS3. Covered: 1) CSS Syntax 2) CSS vs CSS3 3) Cascading 4) Specificity 5) CSS Inheritance 6) CSS Box Model

Views

Total views

102

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×