0% found this document useful (0 votes)

6 views

Unit - III Css

CSS (Cascading Style Sheets) is used to style HTML elements for display on various media, allowing for consistent design across multiple web pages. It includes syntax rules for selectors, properties, and values, enabling the application of styles through inline, internal, or external methods. Key features include background properties, border styles, and the ability to create responsive designs for different devices.

Uploaded by

bhaupatel143

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

6 views

Unit - III Css

Uploaded by

bhaupatel143

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 47

CSS

 CSS stands for Cascading Style Sheets.

 CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
 CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS Syntax
 A CSS rule-set consists of a selector and a declaration block:

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.
 A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
 In the following example all <p> elements will be center-aligned, with a red text color:

Example: p { color: red; text-align: center; }

CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class,
attribute, and more.

The element Selector

 The element selector selects elements based on the element name.
 You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):

Example: p { text-align: center; color: red; }

The id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element should be unique within a page, so the id selector is used to select one
unique element!
 To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
 The style rule below will be applied to the HTML element with id="para1":

Example: #para1 { text-align: center; color: red; }

The class Selector

 The class selector selects elements with a specific class attribute.

Gajendra Chourey Page 39

 To select elements with a specific class, write a period (.) character, followed by the name of the
class.
 In the example below, all HTML elements with class="center" will be red and center-aligned:

Example: .center { text-align: center; color: red; }

 You can also specify that only specific HTML elements should be affected by a class. In the
example below, only <p> elements with class="center" will be center-aligned:

Example: p.center { text-align: center; color: red; }

 The class name can be used by CSS and JavaScript to perform certain tasks for elements with the
specified class name.

Example: Using CSS to style all elements with the class name "city":
<html>
<head><title>CSS Class Selector</title>
<style>
.city { background-color: tomato; color: white; padding: 10px; }
</style>
</head>
<body> <h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

Grouping Selectors
 If you have elements with the same style definitions, like this:

h1 { text-align: center; color: red; }

h2 { text-align: center; color: red; }
p { text-align: center; color: red; }

 It will be better to group the selectors, to minimize the code.

 To group selectors, separate each selector with a comma. In the example below we have grouped
the selectors from the code above:

Example: h1, h2, p { text-align: center; color: red; }

CSS Comments
 Comments are used to explain the code, and may help when you edit the source code at a later
date.
 Comments are ignored by browsers.
 A CSS comment starts with /* and ends with */.
 Comments can also span multiple lines:

Example:

Gajendra Chourey Page 40

p{ color: red;
/*This is a single-line comment*/
text-align: center;
}
/*This is a multi-line comment*/

CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements.
 Internal - by using a <style> element in the <head> section.
 External - by using an external CSS file.

The most common way to add CSS, is to keep the styles in separate CSS files.

Inline CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 This example sets the text color of the <h1> element to blue:

Example: <h1 style="color:blue;">This is a Blue Heading</h1>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation).

Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS
 An external style sheet is used to define the style for many HTML pages.
 With an external style sheet, you can change the look of an entire web site, by changing one
file!

Gajendra Chourey Page 41

 To use an external style sheet, add a link to it in the <head> section of the HTML page:

Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
 Here is how the "styles.css" looks:
body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }

Note: An inline style (inside a specific HTML element) has the highest priority, which means that it will
override a style defined inside the <head> tag, or in an external style sheet, or a browser default value.

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-attachment
 background-position

Background Color

 The background-color property specifies the background color of an element.

 The background color of a page is set like this: Example body { background-color: lightblue; }

Background Image

 The background-image property specifies an image to use as the background of an element.

 By default, the image is repeated so it covers the entire element.
 The background image for a page can be set like this:
Example: body { background-image: url("paper.gif"); }

Background Image - Repeat Horizontally or Vertically

 By default, the background-image property repeats an image both horizontally and vertically.

Gajendra Chourey Page 42

 Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example: body { background-image: url("gradient_bg.png"); }
 If the image above is repeated only horizontally (background-repeat: repeat-x;), the background
will look better:
Example:
body { background-image: url("gradient_bg.png");
background-repeat: repeat-x; }
 Tip: To repeat an image vertically, set background-repeat: repeat-y;

Background Image - Set position and no-repeat

 Showing the background image only once is also specified by the background-repeat property:
Example body { background-image: url("img_tree.png"); background-repeat: no-repeat; }
 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:
Example
body { background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top; }

Background Image - Fixed position

 To specify that the background image should be fixed (will not scroll with the rest of the page),
use the background-attachment property:
Example
body { background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; }

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).
Example
Gajendra Chourey Page 43
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;}
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).
Example:
p.one { border-style: solid; border-width: 5px; }
p.two { border-style: solid; border-width: medium; }
p.three { border-style: solid; border-width: 2px 10px 4px 20px; }
Border Color
 The border-color property is used to set the color of the four borders.
 The color can be set by:
 name - specify a color name, like "red"
 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent

 The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border).
 If border-color is not set, it inherits the color of the element.
Example:
p.one { border-style: solid; border-color: red; }
p.two { border-style: solid; border-color: green; }
p.three { border-style: solid; border-color: red green blue yellow; }

Border - Individual Sides

 From the examples above you have seen that it is possible to specify a different border for each
side. In CSS, there are also properties for specifying each of the borders (top, right, bottom, and
left):
Example:

Gajendra Chourey Page 44

p{ border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid; }

Border - Shorthand Property

 As you can see from the examples above, there are many properties to consider when dealing
with borders.
 To shorten the code, it is also possible to specify all the individual border properties in one
property.
 The border property is a shorthand property for the following individual border properties:
 border-width
 border-style (required)
 border-color

Example: p { border: 5px solid red; }

Rounded Borders
 The border-radius property is used to add rounded borders to an element:
 Example: p { border: 2px solid red; border-radius: 5px; }

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed; border-width: medium; }
p.solid {border-style: solid; border-width: 5px; border-color: green;}
p.double {border-style: double; border-width: 2px 10px 4px 20px; border-radius: 25px;
}
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; border-color: red green blue yellow; }

</style>
</head>
<body>
<p class='dotted'>Bilaspur</p>
<p class='dashed'>Bilaspur</p>
<p class='solid'>Bilaspur</p>
<p class='double'>Bilaspur</p>
<p id='groove'>Bilaspur</p>
<p id='ridge'>Bilaspur</p>
<p id='inset'>Bilaspur</p>
<p id='outset'>Bilaspur</p>
<p id='none'>Bilaspur</p>
<p id='hidden'>Bilaspur</p>
<p id='mix'>Bilaspur</p>
</body>
</html>

Gajendra Chourey Page 45

