CSS tutorial chapter 2
Download as pptx, pdf1 like183 views
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
More Related Content
What's hot (20)
Similar to CSS tutorial chapter 2 (20)
Recently uploaded (20)
CSS tutorial chapter 2
- 1. Text Shadow • The text-shadow property adds shadow to text. • The following example specifies the position of the horizontal shadow (3px), the position of the vertical shadow (2px) and the color of the shadow (red):
- 2. List-style • Background-fix-position::: • Check example::
- 3. CSS Font CSS Font Families In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial") Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.
- 4. Font Family • The font family of a text is set with the font-family property. • The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. • Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. • Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". • More than one font family is specified in a comma- separated list:
- 5. Font Style • The font-style property is mostly used to specify italic text. • This property has three values: • normal - The text is shown normally • italic - The text is shown in italics • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
- 6. Font size • The font-size property sets the size of the text. Set Font Size With Pixels • Setting the text size with pixels gives you full control over the text size:
- 7. Set Font Size With Em • To allow users to resize the text (in the browser menu), many developers use em instead of pixels. • The em size unit is recommended by the W3C. • 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. • The size can be calculated from pixels to em using this formula: pixels/16=em
- 8. Example • Check the example, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers. • Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it should when made larger, and smaller than it should when made smaller.
- 9. Font Weight • The font-weight property specifies the weight of a font:
- 10. Font Variant • The font-variant property specifies whether or not a text should be displayed in a small-caps font. • In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
- 11. CSS Links • links can be styled differently depending on what state they are in. • The four links states are: • a:link - a normal, unvisited link • a:visited - a link the user has visited • a:hover - a link when the user mouses over it • a:active - a link the moment it is clicked
- 12. Links • When setting the style for several link states, there are some order rules: • a:hover MUST come after a:link and a:visited • a:active MUST come after a:hover
- 13. Text Decoration The text-decoration property is mostly used to remove underlines from links:
- 14. Link Background Color The background-color property can be used to specify a background color for links: Check the example ---
- 15. CSS Borders Border Style • The border-style property specifies what kind of border to display. The following values are allowed: • dotted - Defines a dotted border • dashed - Defines a dashed border • solid - Defines a solid border • double - Defines a double border • groove - Defines a 3D grooved border. The effect depends on the border- color value • ridge - Defines a 3D ridged border. The effect depends on the border-color value • inset - Defines a 3D inset border. The effect depends on the border-color value • outset - Defines a 3D outset border. The effect depends on the border- color value • none - Defines no border • hidden - Defines a hidden border • The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border)
- 16. Border Width • The border-width property specifies the width of the four borders. • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. • The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
- 17. Border Width • The border-width property specifies the width of the four borders. • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. • The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
- 18. Border Color • The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). • EXAMPLE …..
- 19. Border - Individual Sides • In CSS, there is also properties for specifying each of the borders (top, right, bottom, and left):
- 20. Border - Shorthand Property • As you can see from the examples above, there are many properties to consider when dealing with borders. • To shorten the code, it is also possible to specify all the individual border properties in one property. • The border property is a shorthand property for the following individual border properties: • border-width • border-style (required) • border-color
- 21. Border * • Left Border • Right Border • Top border • Bottom border • Rounded Borders The border-radius property is used to add rounded borders to an element: Note: The border-radius property is not supported in IE8 and earlier versions.
- 22. CSS Margins • The CSS margin properties are used to generate space around elements. • The margin properties set the size of the white space outside the border. • With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).
- 23. Margin - Individual Sides • CSS has properties for specifying the margin for each side of an element: margin-top margin-right margin-bottom margin-left 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 Tip: Negative values are allowed. • The following example sets different margins for all four sides of a <p> element:
- 24. Margin - Shorthand Property • To shorten the code, it is possible to specify all the margin properties in one property. • The margin property is a shorthand property for the following individual margin properties: • margin-top • margin-right • margin-bottom • margin-left
- 25. The margin property has four values: • margin: 25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px • margin: 25px 50px 75px 100px; • margin: 25px 50px; • margin: 25px;
- 26. 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: • Check example:
- 27. The inherit Value • This example lets the left margin be inherited from the parent element:
- 28. 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 does not happen on left and right margins! Only top and bottom margins! • Look at the following example:--------
- 29. CSS Padding • The CSS padding properties are used to generate space around content. • The padding clears an area around the content (inside the border) of an element. • With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).
- 30. Padding - Individual Sides • CSS has properties for specifying the padding for each side of an element: • padding-top • padding-right • padding-bottom • padding-left • All the padding properties can have the following values: • 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
- 31. Padding - Shorthand Property • To shorten the code, it is possible to specify all the padding properties in one property. • The padding property is a shorthand property for the following individual padding properties: • padding-top • padding-right • padding-bottom • padding-left
- 32. CSS Height and Width • Setting height and width • The height and width properties are used to set the height and width of an element. • The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.
- 33. Height-width • Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!
- 34. Setting max-width • The max-width property is used to set the maximum width of an element. • The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. • Using max-width instead, in this situation, will improve the browser's handling of small windows. • Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs! • Note: The value of the max-width property overrides width.
- 35. CSS Box Model • All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
- 37. 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 • The box model allows us to add a border around elements, and to define space between elements.
- 38. Width and Height of an Element • Width and Height of an Element • In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. • Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins. Assume we want to style a <div> element to have a total width of 350px: Example-
- 39. • Here is the math: 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px • The total width of an element should be calculated like this: • Total element width = width + left padding + right padding + left border + right border + left margin + right margin • The total height of an element should be calculated like this: • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin • Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.
- 40. CSS Layout - The position Property The position Property • The position property specifies the type of positioning method used for an element. There are four different position values: • static • relative • fixed • absolute
- 41. position: static; • 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:
- 42. position: relative; • 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.
- 43. position: fixed; • 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.
- 44. position: absolute; • 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: A "positioned" element is one whose position is anything except static.
- 45. Overlapping Elements • An element with greater stack order is always in front of an element with a lower stack order. • Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
- 46. Examples • Analysis position with images »