Lecture 5 & 6 Advance CSS.pptx for web
- 2. 2 ID & CLASS SELECTORS • ID Selector: The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": • Class Selector: The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a dot "." .center {text-align:center;} It will be used as.. p.center {text- align:center;}
- 3. 3 • Example: <!DOCTYPE html> <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
- 4. 4 GROUPING SELECTORS In style sheets there are often elements with the same style. To avod the code repeating, we can group them. Here is an example to change the size of an image using CSS. CSS DIMENSIONS img.normal { height:auto; } img.big { height:40%; } img.small { height:10%; } <body> <img class="normal" src="logocss.gif" width="95" height="84" /><br /> <img class="big" src="logocss.gif" width="95" height="84" /><br /> <img class="small" src="logocss.gif" width="95" height="84" /> </body> CSS code using classes
- 5. 5 CSS DISPLAY AND VISIBILITY The display property specifies if/how an element is displayed. (none, block) Hiding an element can be done by setting the display property to "none" The visibility property specifies if an element should be visible or hidden. Hiding of an element can also be done by setting visibility property to "hidden" Syntax:
- 6. 6 CSS FLOAT With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. If an image is floated to the right, a following text flows around it, to the left Here is example code to float multiple images on a web page. <style type="text/css"> .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> <body> <h3>Image Gallery</h3> <img class="thumbnail" src="klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"> <img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
- 7. 7 POSITIONING ELEMENTS The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be 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 positioning method. There are four different positioning methods. Static Positioning: HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. Fixed positioned elements can overlap other elements.
- 8. 8 Relative Positioning A relative positioned element is positioned relative to its normal position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. Relatively positioned elements are often used as container blocks for absolutely positioned elements. Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>: Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
- 9. Asma Sajid ; College of Computer Science & Information Studies, GCUF 9 All CSS Positioning Properties
- 10. 10 ADDING EFFECTS TO IMAGES (1) • Transparent Image Effect The CSS3 property for transparency is opacity. We can set value for opacity. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.
- 11. 11 ADDING EFFECTS TO IMAGES (2) • Hover Image Effect The first CSS block will be similar to the code in transparency example. In addition, we need to added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it. The CSS for this is: opacity=1. And IE8 and earlier: filter:alpha(opacity=100). When the mouse pointer moves away from the image, the image will be transparent again. • Syntax:
- 12. 12 CREATING IMAGE SPRITES • Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Instead of using three separate images, we use single image. (a.jpg) following example the CSS specifies which part of the “a.jpg" image to show: SYNTAX: <img class="home" src="img_trans.gif" /> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS. width:46px;height:44px; - Defines the portion of the image we want to use background:url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)
- 13. 13 EXAMPLE- STRIPES • Navigation List We will use an HTML list, because it can be a link and also supports a background image. Explanation; #navlist{position:relative;} - position is set to relative to allow absolute positioning inside it #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding is set to 0, list-style is removed, and all list items are absolute positioned. #navlist li, #navlist a{height:44px;display:block;} - the height of all the images are 44px
- 14. 14 • Positioning Now start to position and style for each specific part: #home{left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px #home{background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px) #prev{left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px. #prev{background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider) #next{left:129px;width:43px;}- Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px. #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
- 15. 15 • Adding Hover Effect.. ? We only add three lines of code to add the hover effect: Explanation Since the list item contains a link, we can use the :hover pseudo-class #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} For all three hover images we specify the same background position, only 45px further down