CSS border-top-left-radius Property
The border-top-left-radius property defines the radius of the top-left corner.
Note: If you set two values, the first one is for the top border, and the second one for the left border. If the second
value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.
#example1 {
border: 2px solid red;
border-top-left-radius: 25px;
}

#example2 {
border: 2px solid red;
border-top-left-radius: 50px 20px;
}

CSS border-top-right-radius Property

The border-top-right-radius property defines the radius of the top-right corner.

Tip: This property allow you to add rounded borders to elements!

Note: If you set two values, the first one is for the top border, and the second one for the right border. If the second
value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 2px solid red;
padding: 10px;
border-top-right-radius: 25px;
}

#example2 {
border: 2px solid red;
padding: 10px;
border-top-right-radius: 50px 20px;
}
</style>
</head>
<body>

<h2>border-top-right-radius: 25px:</h2>
<div id="example1">
<p>The border-top-right-radius property defines the radius of the top-right corner.</p>
</div>

<h2>border-top-right-radius: 50px 20px:</h2>

<div id="example2">
<p>If two values are set; the first one is for the top border, the second one for the right border.</p>
</div>

</body>
</html>

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
Gajendra Chourey Page 46
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

 The following example sets different margins for all four sides of a <p> element:
Example:
p{ margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margin - Shorthand Property

 margin: 25px 50px 75px 100px;

 top margin is 25px
 right margin is 50px
 bottom margin is 75px
 left margin is 100px

Example: p { margin: 25px 50px 75px 100px; }

Note: Do not add a space between the property value and the unit (such as margin: 50 px;). The correct
way is: margin: 50px;

The auto Value

 You can set the margin property to auto to horizontally center the element within its container.
 The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins:

Example: div { width: 300px; margin: auto; border: 1px solid red; }

The inherit Value

 This example lets the left margin of the <p class="ex1"> element be inherited from the parent
element (<div>):

Example: div { border: 1px solid red; margin-left: 100px; }

p.ex1 { margin-left: inherit; }

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.
Gajendra Chourey Page 47
 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

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element

 inherit - specifies that the padding should be inherited from the parent element.

Note: Negative values are not allowed.

 The following example sets different padding for all four sides of a <div> element:
Example:
div { padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Padding - Shorthand Property

 padding: 25px 50px 75px 100px;
 top padding is 25px
 right padding is 50px
 bottom padding is 75px
 left padding is 100px

Example: div { padding: 25px 50px 75px 100px; }

Setting height and width

 The height and width properties are used to set the height and width of an element.
 The height and width can be set to auto (this is default. Means that the browser calculates the
height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the
containing block.
 This element has a height of 200 pixels and a width of 50%.
Example:
div { height: 200px;
width: 50%;
background-color: powderblue;
}

<!DOCTYPE html>
<html>
<head>

Gajendra Chourey Page 48

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.
Example
div { width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Text Transformation
 The text-transform property is used to specify uppercase and lowercase letters in a text.

Gajendra Chourey Page 49

 It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter
of each word:
Example
p.uppercase { text-transform: uppercase; }
p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }

Letter Spacing
 The letter-spacing property is used to specify the space between the characters in a text.
 The following example demonstrates how to increase or decrease the space between characters:
Example
h1 { letter-spacing: 3px; }
h2 { letter-spacing: -3px; }
Line Height
 The line-height property is used to specify the space between lines:
Example: p.small { line-height: 0.8; }
p.big { line-height: 1.8; }

Word Spacing
 The word-spacing property is used to specify the space between the words in a text.
 The following example demonstrates how to increase or decrease the space between words:
Example h1 { word-spacing: 10px; }
h2 { word-spacing: -5px; }

Text Shadow
 The text-shadow property adds shadow to text.
 The following example specifies the position of the horizontal shadow (3px), the position of the
vertical shadow (2px) and the color of the shadow (red):
Example:
h1 { text-shadow: 3px 2px red; }

Font Family
 The font family of a text is set with the font-family property.
 The font-family property should hold several font names as a "fallback" system.
 If the browser does not support the first font, it tries the next font, and so on.
 Start with the font you want, and end with a generic family, to let the browser pick a similar font
in the generic family, if no other fonts are available.
 If the name of a font family is more than one word, it must be in quotation marks, like: "Times
New Roman".
 More than one font family is specified in a comma-separated list:
Example: p { font-family: "Times New Roman", Times, sans-serif; }
 You can also use Google font. (Browse Fonts - Google Fonts)

Font Style
 The font-style property is mostly used to specify italic text. This property has three values:

Gajendra Chourey Page 50

 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example p.normal { font-style: normal; }

p.italic { font-style: italic; }
p.oblique { font-style: oblique; }

Set Font Size With Pixels

 Setting the text size with pixels gives you full control over the text size:
Example h1 { font-size: 40px; }
h2 { font-size: 30px; }
p { font-size: 14px; }
CSS Icons
How to Add Icons
 The simplest way to add an icon to your HTML page, is with an icon library, such as Font
Awesome.
 Add the name of the specified icon class to any inline HTML element (like <i> or <span>).
 All the icons in the icon libraries below, are scalable vectors that can be customized with CSS
(size, color, shadow, etc.)

Font Awesome Icons

 To use the Font Awesome icons, add the following line inside the <head> section of your HTML
page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
 Note: No downloading or installation is required!

Example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>

Bootstrap Icons

Gajendra Chourey Page 51

 To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML
page:
 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 Note: No downloading or installation is required!

Example:

<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet
"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>

Styling Links
 Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
 In addition, links can be styled differently depending on what state they are in.
 The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouse over it
 a:active - a link the moment it is clicked
Example:

/* unvisited link */ a:link { color: red; }

/* visited link */ a:visited { color: green; }
/* mouse over link */ a:hover { color: hotpink; }
/* selected link */ a:active { color: blue; }

<!DOCTYPE html>
<html>
<head>
<style> a:link { color: red; }
a:visited { color: green; }
a:hover { color: hotpink; }
a:active { color: blue; }
</style>
</head>
<body>
<a href="mywebpage.html"> ABVU </a>

Gajendra Chourey Page 52

</body>
</html>

Background Color
 The background-color property can be used to specify a background color for links:
Example:
a:link { background-color: yellow; }
a:visited { background-color: cyan; }
a:hover { background-color: lightgreen; }
a:active { background-color: hotpink; }
<!DOCTYPE html>
<html>
<head>
<style>
a:link { background-color: yellow; }
a:visited { background-color: cyan; }
a:hover { background-color: lightgreen; }
a:active { background-color: hotpink; }

</style>
</head>
<body>
<a href="mywebpage.html"> ABVU </a>
</body>
</html>

CSS List Properties

 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

Different List Item Markers

 The list-style-type property specifies the type of list item marker.

 The following example shows some of the available list item markers:

<!DOCTYPE html>
<html>
<head>
<style> ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>

Gajendra Chourey Page 53

<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

An Image as the List Item Marker

 The list-style-image property specifies an image as the list item marker:
Example:
ul { list-style-image: url('sqpurple.gif'); }

Remove Default Settings

 The list-style-type: none property can also be used to remove the markers/bullets.
 Note that the list also has default margin and padding. To remove this, add margin:0 and
padding:0 to <ul> or <ol>:
Example: ul { list-style-type: none; margin: 0; padding: 0; }

Styling List With Colors

 We can also style lists with colors, to make them look a little more interesting.
 Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li>
tag will affect the individual list items:
Example:
ol { background: #ff9999; padding: 20px; }
ul { background: #3399ff; padding: 20px; }
ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; }
ul li { background: #cce5ff; margin: 5px; }
Table Borders
 To specify table borders in CSS, use the border property.
 The example below specifies a black border for <table>, <th>, and <td> elements:
Example:
table, th, td { border: 1px solid black; }

Gajendra Chourey Page 54

Collapse Table Borders
 The border-collapse property sets whether the table borders should be collapsed into a single
border:
Example:
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }

CSS Floats
 The float property specifies how an element should float.
 It is common to do entire web layouts using the CSS float property.
 Float is easy to learn - you just need to remember how the float and clear properties work.
 Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.
 Note: Absolutely positioned elements ignore the float property!
 Note: Elements after a floating element will flow around it. To avoid this, use the clear property
or the clearfix hack.

Property Values

Value Description

The element does not float, (will be displayed just where it occurs in the text). This is
none
default

left The element floats to the left of its container

right The element floats the right of its container

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
div.container { width: 100%; border: 1px solid gray; }
header, footer { padding: 1em; color: white; background-color: black; clear: left; text-align:
center;}
nav { float: left; max-width: 160px; margin: 0; padding: 1em;}
nav ul { list-style-type: none; padding: 0; }
nav ul a { text-decoration: none; }
article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>

Gajendra Chourey Page 55

</header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with
a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright © Mypage.com</footer>
</div>
</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }

.header, .footer { background-color: grey; color: white; padding: 15px; }

.column { float: left; padding: 15px; }

.clearfix::after { content: ""; clear: both; display: table; }

.menu { width: 25%; }

.content { width: 75%; }

.menu ul { list-style-type: none; margin: 0; padding: 0; }

.menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff;}

.menu li:hover { background-color: #0099cc; }

</style>
</head>
<body>

<div class="header"> <h1>Chania</h1> </div>

<div class="clearfix">
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>

Gajendra Chourey Page 56

</ul>
</div>

<div class="column content">

<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>
<p>You will learn more about web layout and responsive web pages in a later chapter.</p>
</div>
</div>

<div class="footer">
<p>Footer Text</p>
</div>

</body>
</html>

Example 3: Do not allow floating elements on the left or the right side of a specified <p> element:
<!DOCTYPE html>
<html>
<head>
<style>
img { float: left; }

p.clear { clear: both; }

</style>
</head>
<body>

<img src="#" width="100" height="132">

<p>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>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also
some text. This is also some text. This is also some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>

</body>
</html>

Example 4: If a floating element is taller than the containing element, it will overflow outside its
container. It is possible to fix this with the "clearfix hack":

<!DOCTYPE html>
<html>
<head>
<style>
div { border: 3px solid #4CAF50; padding: 5px; }

.img1 { float: right; }

.clearfix::after { content: ""; clear: both; display: table; }

.img2 { float: right; }

</style>
</head>

Gajendra Chourey Page 57

<body>
<h1>The Clearfix Hack</h1>

<p>Here, the floating image is taller than the element containing it, so it overflows outside its
container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum...</div>

<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum...</div>

</body>
</html>

CSS Units
 CSS has several different units for expressing a length.
 Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
 Length is a number followed by a length unit, such as 10px, 2em, etc.
 Note: A whitespace cannot appear between the number and the unit. However, if the value
is 0, the unit can be omitted.
 For some CSS properties, negative lengths are allowed.
 There are two types of length units: absolute and relative.

Absolute Lengths
 The absolute length units are fixed and a length expressed in any of these will appear as
exactly that size.
 Absolute length units are not recommended for use on screen, because screen sizes vary so
much. However, they can be used if the output medium is known, such as for print layout.

Unit Description
Cm Centimetres
Mm Millimetres
In inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

 Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel
(dot) of the display. For printers and high resolution screens 1px implies multiple device
pixels.

Relative Lengths

Gajendra Chourey Page 58

 Relative length units specify a length relative to another length property. Relative length units
scale better between different rendering medium.
Unit Description

em Relative to the font-size of the element (2em means 2 times the size of the current font)

ex Relative to the x-height of the current font (rarely used)

ch Relative to the width of the "0" (zero)

rem Relative to font-size of the root element

vw Relative to 1% of the width of the viewport*

vh Relative to 1% of the height of the viewport*

vmin Relative to 1% of viewport's* smaller dimension

vmax Relative to 1% of viewport's* larger dimension

% Relative to the parent element

 The em and rem units are practical in creating perfectly scalable layout!
 Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm

CSS flex Property

 The flex property sets the flexible length on flexible items.
 If the element is not a flexible item, the flex property has no effect.
CSS Syntax: flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Property Values
Value Description

flex-grow A number specifying how much the item will grow relative to the rest of the
flexible items

flex-shrink A number specifying how much the item will shrink relative to the rest of the
flexible items

flex-basis The length of the item. Legal values: "auto", "inherit", or a number followed by
"%", "px", "em" or any other length unit

Auto Same as 1 1 auto.

Initial Same as 0 1 auto.

None Same as 0 0 auto.

Inherit Inherits this property from its parent element.

Example 1:
<!DOCTYPE html>
<html>
<head>
<style>

Gajendra Chourey Page 59

* { box-sizing: border-box; }

.flex-container { display: flex; flex-wrap: wrap; font-size: 30px; text-align: center; }

.flex-item-left { background-color: #f1f1f1; padding: 10px; flex: 50%; }

.flex-item-right { background-color: dodgerblue; padding: 10px; flex: 50%; }

/* Responsive layout - makes a one column-layout instead of a two-column layout */

@media (max-width: 800px) {
.flex-item-right, .flex-item-left { flex: 100%; }
}
</style>
</head>
<body>

<h1>Responsive Flexbox</h1>

<p>In this example, we change the percentage of flex to create different layouts for different screen
sizes.</p>
<p><b>Resize the browser window to see that the direction changes when the screen size is 800px or
smaller.</b></p>

</body>
</html>

CSS flex-basis Property

 The flex-basis property specifies the initial length of a flexible item.
 Note: If the element is not a flexible item, the flex-basis property has no effect.
CSS Syntax: flex-basis: number|auto|initial|inherit;
Property Values

Value Description

number A length unit, or percentage, specifying the initial length of the flexible item(s)

auto Default value. The length is equal to the length of the flexible item. If the item has no
length specified, the length will be according to its content

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS flex-direction Property

 The flex-direction property specifies the direction of the flexible items.
 If the element is not a flexible item, the flex-direction property has no effect.
 Default value: row
CSS Syntax: flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Gajendra Chourey Page 60

Property Values

Value Description

row Default value. The flexible items are displayed horizontally, as a row

row-reverse Same as row, but in reverse order

column The flexible items are displayed vertically, as a column

column-reverse Same as column, but in reverse order

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS position Property

 The position property specifies the type of positioning method used for an element (static,
relative, absolute, fixed, or sticky).
 The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.

CSS Syntax: position: static|absolute|fixed|relative|sticky|initial|inherit;

Value Description

static Default value. Elements render in order, as they appear in the document flow

absolute The element is positioned relative to its first positioned (not static) ancestor
element

fixed The element is positioned relative to the browser window

relative The element is positioned relative to its normal position, so "left:20px" adds 20
pixels to the element's LEFT position

sticky The element is positioned based on the user's scroll position

A sticky element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is met in the viewport
- then it "sticks" in place (like position:fixed).

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS transform Property

 The transform property applies a 2D or 3D transformation to an element.
 This property allows you to rotate, scale, move, skew, etc., elements.

Syntax: transform: none|transform-functions|initial|inherit;

CSS overflow Property

 The overflow property specifies what should happen if content overflow an element's box.
 This property specifies whether to clip content or to add scrollbars when an element's content
is too big to fit in a specified area.
 The overflow property only works for block elements with a specified height.

Gajendra Chourey Page 61

Value Description

visible The overflow is not clipped. It renders outside the element's box. This is default

hidden The overflow is clipped, and the rest of the content will be invisible

scroll The overflow is clipped, but a scroll-bar is added to see the rest of the content

auto If overflow is clipped, a scroll-bar should be added to see the rest of the content

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS scroll-behavior Property

 The scroll-behavior property specifies whether to smoothly animate the scroll position,
instead of a straight jump, when the user clicks on a link within a scrollable box.

CSS Syntax: scroll-behavior: auto|smooth|initial|inherit;

Value Description

auto Allows a straight jump "scroll effect" between elements within the scrolling box.
This is default

smooth Allows a smooth animated "scroll effect" between elements within the scrolling
box.

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS @media Rule

 The @media rule is used in media queries to apply different styles for different media
types/devices.
 Media queries can be used to check many things, such as:
o width and height of the viewport
o width and height of the device
o orientation (is the tablet/phone in landscape or portrait mode?)
o resolution
 Using media queries are a popular technique for delivering a tailored style sheet (responsive
web design) to desktops, laptops, tablets, and mobile phones.
 You can also use media queries to specify that certain styles are only for printed documents
or for screen readers (mediatype: print, screen, or speech).
 In addition to media types, there are also media features. Media features provide more
specific details to media queries, by allowing to test for a specific feature of the user agent or

Gajendra Chourey Page 62

display device. For example, you can apply styles to only those screens that are greater, or
smaller, than a certain width.

CSS Syntax: @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code; }

meaning of the not, only and and keywords:

 not: The not keyword inverts the meaning of an entire media query.

 only: The only keyword prevents older browsers that do not support media queries with
media features from applying the specified styles. It has no effect on modern browsers.

 and: The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if you use not or only, you must also specify a media type.

Media Types

Value Description
All Default. Used for all media type devices
Print Used for printers
Screen Used for computer screens, tablets, smart-phones etc.
Speech Used for screenreaders that "reads" the page out loud

Media Features
Value Description

any-hover Does any available input mechanism allow the user to hover over elements? (added in Media
Queries Level 4)

any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media
Queries Level 4)

aspect-ratio The ratio between the width and the height of the viewport

Color The number of bits per color component for the output device

color-gamut The approximate range of colors that are supported by the user agent and output device (added in
Media Queries Level 4)

color-index The number of colors the device can display

Grid Whether the device is a grid or bitmap

Height The viewport height

Hover Does the primary input mechanism allow the user to hover over elements? (added in Media
Queries Level 4)

inverted-colors Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)

light-level Current ambient light level (added in Media Queries Level 4)

max-aspect-ratio The maximum ratio between the width and the height of the display area

max-color The maximum number of bits per color component for the output device

max-color-index The maximum number of colors the device can display

max-height The maximum height of the display area, such as a browser window

max-monochrome The maximum number of bits per "color" on a monochrome (greyscale) device

Gajendra Chourey Page 63

max-resolution The maximum resolution of the device, using dpi or dpcm

max-width The maximum width of the display area, such as a browser window

min-aspect-ratio The minimum ratio between the width and the height of the display area

min-color The minimum number of bits per color component for the output device

min-color-index The minimum number of colors the device can display

min-height The minimum height of the display area, such as a browser window

min-monochrome The minimum number of bits per "color" on a monochrome (greyscale) device

min-resolution The minimum resolution of the device, using dpi or dpcm

min-width The minimum width of the display area, such as a browser window

Monochrome The number of bits per "color" on a monochrome (greyscale) device

Orientation The orientation of the viewport (landscape or portrait mode)

overflow-block How does the output device handle content that overflows the viewport along the block axis
(added in Media Queries Level 4)

overflow-inline Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries
Level 4)

Pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media
Queries Level 4)

