CSS3 Attributes and Selectors training Videos for Begimmer

1
CSS3 Attributes and Selectors Training Videos for
Beginners by
2
Highlights

• Backgrounds and Color Gradients
• Color and Gradient Properties
• Setting Background Color and Background Image
• Scrolling a Background Image
• Type Selector

3
Backgrounds and Color Gradients

• Backgrounds impact the appearance of a websites.
• Developers can keep color or image or gradient
  in the backgrounds.
•  Gradients are the combination of two or more
  specific colors.
• Gradients consume less bandwidth and look better
  when zoomed.
• Linear and Radical are the types of gradients.

4
Color and Gradient Properties

• CSS3 supports various colors, they are RGBA
  colors, HSL colors, HSLA colors and opacity.
• RGBA color values are an extension of RGB color
  values with an alpha channel.
• Hue Saturation and Lightness(HSL), Hue is a
  degree that display red on 360, green on 120,
  blue on 240 degrees.
• Saturation and Lightness are the percentage
  values that shows full color on 100 and dark
  black color on 0.
• HSLA color values are an extension of HSL color
  values with an alpha channel.

5
Color and Gradient Properties

• Opacity property sets background color and text
  to be transparent. Color visibility changes
  between 0.0 and 1.0 values.
• For linear gradient developers must mention at
  least two color stops.
• Syntax background linear-gradient(direction, col
  or-stop1, color-stop2, ...)
• Linear gradients color can set to from right-left
  or left-right, top-bottom or bottom-top or
  diagonal.
• radial gradient is definite with its center.
• Syntax background radial-gradient(shape
  size at position, start-color, ..., last-color)

6
Setting Background Color and Background Image

• background-color property use to specify the
  background color of elements.
• Syntax body  background-color light pink
  
• background-image property uses to keep an image
  as the background of element.
• Syntax body  background-image url(image.png")
  
• We can keep images horizontally or vertically and
  can also repeat the images in the backgrounds
  with specific sizes.       

7
Scrolling a Background Image

• Background-attachment property is uses to keep
  images either as fixed or can be scroll in the
  background.
• It has five properties, they are fixed, scroll ,
  local, initial and inherit.
• Fixed property keep the image fix, scroll
  property make the image scrollable and local
  makes images scrollable with page content.
• Syntax body   background-image url('w3css.gif')
  background-attachment scroll
• scroll is default value of background-attachment.
       

8
Type Selector

• Type selectors select the HTML element on a page,
  regardless of position in the document tree.
• Syntax element style properties
• EX ef color red
• The above example is selects all the ef named
  elements from the entire document.

9
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
10
Thank you
Thank You for Watching CSS3 Attributes and
Selectors Training Videos for Beginner by
http//www.courseing.com