Scribd
Upload
47 views

Advance CSS: by Incapp

The document discusses various CSS positioning and layout properties including: - Grouping and nesting selectors to minimize code and apply styles within other styles. - Using height, width, max-width, min-height properties to control element dimensions and prevent overflow. - The display property and its values (block, inline, inline-block, none) which specify the type of box used for elements. - Positioning methods like relative, absolute, fixed, and static and how they position elements on the page. - The float property which specifies whether elements float or not, commonly used to wrap text around images.

Uploaded by

Ravi Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
47 views

Advance CSS: by Incapp

The document discusses various CSS positioning and layout properties including: - Grouping and nesting selectors to minimize code and apply styles within other styles. - Using height, width, max-width, min-height properties to control element dimensions and prevent overflow. - The display property and its values (block, inline, inline-block, none) which specify the type of box used for elements. - Positioning methods like relative, absolute, fixed, and static and how they position elements on the page. - The float property which specifies whether elements float or not, commonly used to wrap text around images.

Uploaded by

Ravi Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 60

ADVANCE CSS

By incapp
Grouping Selectors
 In style sheets there are often elements with the same style.
 h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
 To minimize the code, you can group selectors.
 Separate each selector with a comma.
 In the example below we have grouped the selectors from the code above:
 h1,h2,p
{
color:green;
}
Nesting Selectors
 It is possible to apply a style for a selector within a selector.
 In the example below, one style is specified for all p elements, and a separate style
is specified for p elements nested within the "marked" class:
 Example
 p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}
Css Dimension
 CSS Height and Width
 The height and width properties are used to set the height and width of an element.
 Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 height: 200px;
 width: 50%;
 background-color: powderblue;
 }
 </style>
 </head>
 <body>

 <h2>Set the height and width of an element</h2>

 <p>This div element has a height of 200px and a width of 50%:</p>

 <div></div>

 </body>
 </html>
Css dimension
 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.
example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 max-width: 500px;
 height: 100px;
 background-color: powderblue;
 }
 </style>
 </head>
 <body>

 <h2>Set the max-width of an element</h2>


 <p>This div element has a height of 100px and a max-width of 500px:</p>

 <div></div>

 <p>Resize the browser window to see the effect.</p>

 </body>
 </html>
CSS max-height Property
 The max-height property is used to set the
maximum height of an element.
 This prevents the value of the height property from
becoming larger than max-height.
CSS min-height Property
 The min-height property is used to set the minimum
height of an element.
 This prevents the value of the height property from
becoming smaller than min-height
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 max-height: 600px;
 min-height: 400px;
 background-color: powderblue;
 }
 </style>
 </head>
 <body>

 <h2>Set the max-height and min-height of an element</h2>


 <p>Resize the browser window to see the effect.</p>

 <div>This is some text. This is some text. This is some text.


 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.</div>

 </body>
 </html>
CSS min-width Property
 The min-width property is used to set the minimum
width of an element.
 This prevents the value of the width property from
becoming smaller than min-width.
 p{
min-width: 150px;
}
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 max-width: 400px;
 min-width: 100px;
 background-color: powderblue;
 }
 </style>
 </head>
 <body>

 <h2>Set the max-width and min-width of an element</h2>


 <p>Resize the browser window to see the effect.</p>

 <div>This is some text. This is some text. This is some text.


 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.</div>

 </body>
 </html>
CSS display
 The display property specifies the type of box used
for an HTML element.
 The CSS specification defines the default display
value for all the elements, e.g. the <div> element is
rendered as block, while the <span> element is
displayed inline.
Display Block
 The block value of the display property forces an
element to behave like block-level element, like a
<div> or <p> element. The style rules in the
following example displays the <span> and <a>
elements as block-level elements:
Example
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Example of CSS display</title>
 <style type="text/css">
 span {
 display: block;
 background: #F0E68C;
 }
 a{
 display: block;
 background: #90EE90;
 }
 </style>
 </head>
 <body>
 <p>
 <a href="" target="_top">Visit site</a>
 <br>
 <span>This span element generates a block box.</span>
 </p>
 </body>
 </html>
Display Inline
 The inline value of the display property causes an
element to behave as though it were an inline-level
element, like a <span> or an <a> element. The
style rules in the following example displays the
<p> and <li> elements as inline-level elements:
Example
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Example of CSS display</title>
 <style type="text/css">
 p{
 display: inline;
 background: #8FBC8F;
 padding: 10px;
 }
 ul li {
 display: inline;
 margin: 10px;
 }
 </style>
 </head>
 <body>
 <p>This paragraph element generates an inline box.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 </ul>
 </body>
 </html>
Display Inline-Block
 The inline-block value of the display property
causes an element to generate a block box that will
be flowed with surrounding content i.e. in the same
line as adjacent content. The following style rules
displays the <div> and <span> elements as inline-
block:
Example
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Example of CSS display</title>
 <style type="text/css">
 div {
 display: inline-block;
 background: #90EE90;
 padding: 10px;
 }
 span {
 display: inline-block;
 background: #F08080;
 padding: 10px;
 }
 </style>
 </head>
 <body>
 <div>
 <span>This span element and its parent div element generate an inline-block box.</span>
 </div>
 </body>
 </html>