Resolution The resolution of the output device, using dpi or dpcm

Scan The scanning process of the output device

Scripting Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)

Update How quickly can the output device modify the appearance of the content (added in Media Queries
Level 4)

Width The viewport width

Example 1:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example { background-color: yellow; padding: 20px; }

@media screen and (max-width: 600px) { div.example { display: none; } }

</style>
</head>
<body>

<h2>Hide elements on different screen sizes</h2>

<div class="example">Example DIV.</div>

<p>When the browser's width is 600px wide or less, hide the div element. Resize the browser window
to see the effect.</p>

</body>
</html>

Gajendra Chourey Page 64

Example 2: Use media queries to create a responsive column layout:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }

/* Create four equal columns that floats next to each other */

.column { float: left; width: 25%; padding: 20px; }

/* Clear floats after the columns */

.row:after { content: ""; display: table; clear: both; }

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) { .column { width: 50%; }}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of
next to each other */
@media screen and (max-width: 600px) { .column { width: 100%; } }
</style>
</head>
<body>

<h2>Responsive Four Column Layout</h2>

<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are
992px wide or less, the columns will resize from four columns to two columns. On screens that are
600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>

<div class="row"> <div class="column" style="background-color:#aaa;">

<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;"> <h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>

</body>
</html>

Example 3: Use mediaqueries to set the background-color to lavender if the viewport is

