Scribd
Upload
5 views

5.2 Advance CSS

Uploaded by

makeh71663
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

5.2 Advance CSS

Uploaded by

makeh71663
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

ADVANCED

Hands on
CASCADING
STYLE
SHEETS
(CSS)

1
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.center
allows {text-
you to set a particular style for many HTML elements
withalign:center;}
the same class.
▪ TheItclass
will be used as..
selector uses the HTML class attribute, and is defined
p.center
with a dot "." {text-
align:center;} 2
• Example:
<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>

3
GROUPING SELECTORS
▪ In style sheets there are often elements with the same style.
To avod the code repeating, we can group them.

CSS DIMENSIONS
▪ Here is an example to change the size of an image using CSS.

CSS img.normal
code { height:auto; }
using
classes img.big
{ height:40%; }
<body>
img.small
<img class="normal" src="logocss.gif" width="95"
{ height:10%;
height="84" /><br /> }
<img class="big" src="logocss.gif" width="95"
height="84" /><br />
<img class="small" src="logocss.gif" width="95" 4
height="84" />
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“
❖ Every HTML element has a default display value, depending
on what type of element it is. The default display value for
most elements is
• block or
• inline.
❖ The display property is used to change default display
behavior of HTML elements.

▪ 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:

5
BLOCK LEVEL ELEMENTS
• A block-level element ALWAYS starts on a new line and
• takes up the full width available
• (stretches out to the left and right as far as it can).

• Examples of block-level elements:


• <div> - Defines a division or section in an HTML document.
• <p> - Defines a paragraph.
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Defines headings of
different levels.
• <ul> - Defines an unordered list.
• <ol> - Defines an ordered list.
• <li> - Defines a list item.
• <blockquote> - Defines a block of quoted text.
• <pre> - Defines preformatted text, preserving both spaces
and line breaks.
• <hr> - Defines a thematic break between paragraphs.
• <table> - Defines a table.
• <form> - Defines an HTML form for user input.
6
INLINE - ELEMENTS
• An inline element DOES NOT start on a new line and only takes
up as much width as necessary.

• Examples of inline elements:

• <span> - Defines a span of text.


• <a> - Defines a hyperlink.
• <strong> - Defines strong importance, shows as bold.
• <em> - Defines emphasized text, displayed in italic.
• <img> - Defines an image.
• <br> - Defines a line break.
• <input> - Defines an input control.
• <label> - Defines a label for an <input> element.
• <button> - Defines a clickable button.
• <select> - Defines a drop-down list.
• <option> - Defines an option in a <select> element.
7
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

<style <body>
▪ Here is example
type="text/css"> code to float
<h3>Image multiple images on a web page.
Gallery</h3>
.thumbnail <img class="thumbnail" src="klematis_small.jpg"
width="107" height="90">
{ <img class="thumbnail" src="klematis2_small.jpg"
float:left; width="107" height="80">
width:110px; <img class="thumbnail" src="klematis3_small.jpg"
height:90px; width="116" height="90">
margin:5px; <img class="thumbnail" src="klematis4_small.jpg"
} width="120" height="90">
</style> <img class="thumbnail" src="klematis_small.jpg"
8
width="107" height="90">
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.
9
▪ 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.

10
❖Absolutely positioned elements can overlap other elements.
All CSS Positioning Properties

11
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.

12
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:

13
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) 14
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 15
• 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 -16
• 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

17

You might also like