This lecture provides the basics of CSS and its properties

1. Web Programming
SYED SHAHZAIB SOHAIL

2. Lecture 6
CSS Basics

3. Contents
• CSS Colors
• CSS Backgrounds
• CSS Margins
• CSS Padding
• CSS Height/Width

4. CSS Colors
• Colors are specified using predefined color names or RGB, HEX, RGBA, HSL,
HSLA values.
• In HTML, a color can be specified by using a color name.

5. Continued…
• Background Color
• You can set the background color for HTML element
<h1 style=“background-color: red;”>HelloWorld</p>
<p style=“background-color: tomato;”>Paragraph</p>
• Text Color
• You can set the color of text
<h1 style=“color: green;”>HelloWorld</p>
<p style=“color: tomato;”>Paragraph</p>

6. Continued…
• Border Color
• You can set the color of borders
<h1 style=“border-color: DodgerBlue;”>Hello World</p>
<p style=“border-color: tomato;”>Paragraph</p>
• ColorValues
• In HTML, colors can also be specified using RGB, HEX , RGBA, HSL, HSLA values
• Same as color name “Tomato”:
• Rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%)
• Rgba(255, 99, 71, 0.5), hsla(9, 100%, 64%, 0.5)

7. CSS Backgrounds
• The CSS background properties are used to define the background effects for
elements.
• CSS Background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

8. Continued…
• BackgroundColor
• The background-color property specifies the background color of an element
• Background Image
• The background-image property specifies an image to use as the background of an
element
• By default, the image is repeated so it covers the entire element

9. Continued…
• Background Image – Repeat Horizontally orVertically
• By default, the background-image property repeats an image both horizontally and
vertically
• Some images should be repeated horizontally or vertically or they will look strange.
• Background-repeat property has following values:
• repeat
• repeat-x
• repeat-y
• no-repeat

10. Continued…
• Background Image – Set Position
• The background-position property is used to specify the position of the background
image
• Background-position property has following values
• Top
• Right
• Bottom
• Left

11. Continued…
• Background Image – Fixed or Scroll?
• The background-attachment property specifies whether the background image should
scroll or be fixed

12. Continued…
• Background – Shorthand property
• The shorthand property for background is background
background: background-color, background-image, background-repeat, background-attachment,
background-position;

13. CSS Margins
• The CSS margin property is used to create space around elements, outside of any
defined borders
• With CSS, you have full control over the margins.There are properties for setting
the margin for each side of an element (top, right, bottom, left)
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left

14. Continued…
• All the margin properties can have the following values:
• auto – the browser calculates the margin
• length – specifies a margin in px, pt, cm etc
• % - specifies a margin in % of the width of the containing element
• inherit – specifies that the margin should be inherited from the parent element
• Margin – Shorthand Property
• The margin property is a shorthand property for all individual margin properties
margin: 100px 50px 75px 100px;
margin: 100px 50px 75px;
margin: 25px 100px;
margin: 50px;

15. Continued…
• The auto value
• You can set the margin property to auto to horizontally center the element within its
container
• The element will then take up the specified width and the remaining space will be split
equally between the left and right margins
• Margin Collapse
• Top and bottom margins of elements are sometimes collapsed into a single margin
that is equal to the largest of the two margins.
• This doesn’t happen on left and right margins

16. CSS Padding
• The CSS padding property is used to generate space around an element’s
content, inside of any defined borders
• With CSS you have full control over the padding.There are properties for
setting the padding for each side of an element (top, right, bottom, left)
• CSS has properties for specifying the padding for each side of element
• padding-top
• padding-right
• padding-bottom
• padding-left

17. Continued…
• All the padding properties can have the following values:
• auto – the browser calculates the padding
• length – specifies a padding in px, pt, cm etc
• % - specifies a padding in % of the width of the containing element
• inherit – specifies that the padding should be inherited from the parent element
• Padding – Shorthand Property
• The padding property is a shorthand property for all individual padding properties
padding: 100px 50px 75px 100px;
padding: 100px 50px 75px;
padding: 25px 100px;
padding: 50px;

18. Continued…
• Padding and Element Width
• The CSS width property specifies the width of the element’s content area
• The content area is the portion inside the padding, border and margin of an element
• So, if an element has a specified width, the padding added to that element will be added to
the total width of the element
div {width: 100px; padding: 25px;}
• To keep the width at 100px, no matter the amount of padding, you can use the box-sizing
property.This causes the element to maintain its width; if you increase the padding the
available content space will decrease
div {width: 100px; padding: 25px; box-sizing: border-box;}

19. CSS Height/Width
• Used to set the height & width of an element
• Height & width can be set to auto (browser calculates the height & width)
• Height & width can be defined in terms of px, %, cm etc
• Note: The height & width properties do not include padding, borders or
margins

20. Continued…
• There are some height/width properties namely
• max-height (sets the maximum height of an element)
• max-width (sets the maximum width of an element)
• min-height (sets the minimum height of an element)
• min-width (sets the minimum width of an element)
• All the properties can be set as auto, px, %, cm etc