Display None
 The value none simply causes an element to
generate no boxes at all. Child elements do not
generate any boxes either, even if their display
property is set to something other than none
Example
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Example of CSS display</title>
 <style type="text/css">
 h1 {
 display: none;
 }
 </style>
 </head>
 <body>
 <h1>Hello World!</h1>
 <p>The <code>display: none</code> simply causes an element to generate no boxes at
all.</p>
 </body>
 </html>
CSS position Property
 The position property specifies the type of
positioning method used for an element (static,
relative, absolute or fixed).
Relative Positioning
 Relative positioning changes the position of the
HTML element relative to where it normally
appears.
 CSS helps you to position your HTML element. You
can put any HTML element at whatever location you
like. You can specify whether you want the element
positioned relative to its natural position in the page
or absolute based on its parent element.
Example

 <html>
 <head>
 </head>
 <body>
 <div
style="position:relative;left:80px;top:2px;background-
color:yellow;">
 This div has relative positioning.
 </div>
 </body>
 </html>
Absolute Positioning
 An element with position: absolute is positioned at
the specified coordinates relative to your screen
top-left corner.
Example
 <html>
 <head>
 </head>
 <body>
 <div style="position:absolute; left:80px; top:20px;
background-color:yellow;">
 This div has absolute positioning.
 </div>
 </body>
 </html>
Fixed Positioning
 Fixed positioning allows you to fix the position of an
element to a particular spot on the page,
regardless of scrolling. Specified coordinates will
be relative to the browser window.
Example
 <html>
 <head>
 </head>
 <body>
 <div style="position:fixed; left:80px; top:20px;
background-color:yellow;">
 This div has fixed positioning.
 </div>
 </body>
 </html>
Static Positioning
 The default or 'natural' position of block elements
on the page.
 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:
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div.static {
 position: static;
 border: 3px solid #73AD21;
 }
 </style>
 </head>
 <body>

 <h2>position: static;</h2>

 <p>An element with position: static; is not positioned in any special way; it is
 always positioned according to the normal flow of the page:</p>

 <div class="static">
 This div element has position: static;
 </div>

 </body>
 </html>
The float Property
 The float property specifies whether or not an
element should float.
 In its simplest use, the float property can be used to
wrap text around images.
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 img {
 float: right;
 }
 </style>
 </head>
 <body>

 <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
 <p>
 <img src="incapp-logo.png" width="95" height="84" />
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 </p>

 </body>
 </html>
CSS - Pseudo Classes
 CSS pseudo-classes are used to add special effects
to some selectors. You do not need to use JavaScript
or any other script to use those effects. A simple
syntax of pseudo-classes is as follows −
 selector:pseudo-class {property: value} CSS classes
can also be used with pseudo-classes −
 selector.class:pseudo-class {property: value}
Example


<!DOCTYPE html>
<html>
 <head>
 <style>
 /* unvisited link */
 a:link {
 color: red;
 }

 /* mouse over link */


 a:hover {
 color: hotpink;
 }

 </style>
 </head>
 <body>

 <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

 </body>
 </html>
CSS - Pseudo Elements
 CSS pseudo-elements are used to add special
effects to some selectors. You do not need to use
JavaScript or any other script to use those effects. A
simple syntax of pseudo-element is as follows −
 selector:pseudo-element {property: value} CSS
classes can also be used with pseudo-elements −
 selector.class:pseudo-element {property: value}
Pseudo elements
 A CSS pseudo-element is used to style specified
parts of an element.
 For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an
element
The ::first-line Pseudo-element
 The ::first-line pseudo-element is used to add a
special style to the first line of a text.
 Example:
 p::first-line { text-decoration: underline; }
The ::first-letter pseudo-element
 The ::first-letter pseudo-element is used to add a
special style to the first letter of a text.
 p::first-letter {
 color: #ff0000;
 font-size: xx-large;
 }
The ::before Pseudo-element
 the ::before pseudo-element can be used to insert
some content before the content of an element
 Example
 h1::before {
 content: url(smiley.gif);
 }
The ::after Pseudo-element
 The ::after pseudo-element can be used to insert
some content after the content of an element.
 The following example inserts an image after the
content of each <h1> element:
 Example
 h1::after {
content: url(smiley.gif);
}
The ::selection Pseudo-element
 The ::selection pseudo-element matches the portion
of an element that is selected by a user.
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 ::-moz-selection { /* Code for Firefox */
 color: red;
 background: yellow;
 }

 ::selection {
 color: red;
 background: yellow;
 }
 </style>
 </head>
 <body>

 <h1>Select some text on this page:</h1>

 <p>This is a paragraph.</p>
 <div>This is some text in a div element.</div>

 <p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>


 <p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>

 </body>
 </html>
Css navigation bar
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 }

 li {
 float: left;
 }

 li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 }

 li a:hover:not(.active) {
 background-color: #111;
 }

 .active {
 background-color: #4CAF50;
 }
 </style>
 </head>
