Scribd
Upload
5 views

5.2 Advance CSS

Uploaded by

makeh71663
Copyright
© © All Rights Reserved
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
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