800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels
wide. If the viewport is smaller than 400 pixels, the background-color is lightblue:
<!DOCTYPE html>

Gajendra Chourey Page 65

<html>
<head>
<style>
body { background-color: lightblue; }

@media screen and (min-width: 400px) { body { background-color: lightgreen; }}

@media screen and (min-width: 800px) { body { background-color: lavender; }}

</style>
</head>
<body>

<h1>Resize the browser window to see the effect!</h1>

<p>Use mediaqueries to set the background-color to lavender if the viewport is 800 pixels wide or
wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller
than 400 pixels, the background-color is lightblue.</p>

</body>
</html>

Example 4: Use media queries to create a responsive website:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }

/* Style the body */

body { font-family: Arial; margin: 0; }

/* Header/logo Title */
.header { padding: 60px; text-align: center; background: #1abc9c; color: white;}

/* Style the top navigation bar */

.navbar { display: flex; background-color: #333; }

/* Style the navigation bar links */

.navbar a { color: white; padding: 14px 20px; text-decoration: none;
text-align: center;
}

/* Change color on hover */

.navbar a:hover { background-color: #ddd; color: black; }

/* Column container */
.row { display: flex; flex-wrap: wrap; }

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */
.side { flex: 30%; background-color: #f1f1f1; padding: 20px; }

Gajendra Chourey Page 66

/* Main column */
.main { flex: 70%; background-color: white; padding: 20px; }

/* Fake image, just for this example */

.fakeimg { background-color: #aaa; width: 100%; padding: 20px;}

/* Footer */
.footer { padding: 20px; text-align: center; background: #ddd; }

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on
top of each other instead of next to each other */
@media (max-width: 700px) { .row, .navbar { flex-direction: column; }}
</style>
</head>
<body>

<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout.</p>
</div>

<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>

Gajendra Chourey Page 67

<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.</p>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>

</body>
</html>

CSS align-content Property

 The align-content property modifies the behavior of the flex-wrap property. It is similar
to align-items, but instead of aligning flex items, it aligns flex lines.
 There must be multiple lines of items for this property to have any effect!
 Use the justify-content property to align the items on the main-axis (horizontally).
Syntax:
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

CSS align-items Property

 The align-items property specifies the default alignment for items inside the flexible
container.
 Use the align-self property of each item to override the align-items property.

CSS Syntax: align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

CSS align-self Property

 The align-self property specifies the alignment for the selected item inside the flexible
container.
 The align-self property overrides the flexible container's align-items property.

Gajendra Chourey Page 68

Auto Default. The element inherits its parent container's align-items property, or "stretch" if it has no
parent container

Stretch The element is positioned to fit the container

Center The element is positioned at the center of the container

flex-start The element is positioned at the beginning of the container

flex-end The element is positioned at the end of the container

baseline The element is positioned at the baseline of the container

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS cursor Property

 The cursor property specifies the mouse cursor to be displayed when pointing over an
element.

Value Description

alias The cursor indicates an alias of something is to be created

all-scroll The cursor indicates that something can be scrolled in any direction

auto Default. The browser sets a cursor

cell The cursor indicates that a cell (or set of cells) may be selected

context- The cursor indicates that a context-menu is available

col-resize The cursor indicates that the column can be resized horizontally

copy The cursor indicates something is to be copied

crosshair The cursor render as a crosshair

default The default cursor

e-resize The cursor indicates that an edge of a box is to be moved right (east)

ew-resize Indicates a bidirectional resize cursor

grab The cursor indicates that something can be grabbed

grabbing The cursor indicates that something can be grabbed

help The cursor indicates that help is available

move The cursor indicates something is to be moved

n-resize The cursor indicates that an edge of a box is to be moved up (north)

ne-resize The cursor indicates that an edge of a box is to be moved up and right
(north/east)

nesw- Indicates a bidirectional resize cursor

resize

ns-resize Indicates a bidirectional resize cursor

nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west)

Gajendra Chourey Page 69

nwse- Indicates a bidirectional resize cursor
resize

no-drop The cursor indicates that the dragged item cannot be dropped here

none No cursor is rendered for the element

not- The cursor indicates that the requested action will not be executed
allowed

pointer The cursor is a pointer and indicates a link

progress The cursor indicates that the program is busy (in progress)

row-resize The cursor indicates that the row can be resized vertically

s-resize The cursor indicates that an edge of a box is to be moved down (south)

se-resize The cursor indicates that an edge of a box is to be moved down and right
(south/east)

sw-resize The cursor indicates that an edge of a box is to be moved down and left
(south/west)

text The cursor indicates text that may be selected

URL A comma separated list of URLs to custom cursors. Note: Always specify a generic
cursor at the end of the list, in case none of the URL-defined cursors can be used

vertical- The cursor indicates vertical-text that may be selected

text

w-resize The cursor indicates that an edge of a box is to be moved left (west)

wait The cursor indicates that the program is busy

zoom-in The cursor indicates that something can be zoomed in

zoom-out The cursor indicates that something can be zoomed out

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
Gajendra Chourey Page 70
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(Help-RedPlastic.cur),auto;} [Open Cursor Library - 128690 cursors (rw-designer.com)]
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>

<h1>The cursor Property</h1>

<p>Mouse over the words to change the mouse cursor.</p>

<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>

Gajendra Chourey Page 71

<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>

</body>
</html>

CSS animation Property

Syntax:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Property Values
Value Description

animation-name Specifies the name of the keyframe you want to bind to the selector

animation-duration Specifies how many seconds or milliseconds an animation takes to complete

animation-timing-function Specifies the speed curve of the animation

animation-delay Specifies a delay before the animation will start

animation-iteration-count Specifies how many times an animation should be played

animation-direction Specifies whether or not the animation should play in reverse on alternate cycles

animation-fill-mode Specifies what values are applied by the animation outside the time it is executing

animation-play-state Specifies whether the animation is running or paused

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element.

CSS @keyframes Rule

 The @keyframes rule specifies the animation code.
 The animation is created by gradually changing from one set of CSS styles to another.
 During the animation, you can change the set of CSS styles many times.
 Specify when the style change will happen in percent, or with the keywords "from" and "to",
which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the
animation is complete.
 For best browser support, you should always define both the 0% and the 100% selectors.
 Use the animation properties to control the appearance of the animation, and also to bind the
animation to selectors.

CSS Syntax: @keyframes animationname {keyframes-selector {css-styles;}}

Gajendra Chourey Page 72

Property Values

Value Description

animationname Required. Defines the name of the animation.

Required. Percentage of the animation duration.

Legal values: 0-100%
keyframes-selector from (same as 0%)
to (same as 100%)
Note: You can have many keyframes-selectors in one animation.

css-styles Required. One or more legal CSS style properties

Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; background: red; position: relative;
animation: mymove 5s infinite; }

@keyframes mymove { 0% {top: 0px;}

25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
</head>
<body>

<h1>The @keyframes Rule</h1>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9

and earlier versions.</p>

</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; background: red; position: relative;
animation: mymove 5s infinite; }

@keyframes mymove { from {top: 0px;}

50% {top: 100px !important} /* ignored */
to {top: 200px;}

Gajendra Chourey Page 73

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

<h1>The @keyframes Rule</h1>

<p>The !important rule is ignored in a keyframe. Try to remove it, and see the result.</p>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9

and earlier versions.</p>

</body>
</html>

Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; background: red; position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove { 0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
</style>
</head>
<body>

<h1>The @keyframes Rule</h1>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9

and earlier versions.</p>

</body>
</html>

Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; background: red; position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove { 0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}

Gajendra Chourey Page 74

50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier
versions.</p>

</body>
</html>

CSS @import Rule

 The @import rule allows you to import a style sheet into another style sheet.
 The @import rule must be at the top of the document (but after any @charset declaration).
 The @import rule also supports media queries, so you can allow the import to be media-
dependent.

CSS Syntax: @import url|string list-of-mediaqueries;

Property Values

Value Description

url|string A url or a string representing the location of the resource to import. The url
may be absolute or relative

list-of-mediaqueries A comma-separated list of media queries conditioning the application of the

CSS rules defined in the linked URL

Example 1: Import the "printstyle.css" style sheet ONLY if the media is print:
@import "printstyle.css" print;

Example 2: Import the "mobstyle.css" style sheet ONLY if the media is screen and the viewport is
maximum 768 pixels:
@import "mobstyle.css" screen and (max-width: 768px);

CSS grid Property

 The grid property is a shorthand property for:

 grid-template-rows
 grid-template-columns
 grid-template-areas
 grid-auto-rows
 grid-auto-columns
 grid-auto-flow

<!DOCTYPE html>
Gajendra Chourey Page 75
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container { display: grid;

grid:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div { background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>

<h1>A Webpage Template</h1>

<p>You can use the <em>grid-areas</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid</em> property
on the grid container.</p>
<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

Gajendra Chourey Page 76

</body>
</html>

CSS opacity Property

 The opacity property sets the opacity level for an element.
 The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is
50% see-through, and 0 is completely transparent.
 When using the opacity property to add transparency to the background of an element, all of
its child elements become transparent as well. This can make the text inside a fully
transparent element hard to read. If you do not want to apply opacity to child elements, use
RGBA color values instead

CSS Syntax: opacity: number|initial|inherit;

Property Values

Value Description

number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

<!DOCTYPE html>
<html>
<head>
<style>
div { background-color: #4CAF50; padding: 10px; }

div.first { opacity: 0.1; }

div.second { opacity: 0.3; }

div.third { opacity: 0.6; }

</style>
</head>
<body>

<h1>The opacity Property</h1>

<p>The opacity property adds transparency to the background of an element, and to all of its child
elements as well. This makes the text inside a transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>

<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

CSS order Property

 The order property specifies the order of a flexible item relative to the rest of the flexible
items inside the same container.
Gajendra Chourey Page 77
 If the element is not a flexible item, the order property has no effect.

CSS Syntax: order: number|initial|inherit;

Property Values
Value Description

number Default value 0. Specifies the order for the flexible item

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

CSS box-shadow Property

 The box-shadow property attaches one or more shadows to an element.
 To attach more than one shadow to an element, add a comma-separated list of shadows.
CSS Syntax:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

<!DOCTYPE html>
<html>
<head>
<style>
#example1 { border: 1px solid; padding: 10px; box-shadow: 5px 10px 8px #888888; }

#example2 { border: 1px solid; padding: 10px; box-shadow: 5px 10px 18px #888888; }

#example3 { border: 1px solid; padding: 10px; box-shadow: 5px 10px 18px red; }
</style>
</head>
<body>

<h2>box-shadow: 5px 10px 8px #888888:</h2>

<div id="example1">
<p>The optional third value adds a blur effect to the shadow.</p>
</div>

<h2>box-shadow: 5px 10px 18px #888888:</h2>

<div id="example2">
<p>More blurred.</p>
</div>

<h2>box-shadow: 5px 10px 18px red:</h2>

<div id="example3">
<p>More blurred and red.</p>
</div>

</body>
</html>

CSS box-sizing Property

 The box-sizing property defines how the width and height of an element are calculated:
should they include padding and borders, or not.

Gajendra Chourey Page 78

Without the CSS box-sizing Property
 By default, the width and height of an element is calculated like this:
 width + padding + border = actual width of an element
 height + padding + border = actual height of an element
 This means: When you set the width/height of an element, the element often appears bigger
than you have set (because the element's border and padding are added to the element's
specified width/height).

CSS Syntax: box-sizing: content-box|border-box|initial|inherit;

Property Values

Value Description

content-box Default. The width and height properties (and min/max properties) includes only the content.
Border and padding are not included

border-box The width and height properties (and min/max properties) includes content, padding and border

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
div.container { width: 100%; border: 2px solid black; }

div.box { box-sizing: border-box; width: 50%; border: 5px solid red; float: left; }
</style>
</head>
<body>

<div class="container"> <div class="box">This div occupies the left half</div>

<div class="box">This div occupies the right half</div>
<div style="clear:both;"></div>
</div>

</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; }

.div2 {width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box;}
</style>
</head>
<body>

<div class="div1">Both divs are the same size now!</div>

<br>
<div class="div2">Hooray!</div>

Gajendra Chourey Page 79

</body>
</html>

Gajendra Chourey Page 80

CSS Multiple Backgrounds

 CSS allows you to add multiple background images for an element, through the background-
image property.

 The different background images are separated by commas, and the images are stacked on
top of each other, where the first image is closest to the viewer.

Property Description

background-image Sets one or more background images for an element

 The following example has two background images, the first image is a flower (aligned to the
bottom and right) and the second image is a paper background (aligned to the top-left
corner):
Example 1: #example1 { background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}

 Multiple background images can be specified using either the individual background properties
(as above) or the background shorthand property.
 The following example uses the background shorthand property (same result as example
above):
Example 2: #example1 { background: url(img_flwr.gif) right bottom no-repeat,
url(paper.gif) left top repeat;
}

CSS Background Size

 The CSS background-size property allows you to specify the size of background images.
 The size can be specified in lengths, percentages, or by using one of the two keywords:
contain or cover.
 The contain keyword scales the background image to be as large as possible (but both its
width and its height must fit inside the content area). As such, depending on the proportions
of the background image and the background positioning area, there may be some areas of
the background which are not covered by the background image.
 The cover keyword scales the background image so that the content area is completely
covered by the background image (both its width and height are equal to or exceed the
content area). As such, some parts of the background image may not be visible in the
background positioning area.

Define Sizes of Multiple Background Images

 The background-size property also accepts multiple values for background size (using a
comma-separated list), when working with multiple backgrounds.

The following example has three background images specified, with different background-size value for
each image:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 { background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat; padding: 15px; background-size: 50px, 130px,
auto;
}

Gajendra Chourey Page 81

</style>
</head>
<body>

<div id="example1"> <h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Full Size Background Image

 Now we want to have a background image on a website that covers the entire browser
window at all times.
 The requirements are as follows:
 Fill the entire page with the image (no white space)
 Scale image as needed
 Center image on page
 Do not cause scrollbars
Example
.hero-image { background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}

CSS background-origin Property

 The CSS background-origin property specifies where the background image is positioned.
 The property takes three different values:

 border-box: the background image starts from the upper left corner of the border
 padding-box: (default) the background image starts from the upper left corner of the
padding edge
 content-box: the background image starts from the upper left corner of the content

Example: #example1 { border: 10px solid black; padding: 35px;

background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}

CSS background-clip Property

 The CSS background-clip property specifies the painting area of the background.
 The property takes three different values:
 border-box: (default) the background is painted to the outside edge of the border
 padding-box: the background is painted to the outside edge of the padding
 content-box: the background is painted within the content box
Example: #example1 { border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

Gajendra Chourey Page 82

CSS Border Images
 With the CSS border-image property, you can set an image to be used as the border around
an element.
 The CSS border-image property allows you to specify an image to be used instead of the
normal border around an element.
 The property has three parts:
1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched
 The border-image property takes the image and slices it into nine sections, like a tic-tac-toe
board. It then places the corners at the corners, and the middle sections are repeated or
stretched as you specify.
 For border-image to work, the element also needs the border property set!
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg { border: 10px solid transparent; padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body> Border.png
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Here is the original image:</p><img src="border.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-
image property.</p>

</body>
</html>

Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 { border: 10px solid transparent; padding: 15px; border-image: url(border.png)
50 round;
}

#borderimg2 { border: 10px solid transparent; padding: 15px; border-image: url(border.png)

20% round;
}

#borderimg3 { border: 10px solid transparent; padding: 15px; border-image: url(border.png)

30% round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

Gajendra Chourey Page 83

<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-
image property.</p>

</body>
</html>

CSS Linear Gradients

 To create a linear gradient you must define at least two color stops.
 Color stops are the colors you want to render smooth transitions among.
 You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Example 1: Direction - Top to Bottom (this is default)

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 { height: 200px; background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

</body>
</html>

Using Angles
 If you want more control over the direction of the gradient, you can define an angle, instead
of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
 A value of 0deg is equivalent to "to top".
 A value of 90deg is equivalent to "to right".
 A value of 180deg is equivalent to "to bottom".

Syntax: background-image: linear-gradient(angle, color-stop1, color-stop2);

Example: #grad { background-image: linear-gradient(180deg, red, yellow); }

Using Multiple Color Stops

Example: #grad { background-image: linear-gradient(red, yellow, green); }

Example: #grad { background-image: linear-gradient(to right,

red,orange,yellow,green,blue,indigo,violet); }

Using Transparency

Gajendra Chourey Page 84

 CSS gradients also support transparency, which can be used to create fading effects.
 To add transparency, we use the rgba() function to define the color stops.
 The last parameter in the rgba() function can be a value from 0 to 1, and it defines the
transparency of the color: 0 indicates full transparency, 1 indicates full color (no
transparency).
Example:
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

Repeating a linear-gradient
Example:
#grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }

CSS Radial Gradients

 A radial gradient is defined by its center.
 To create a radial gradient you must also define at least two color stops.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

 By default, shape is ellipse, size is farthest-corner, and position is center.

Example: #grad { background-image: radial-gradient(red, yellow, green); }
Example: #grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%);}

Set Shape
 The shape parameter defines the shape. It can take the value circle or ellipse. The default
value is ellipse.

Example: #grad { background-image: radial-gradient(circle, red, yellow, green); }

Use of Different Size Keywords

 The size parameter defines the size of the gradient. It can take four values:
 closest-side
 farthest-side
 closest-corner
 farthest-corner
Example:
#grad1 {background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); }
#grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); }

Repeating a radial-gradient: The repeating-radial-gradient() function is used to repeat radial

gradients:
Example:
#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); }

Gajendra Chourey Page 85

Css Notes PDF
87% (15)
Css Notes PDF
16 pages
Angular Animations in Depth
No ratings yet
Angular Animations in Depth
42 pages
Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
WIT12 01 Que 2019
No ratings yet
WIT12 01 Que 2019
16 pages
CSS3 Notes Inifnity2
No ratings yet
CSS3 Notes Inifnity2
19 pages
css_97c32e61-16c3-44c8-8fd9-ef994cdfde6c
No ratings yet
css_97c32e61-16c3-44c8-8fd9-ef994cdfde6c
109 pages
Web Development II
No ratings yet
Web Development II
30 pages
CSS Notes
100% (1)
CSS Notes
69 pages
Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy
No ratings yet
Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy
88 pages
What Is CSS?
No ratings yet
What Is CSS?
16 pages
wt unit 2
No ratings yet
wt unit 2
27 pages
CSS and CSS3 Notes
100% (1)
CSS and CSS3 Notes
54 pages
CSS Notes
No ratings yet
CSS Notes
60 pages
Css Presentation
No ratings yet
Css Presentation
44 pages
Web Technology Unit-3
No ratings yet
Web Technology Unit-3
25 pages
By:-Mr. Sachin Kumar Sonker
No ratings yet
By:-Mr. Sachin Kumar Sonker
77 pages
CSS (Cascading Style Sheet)
No ratings yet
CSS (Cascading Style Sheet)
67 pages
Css
No ratings yet
Css
63 pages
Css (BScCSIT 5th Semester)
No ratings yet
Css (BScCSIT 5th Semester)
67 pages
Cascading Style Sheet Handout March 2023
No ratings yet
Cascading Style Sheet Handout March 2023
104 pages
What Is CSS?
No ratings yet
What Is CSS?
71 pages
CSS Introduction 2008
No ratings yet
CSS Introduction 2008
24 pages
CSS - Cascading Style Sheets
No ratings yet
CSS - Cascading Style Sheets
101 pages
1) CSS
No ratings yet
1) CSS
16 pages
CSS Introduction
No ratings yet
CSS Introduction
42 pages
CSS Notes
No ratings yet
CSS Notes
19 pages
7.HTML CSS
No ratings yet
7.HTML CSS
6 pages
Css
No ratings yet
Css
65 pages
E-Note_28179_Content_Document_20241127094830AM
No ratings yet
E-Note_28179_Content_Document_20241127094830AM
95 pages
CSS Tutorial
No ratings yet
CSS Tutorial
98 pages
CSS Tutorial
No ratings yet
CSS Tutorial
20 pages
CSS unit 3
No ratings yet
CSS unit 3
12 pages
Unit2 CSS
No ratings yet
Unit2 CSS
23 pages
Developing Cascading Style Sheets Edited133
No ratings yet
Developing Cascading Style Sheets Edited133
62 pages
CSS Tutorial
No ratings yet
CSS Tutorial
7 pages
Nov 2024 Handouts
No ratings yet
Nov 2024 Handouts
5 pages
CSS Basic
No ratings yet
CSS Basic
11 pages
CSSStart
No ratings yet
CSSStart
33 pages
Web Programming-css 1
No ratings yet
Web Programming-css 1
30 pages
css introduction
No ratings yet
css introduction
13 pages
Outline of Instruction: - Review of HTML Forms. - Introduction To CSS. - Practice Session With HTML and CSS
No ratings yet
Outline of Instruction: - Review of HTML Forms. - Introduction To CSS. - Practice Session With HTML and CSS
11 pages
Cascading Style Sheet (Css)
No ratings yet
Cascading Style Sheet (Css)
19 pages
UNIT - 4 Ip
No ratings yet
UNIT - 4 Ip
21 pages
Cascading Style Sheet
No ratings yet
Cascading Style Sheet
30 pages
ITaS Lect02
No ratings yet
ITaS Lect02
68 pages
Cascade Style Sheets
No ratings yet
Cascade Style Sheets
69 pages
CSSNotes
No ratings yet
CSSNotes
37 pages
Internet_Programming(IP)_Unit_04
No ratings yet
Internet_Programming(IP)_Unit_04
29 pages
Css
No ratings yet
Css
197 pages
Step by Step CSS (W3schools)
No ratings yet
Step by Step CSS (W3schools)
74 pages
Style Sheet (CSS)
No ratings yet
Style Sheet (CSS)
29 pages
Developing Cascading Style Sheets
100% (1)
Developing Cascading Style Sheets
55 pages
Css
No ratings yet
Css
100 pages
CSS Stands For Cascading Style Sheets. It Is A Style Sheet Language That Acts As The Presentation Layer For Markup Languages Such As HTML and XHTML
No ratings yet
CSS Stands For Cascading Style Sheets. It Is A Style Sheet Language That Acts As The Presentation Layer For Markup Languages Such As HTML and XHTML
82 pages
CSS Stands For Cascading Style Sheets
No ratings yet
CSS Stands For Cascading Style Sheets
30 pages
Notes Introduction To CSS
No ratings yet
Notes Introduction To CSS
9 pages
IP - Chapter 3
No ratings yet
IP - Chapter 3
44 pages
Webtunit 2 Notes
No ratings yet
Webtunit 2 Notes
30 pages
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
From Everand
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
Steven Bright
No ratings yet
CSS3 Reference: An Alphabetical Guide
From Everand
CSS3 Reference: An Alphabetical Guide
Jo Foster
No ratings yet
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
Week 1 - Introduction To Web Design
100% (1)
Week 1 - Introduction To Web Design
53 pages
Rs1043 - Computer Engineering Curriculum Grade 11 and 12
100% (1)
Rs1043 - Computer Engineering Curriculum Grade 11 and 12
25 pages
Practical 5 10
No ratings yet
Practical 5 10
23 pages
Online Flight Booking System
No ratings yet
Online Flight Booking System
48 pages
Complete List of Web Accessibility Evaluation Tools
No ratings yet
Complete List of Web Accessibility Evaluation Tools
46 pages
Designing and Developing A Website With Reactjs: Anup Satyal
No ratings yet
Designing and Developing A Website With Reactjs: Anup Satyal
44 pages
Laravel Part-7
No ratings yet
Laravel Part-7
3 pages
Project Synopsis of Vehicle Parking Management System
No ratings yet
Project Synopsis of Vehicle Parking Management System
25 pages
CH2-MCQ-12 Comp
No ratings yet
CH2-MCQ-12 Comp
4 pages
نظام ادارة مطاعم
No ratings yet
نظام ادارة مطاعم
39 pages
WT and Fds Practical Slips
No ratings yet
WT and Fds Practical Slips
32 pages
Css - Cascading Style Sheets: An Inline CSS Uses The Style Attribute of An HTML Element
No ratings yet
Css - Cascading Style Sheets: An Inline CSS Uses The Style Attribute of An HTML Element
7 pages
12th Science IT 80 Marks Paper 14. (1)
No ratings yet
12th Science IT 80 Marks Paper 14. (1)
8 pages
HTML CSS Notes Tronix
No ratings yet
HTML CSS Notes Tronix
114 pages
Vanshjain Resume Cs v5
No ratings yet
Vanshjain Resume Cs v5
1 page
CSS Course Outline
No ratings yet
CSS Course Outline
8 pages
Chapter 1 Introduction to Web Technology
No ratings yet
Chapter 1 Introduction to Web Technology
134 pages
CSS - Grid
No ratings yet
CSS - Grid
10 pages
Proposal Css (Final)
No ratings yet
Proposal Css (Final)
3 pages
CSC 104 Practice Questions-1
No ratings yet
CSC 104 Practice Questions-1
2 pages
1.1 Problem Statement: Laundry Management System
No ratings yet
1.1 Problem Statement: Laundry Management System
42 pages
Introduction_20250113_172552_0000
No ratings yet
Introduction_20250113_172552_0000
45 pages
BCA 307 Web Designing Lab Practical List
100% (1)
BCA 307 Web Designing Lab Practical List
1 page
Syllabus - Complete ReactJS With HTML CSS and JavaScript
No ratings yet
Syllabus - Complete ReactJS With HTML CSS and JavaScript
9 pages
CSS Psuedo Class
No ratings yet
CSS Psuedo Class
9 pages
Sample: Assignment 6 Edit An HTML Document
No ratings yet
Sample: Assignment 6 Edit An HTML Document
15 pages
W3Cx 1of5 CSS.0x
No ratings yet
W3Cx 1of5 CSS.0x
217 pages
Angular 16 vs 17
No ratings yet
Angular 16 vs 17
4 pages