CSS Image Gallery
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div.gallery {
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 width: 180px;
 }

 div.gallery:hover {
 border: 1px solid #777;
 }

 div.gallery img {
 width: 100%;
 height: auto;
 }

 div.desc {
 padding: 15px;
 text-align: center;
 }
 </style>
 </head>
 <body>

 <div class="gallery">
 <a target="_blank" href="images/image1.jpg">
CSS Opacity / Transparency
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 img {
 opacity: 0.5;
 filter: alpha(opacity=50); /* For IE8 and earlier */
 }
 </style>
 </head>
 <body>

 <h1>Image Transparency</h1>
 <p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

 <p>Image with 50% opacity:</p>


 <img src="img_forest.jpg" alt="Forest" width="170" height="100">

 </body>
 </html>
CSS Attribute Selectors
 The [attribute] selector is used to select elements
with a specified attribute.
 The following example selects all <a> elements
with a target attribute:
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 a[target] {
 background-color: yellow;
 }
 </style>
 </head>
 <body>

 <p>The links with a target attribute gets a yellow background:</p>

 <a href="https://www.incapp.in">incapp.in</a>
 <a href="http://www.disney.com" target="_blank">disney.com</a>
 <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

 </body>
 </html>
CSS [attribute="value"] Selector
 The [attribute="value"] selector is used to select
elements with a specified attribute and value.
 The following example selects all <a> elements
with a target="_blank" attribute:
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 a[target=_blank] {
 background-color: yellow;
 }
 </style>
 </head>
 <body>

 <p>The link with target="_blank" gets a yellow background:</p>

 <a href="https://www.incapp.in">incapp.in</a>
 <a href="http://www.disney.com" target="_blank">disney.com</a>
 <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

 </body>
 </html>
CSS [attribute~="value"] Selector
 The [attribute~="value"] selector is used to select
elements with an attribute value containing a
specified word.
 The following example selects all elements with a
title attribute that contains a space-separated list of
words, one of which is "flower":
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [title~=flower] {
 border: 5px solid yellow;
 }
 </style>
 </head>
 <body>

 <p>All images with the title attribute containing the word "flower" get a yellow border.</p>

 <img src="images/image1.jpg" title="klematis flower" width="150" height="113">


 <img src="images/image2.jpg" title="flower" width="224" height="162">
 <img src="images/image3.jpg" title="tree" width="200" height="358">

 </body>
 </html>
CSS [attribute|="value"] Selector
 The [attribute|="value"] selector is used to select
elements with the specified attribute starting with
the specified value.
 The following example selects all elements with a
class attribute value that begins with "top":
 Note: The value has to be a whole word, either
alone, like class="top", or followed by a hyphen( - ),
like class="top-text"!
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class|=top] {
 background: yellow;
 }
 </style>
 </head>
 <body>

 <h1 class="top-header">Welcome</h1>
 <p class="top-text">Hello world!</p>
 <p class="topcontent">Are you learning CSS?</p>

 </body>
 </html>
CSS [attribute^="value"] Selector
 The [attribute^="value"] selector is used to select
elements whose attribute value begins with a
specified value.
 The following example selects all elements with a
class attribute value that begins with "top":
 Note: The value does not have to be a whole word!
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class^="top"] {
 background: yellow;
 }
 </style>
 </head>
 <body>

 <h1 class="top-header">Welcome</h1>
 <p class="top-text">Hello world!</p>
 <p class="topcontent">Are you learning CSS?</p>

 </body>
 </html>
CSS [attribute$="value"] Selector
 The [attribute$="value"] selector is used to select
elements whose attribute value ends with a
specified value.
 The following example selects all elements with a
class attribute value that ends with "test":
 Note: The value does not have to be a whole
word!
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class$="test"] {
 background: yellow;
 }
 </style>
 </head>
 <body>

 <div class="first_test">The first div element.</div>


 <div class="second">The second div element.</div>
 <div class="my-test">The third div element.</div>
 <p class="mytest">This is some text in a paragraph.</p>

 </body>
 </html>
CSS [attribute*="value"] Selector
 The [attribute*="value"] selector is used to select
elements whose attribute value contains a specified
value.
 The following example selects all elements with a
class attribute value that contains "te":
 Note: The value does not have to be a whole
word!
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 [class*="te"] {
 background: yellow;
 }
 </style>
 </head>
 <body>

 <div class="first_test">The first div element.</div>


 <div class="second">The second div element.</div>
 <div class="my-test">The third div element.</div>
 <p class="mytest">This is some text in a paragraph.</p>

 </body>
 </html>
Styling Forms
 The attribute selectors can be useful for styling
forms without class or ID:
Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 input[type=text] {
 width: 150px;
 display: block;
 margin-bottom: 10px;
 background-color: grey;
 }

 input[type=button] {
 width: 120px;
 margin-left: 35px;

 }
 </style>
 </head>
 <body>

 <form name="input" action="" method="get">


 Firstname:<input type="text" name="Name" value="incapp" size="20">
 Lastname:<input type="text" name="Name" value="institute" size="20">
 <input type="button" value="Example Button">
 </form>

 </body>
 </html>

You might also like