Advance CSS Properties

Prepared By:
Sonia Narang
 CSS Grouping
• Grouping in CSS is a technique used to reduce
code redundancy and write clean, concise
easy to follow code. There are going to be
many instances in which multiple CSS
selectors will have the same declarations. In
these cases, you can group all the selectors
together and write the declarations only one
time.
 CSS Grouping
For example, if you want to apply the exact same font size and
color to three different headings you can write it as shown
below. However, this is a waste of space.
h1{
font-size: 10px;
color: green;
}
h2{
font-size: 10px;
color: green;
}
h3{
font-size: 10px;
color: green;
}
CSS grouping can be used to condense code that has multiple selectors with
the same declarations. This makes code easy to read and maintain. Also
development time is significantly reduced as there is less code to write. Page
load times are reduced as well when using grouping.
 CSS Display Property
• Display property in CSS defines how the
components(div, hyperlink, heading etc) are going
to be placed on the web page. As the name
suggests, this property is used to define the
display of the different parts of a web page.

• There are mainly four types of display properties

<style>
#BlkPro{
height: 100px;
width: 200px;
background: teal;
display: block;
}
</style>
 CSS Display Property
• Inline: This property is the default property of anchor
tags. This is used to place the div inline i.e. in a
horizontal manner. The inline display property
ignores the height and the width set by the user.

<style>
#main{
height: 200px;
width: 200px;
background: teal;
display: inline;
}
</style>
 CSS Display Property
• Inline-block: This features will align the div both in block and
inline fashion. So, this property aligns the div inline but the
difference is it can edit the height and the width of block.
• None: This property hides the div or the container which use
this property. Using it on one of the div it will make working
clear.
<style> <style>
#main{ #main1{
height: 100px; height: 100px;
width: 200px; width: 200px;
background: teal; background: cyan;
display: inline-block;
} display: none;
</style> }
</style>
 CSS Float Property
• The CSS float property defines that an element
should be taken out of the normal flow of the
document and placed along the left or right side of
its containing block. Text and inline elements will
then wrap around this element.
 CSS Float Property
img
{
float: left;
width: 200px;
height: 150px;
}
• The CSS float property defines that an element should be taken
out of the normal flow of the document and placed along the left
or right side of its containing block. Text and inline elements will
then wrap around this element.
#footer
{
clear: both;
}
 Web Workers
• The JavaScript code that you write will usually execute in a
single thread. A thread is like a big todo list. Each statement
that you write is added to the list as a task and the browser
works its way through this list executing each task one at a
time. The problem with a single-threaded architecture is that
if a particular task takes a long time to complete everything
else is held up until that task finishes. This is known
as blocking. In the world of client-side JavaScript applications,
using a single-threaded architecture can lead to your app
becoming slow or even completely unresponsive.
 Web Workers
• When executing scripts in an HTML page, the page
becomes unresponsive until the script is finished.
• A web worker is a JavaScript that runs in the
background, independently of other scripts, without
affecting the performance of the page. You can
continue to do whatever you want: clicking, selecting
things, etc., while the web worker runs in the
background.
• Web Workers provide a facility for creating new
threads for executing your JavaScript code in.
Effectively creating a multi-threaded architecture in
which the browser can execute multiple tasks at once.
Creating new threads for handling large tasks allows
you to ensure that your app stays responsive and
doesn’t freeze up.
 CSS Pseudo-class
• A CSS pseudo-class is a keyword added to a
selector that specifies a special state of the
selected element(s). For example, :hover can be
used to change a button's color when the user's
pointer hovers over it.
• Pseudo-classes let you apply a style to an
element not only in relation to the content of the
document tree, but also in relation to external
factors like the history of the navigator (:visited,
for example), the status of its content
(like :checked on certain form elements), or the
position of the mouse (like :hover, which lets you
know if the mouse is over an element or not).
CSS Pseudo-class
Vertical Navigation Bar Examples
Create a basic vertical navigation bar with a gray background color and change the
background color of the links when the user moves the mouse over them:
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list
items.

Output
Floating List Items
Another way of creating a horizontal navigation bar is to float the <li> elements, and
specify a layout for the navigation links:
Output
Output
Image Sprites - Create a Navigation List
We want to use the sprite image ("img_navsprites.gif") to create a
navigation list.
We will use an HTML list, because it can be a link and also supports
a background image:
Example explained:
•#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
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') -91px 0;} - Defines the background image
91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line
divider )