Advanced CSS PDF

# **UNIT - IV** # **Advanced CSS** ## CSS Colors Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. ### Syntax In HTML, a color can be specified by using a color name: ``` style="background-color:Gray;" ``` Here `background-color` is the predefined CSS attribute of change the Background Color of one particular defined tag. You can use any predefined HTML Elements like `<p>`, `<h1>`...`<h6>`, `<body>`, `<div>` etc., The following HTML program will explain in detail. ### Sample Program ```html <html> <head> <title>CSS Colors</title> </head> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1> </body> </html> ``` The image shows the text "Here we are using `<h1>` tag to change the background color the output will be displayed as follows." followed by a screenshot of a webpage with the code from the previous example. ## Text color You can set the color of text. ```html <h1 style="color:Tomato;">Hello World</h1> ``` ## Border Color You can set the color of borders ```html <h1 style="border:2px solid Tomato;">Hello World</h1> ``` ## Color Values There are different types of giving values for color like RGB, HEX, HSL, RGBA, HSLA values. ### RGB Value In HTML, a color can be specified as an RGB value, using this formula: ``` rgb(red, green, blue) ``` - Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. - For example, `rgb(255, 0, 0)` is displayed as red, because red is set to its highest value (255) and the others are set to 0. - To display the color black, all color parameters must be set to 0, like this: `rgb(0, 0, 0)`. - To display the color white, all color parameters must be set to 255, like this: `rgb(255, 255, 255)`. ### HEX Values In HTML, a color can be specified using a hexadecimal value in the form: ``` #rrggbb ``` - Where `rr` (red), `gg` (green) and `bb` (blue) are hexadecimal values between `00` and `ff` (same as decimal 0-255). - For example, `#ff0000` is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (`00`). ### HSL Value In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form: ``` hsl(hue, saturation, lightness) ``` - Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. - Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. - Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white ### RGBA Value RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: ``` rgba(red, green, blue, alpha) ``` The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): ### HSLA Value HSLA color values are an extension of HSL color values with an alpha channel - which specifies the Opacity for a color. An HSLA color value is specified with: ``` hsla(hue, saturation, lightness, alpha) ``` The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): ## CSS Backgrounds The CSS background properties are used to define the background effects for elements. CSS background properties: - `background-color` - `background-image` - `background-repeat` ### Background Image - Set position and no-repeat Showing the background image only once is also specified by the `background-repeat` property: ``` body { background-image: url("img_tree.png"); background-repeat: no-repeat; } ``` The image shows the same code used in a webpage example with a background image and the text explaining it. In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much. The position of the image is specified by the `background-position` property: ``` body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } ``` The image shows the same code used in a webpage example with a background image and the text explaining it. To specify that the background image should be fixed (will not scroll with the rest of the page), use the `background-attachment` property: ``` background-attachment: fixed; ``` ## CSS Border Properties The CSS border properties allow you to specify the style, width, and color of an element's border. ### Border Style The `border-style` property specifies what kind of border to display. The following values are allowed: - `dotted` - Defines a dotted border - `dashed` - Defines a dashed border - `solid` - Defines a solid border - `double` - Defines a double border - `groove` - Defines a 3D grooved border. The effect depends on the `border-color` value - `ridge` - Defines a 3D ridged border. The effect depends on the `border-color` value - `inset` Defines a 3D inset border. The effect depends on the `border-color` value - `outset` - Defines a 3D outset border. The effect depends on the `border-color` value - `none` - Defines no border - `hidden` - Defines a hidden border The `border-style` property can have from one to four values (for the top border, right border, bottom border, and the left border). ```html <html> <head> <title>CSS Border Property</title> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="none">No border.</p> <p class="hidden">A hidden border.</p> <p class="mix">A mixed border.</p> </body> </html> ``` The image shows the text "The output will Display as follows." and a screenshot of the webpage in which each of the `border-style` properties has been applied. ### Border Width The `border-width` property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. The `border-width` property can have from one to four values (for the top border, right border, bottom border, and the left border). ``` border-width: 5px; ``` ### Border Color The `border-color` property is used to set the color of the four borders. ``` border-color: red; ``` ### Rounded Borders The `border-radius` property is used to add rounded borders to an element: ``` border-radius: 5px; ``` ## CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). ### Margin Individual Sides CSS has properties for specifying the margin for each side of an element: - `margin-top` - `margin-right` - `margin-bottom` - `margin-left` ``` p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } ``` ### Margin - Shorthand Property To shorten the code, it is possible to specify all the margin properties in one property. ``` p { margin: 25px 50px 75px 100px; } ``` So, here is how it works: 1. If the margin property has four values then: ``` margin: 25px 50px 75px 100px; ``` - top margin is 25px - right margin is 50px - bottom margin is 75px - left margin is 100px 2. If the margin property has three values then: ``` margin: 25px 50px 75px; ``` - top margin is 25px - right and left margins are 50px - bottom margin is 75px 3. If the margin property has two values then: ``` margin: 25px 50px; ``` - top and bottom margins are 25px - right and left margins are 50px 4. If the margin property has one value then: ``` margin: 25px; ``` - all four margins are 25px ## CSS Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). ### Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: - `padding-top` - `padding-right` - `padding-bottom` - `padding-left` ``` div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } ``` ### Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. ``` div { padding: 25px 50px 75px 100px; } ``` ## CSS Display The `display` property is the most important CSS property for controlling layout. 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. ### 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). The `<div>` element is a block-level element. Examples of block-level elements: - `<div>` - `<h1>` - `<h6>` - `<p>` - `<form>` - `<header>` - `<footer>` - `<section>` ### Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline `<span>` element inside a paragraph. Examples of inline elements: - `<span>` - `<a>` - `<img>` ### Display: `none` `display: none;` is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved. The `<script>` element uses `display: none;` as default. ## CSS Width and Max Width Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This `<div>` element has a width of 500px, and margin set to auto. ```html <html> <head> <title>CSS Max Width Property</title> <style> div.exi { margin: auto; border: 3px solid #73AD21; max-width:500px; } div.ex2 { margin: auto; border: 3px solid #73AD21; width:500px; } </style> </head> <body> <div class="ex1">This div element has width: 500px; <br> The Bharathidasan University has established the Institute for Entrepreneurship and Career Development (IECD) with a view to fill the serious gap in our educational system, viz. lack of opportunities for promoting entrepreneurship among the students. </div> <br> <div class="ex2">This div element has max-width: 500px; <br> The Bharathidasan University has established the Institute for Entrepreneurship and Career Development (IECD) with a view to fill the serious gap in our educational system, viz, lack of opportunities for promoting entrepreneurship among the students. </div> </body> </html> ``` The image contains the code of the example and its output for a browser window that's larger than 500px and a smaller one. Note: The problem with the `<div>` above occurs when the browser window is smaller than the width of the element. 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. This is important when making a site usable on small devices: This `<div>` element has a `max-width` of 500px, and margin set to auto. ## CSS Overflow The `overflow` property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The `overflow` property has the following values: - `visible` - Default. The overflow is not clipped. The content renders outside the element's box - `hidden` - The overflow is clipped, and the rest of the content will be invisible - `scroll` - The overflow is clipped, and a scrollbar is added to see the rest of the content - `auto` - Similar to scroll, but it adds scrollbars only when necessary ### overflow: `visible` By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box: ``` div { width: 200px; height: 50px; background-color: #eee; overflow: visible; } ``` ### overflow: `hidden` With the `hidden` value, the overflow is clipped, and the rest of the content is hidden: ``` div { overflow: hidden; } ``` ### overflow: `scroll` Setting the value to `scroll`, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it): ``` div { overflow: scroll; } ``` ### overflow: `auto` The `auto` value is similar to `scroll`, but it adds scrollbars only when necessary: ``` div { overflow: auto; } ``` ### overflow-x and overflow-y The `overflow-x` and `overflow-y` properties specifies whether to change the overflow of content just horizontally or vertically (or both): - `overflow-x` specifies what to do with the left/right edges of the content. - `overflow-y` specifies what to do with the top/bottom edges of the content. ``` div { overflow-x: hidden; /* Hide horizontal scrollbar */ overflow-y: scroll; /* Add vertical scrollbar */ } ``` ## CSS float The `float` property is used for positioning and formatting content e.g. let an image float left to the text in a container. The `float` property can have one of the following values: - `Left` - The element floats to the left of its container - `Right` - The element floats to the right of its container - `None` - The element does not float (will be displayed just where it occurs in the text). This is default - `Inherit` - The element inherits the float value of its parent ## CSS Navigation Bar ``` /* Change the link color on hover */ li a:hover { background-color: #555; color: white; } ``` The picture shows the code of the navigation bar with its output. ## CSS Dropdown Create a dropdown box that appears when the user moves the mouse over an element. ```html <html> <head> <title>CSS Dropdown Property</title> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <b>Hello World!</b> </div> </div> </body> </html> ``` The image shows the code of the above example and its output. ## CSS Transitions CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. To create a transition effect, you must specify two things: - The CSS property you want to add an effect to - The duration of the effect ```html <html> <head> <title>CSS Transitions Property</title> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } div:hover { width: 300px; } </style> </head> <body> <div>Hover over the div element below, to see the transition effect:</div> </body> </html> ``` The image shows the code and the output for a browser window with initial values and the output when hovering over the element. ## CSS Animations CSS animations allows animation of most HTML elements without using JavaScript or Flash! - An animation lets an element gradually change from one style to another. - You can change as many CSS properties you want, as many times you want. - To use CSS animation, you must first specify some keyframes for the animation. - Keyframes hold what styles the element will have at certain times. The `animation-duration` property defines how long time an animation should take to complete. If the `animation-duration` property is not specified, no animation will occur, because the default value is Os (0 seconds). In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). ```html <html> <head> <title>CSS Animation Property</title> <style> div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; -webkit-animation-duration: 4s; animation-name: example; animation-duration: 4s; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } </style> </head> <body> <div></div> </body> </html> ``` The image shows the code of the animation example and its output on a browser window.

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue