CSS

Ace your homework & exams now with Quizwiz!

Practice: Add css skew whenever you have on an elemnt

DONE

Show an example of pseudo class selectors

DONE

Create a navbar using display inline block

DONE .nav { background-color: yellow; padding: 15px; list-style-type: none; text-align: center; } .nav li { display: inline-block; font-size: 20px; padding-left: 20px; padding-right: 20px; }

Create a rainbow (linear gradient left to right )

DONE Diggity

Create a div using css where only the top left and bottom right borders are rounded

DONE!

Explain CSS vmin and vmax

DOnE

Simple selectors

Match one or more elements based on element type, class, or id.

Attribute selectors

Match one or more elements based on their attributes/attribute values.

Pseudo-classes

Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.

Descendant Selector The descendant selector matches all elements that are descendants of a specified element.

div p { background-color: yellow; }

A thumbnail image using CSS only

img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } <img src="paris.jpg" alt="Paris">

A thumbnail image that is clickable. CSS

img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } <a href="paris.jpg"> <img src="paris.jpg" alt="Paris"> </a>

Center an Image using CSS

img { display: block; margin-left: auto; margin-right: auto; width: 50%; }

Responsive Images Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the effect:

img { max-width: 100%; height: auto; }

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }

Transparent Image The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }

The CSS for a responsive image

img { width: 100%; height: auto; }

Table Padding (To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:) show an example

th, td { padding: 15px; text-align: left; }

The real main for text-decoration is

to look to see if links are clicked are not a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }

The value text-decoration: none; is often used

to remove underlines from links: a { text-decoration: none; }

The word-spacing property is used

to specify the space between the words in a text. h1 { word-spacing: 10px; } h2 { word-spacing: -5px; }

The text-transform property is used

to specify uppercase and lowercase letters in a text. p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }

If the border-style property has two values: border-style: dotted solid; (what will happen?) (css)

top and bottom borders are dotted right and left borders are solid

If the margin property has two values: margin: 25px 50px; (what will happen?)

top and bottom margins are 25px right and left margins are 50px

If the padding property has two values: padding: 25px 50px;

top and bottom paddings are 25px right and left paddings are 50px

Hoverable Table (css) make your rows hoverable

tr:hover {background-color: #f5f5f5;}

Striped Tables (how would you make that using css)

tr:nth-child(even) {background-color: #f2f2f2;}

CSS pseudo elements come with

two full colons

The list-style-image (show how to use it)

ul { list-style-image: url('sqpurple.gif'); }

Example of an vertical. nav bar

ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* Change the link color on hover */ li a:hover { background-color: #555; color: white; }

Full-height Fixed Vertical Navbar Create a full-height, "sticky" side navigation

ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* Full height */ position: fixed; /* Make it stick, even on scroll */ overflow: auto; /* Enable scrolling if the sidenav has too much content */ }

Fix your navbar to the bottom (css)

ul { position: fixed; bottom: 0; width: 100%; }

Fix your navbar to the top (css)

ul { position: fixed; top: 0; width: 100%; }

list-style-type property specifies the type of list item marker. (name two for ul and for ol)

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; }

Coca Cola HTML Lists and CSS List Properties In HTML, there are two main types of lists:

unordered lists (<ul>) - the list items are marked with bullets ordered lists (<ol>) - the list items are marked with numbers or letters

Center Align Elements To horizontally center a block element (like <div>)

use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins:

The direction property

used to change the text direction of an element p { direction: rtl; }

Using The max-width Property If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size:

video { max-width: 100%; height: auto; }

Add a Video to the Example Web Page We want to add a video in our example web page. The video will be resized to always take up all the available space:

video { width: 100%; height: auto; }

Using The width Property If the width property is set to 100%, the video player will be responsive and scale up and down:

video { width: 100%; height: auto; }

The id Selector

# and id Note: An id name cannot start with a number!

You can also stretch your border images

#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 stretch; }

CSS border-image - Different Slice Values Different slice values completely changes the look of the border:

#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; }

id selectors should be applied to only one element per page

#box { background: blue; } <div id="box">I'm a box</div>

CSS Background Size The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover. The following example resizes a background image to much smaller than the original image (using pixels): Take a random image and set is as a background and size

#div1 { background: url(img_flower.jpg); background-size: 100px 80px; background-repeat: no-repeat; }

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:

#example1 { background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; background-size: 50px, 130px, auto; }

CSS border-spacing Property (for tables css)

#example1 { caption-side: bottom; } #example2 { caption-side: top; } you must use with the caption tag

Using Multiple Color Stops The following example shows a linear gradient (from top to bottom) with multiple color stops: (creat a 3 stop linear gradient )

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

Create a CSS gradient using transparency

#grad { background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

Show an example of CSS child selector (explain what it does)

#list > li { border: 1px solid black; } <ul id="list"> <li>child</li> <li>child <ul> <li>grand child</li> </ul> </li> </ul> This selects an element that is nested only one level deep inside of the specified parent element. It only selects direct children and not grandchildren. This selector is indicated by a > (greater than) symbol between the parent and the child to be selected.

Descendent selector. what is and show an example

#nav li { background: blue; }

Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner): Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner): Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

#rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px;

How would you change your pagiantion size?

(by changing the font-size) <style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; font-size: 22px; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>Pagination Size</h2> <p>Change the font-size property to make the pagination smaller or bigger.</p> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div>

Applying box-sizing: border bit to everything is a good idea

* { box-sizing: border-box; }

Show and explain an example of a universal css selector

* { color: orange; } This selects elements where the properties specified have not been styled by any other selectors. This selector is indicated by an * asterisk symbol.

Background Color You can set the background color for HTML elements:

<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>

Left and Right Align - Using float Another method for aligning elements is to use the float property: (show an example)

.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; } *remember to use clearfix to corrent issues

Left and Right Align - Using position One method for aligning elements is to use position: absolute;

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Show an example of a css class selector

.thick { font-weight: bold; } <span class="thick">I'm thick</span>

Show a tooltip with a transition effect

.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <body style="text-align:center;"> <h2>Fade In Tooltip on Hover</h2> <p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> </body>

Positioning Tooltips (show an example of the top)

.tooltip .tooltiptext { width: 120px; bottom: 100%; left: 50%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ }

Basic Button Styling (w3 style using CSS)

.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

Create rounded buttons using CSS

.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}

Button Width By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}

Center Vertically - Using line-height Another trick is to use the line-height property with a value that is equal to the height property.

.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* If the text has multiple lines, add the following: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle;

Center Vertically - Using padding There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

The clearfix Hack. If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. (how would you fix it? )

.clearfix { overflow: auto; } or .clearfix::after { content: ""; clear: both; display: table; } (the second version is more viable)

CSS box-sizing property The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height: What is the difference between this and regular padding and border?

.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; }

The column-reverse value stacks the flex items vertically (but from bottom to top):

.flex-container { display: flex; flex-direction: column-reverse; }

The nowrap value specifies that the flex items will not wrap (this is default):

.flex-container { display: flex; flex-wrap: nowrap; }

The flex-end value aligns the flex items at the end of the container:

.flex-container { display: flex; justify-content: flex-end; }

The flex-start value aligns the flex items at the beginning of the container (this is default):

.flex-container { display: flex; justify-content: flex-start; }

The align-content property is used to vertically align the whole grid inside the container.

.grid-container { display: grid; height: 400px; align-content: center; } align-content: space-evenly; align-content: space-around; align-content: space-between; align-content: start; align-content: end;

The grid-row Property: The grid-row property defines on which row to place an item. You define where the item will start, and where the item will end. Note: The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

.item1 { grid-row: 1 / 4; } or .item1 { grid-row: 1 / span 2; }

After creating an areas template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the grid-area property on an item like this:

.item1 { grid-area: header;

Typical Device Breakpoints There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:

/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}

Adding an extra break point for columns in your media Query

/* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }

CSS Comments

/* This is a single-line comment */

The universal selector and inherited values have a specificity of

0 - *, body * and similar have a zero specificity. Inherited values also have a specificity of 0.

CSS Flexbox Layout Module Before the Flexbox Layout module, there were four layout modes: (What were they?)

1 Block, for sections in a webpage 2 Inline, for text 3 Table, for two-dimensional table data 4 Positioned, for explicit position of an element The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Steps to make a css Navicagation bar (vertical)

1. remove the bullets and the margins and padding from the list. ul { list-style-type: none; margin: 0; padding: 0; } 2. Step 2 li a { display: block; width: 60px; } figure out the 3rd step.

1 em in defualt browzer size is eqaul to this size in pixels

16px

What is the min width for small phones then tablets

786 for phones 600 for tablets

Show and example of CSS variable

:root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; }

The flex-end value aligns the flex items at the bottom of the container:

<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; height: 200px; align-items: flex-end; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-items Property</h1> <p>The "align-items: flex-end;" aligns the flex items at the bottom of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

align-content: flex-start;

<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-content Property</h1> <p>The "align-content: flex-start;" displays the flex lines at the start of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </body>

CSS Specify the Gap Between Columns

<<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.

<button accesskey="b">Important Button</button>

To group many panels together, wrap a <div> with class .panel-group around them. The .panel-group class clears the bottom-margin of each panel *Bootstrap Panel Groups*

<div class="panel-group"> <div class="panel panel-default"> <div class="panel-body">Panel Content</div> </div> <div class="panel panel-default"> <div class="panel-body">Panel Content</div> </div> </div>

Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them. Here's an example:

<div tabindex="0">I need keyboard focus!</div>

form fieldset and legend tags. Show and example of their purpose.

<form> <fieldset> <legend>Choose one of these three items:</legend> <input id="one" type="radio" name="items" value="one"> <label for="one">Choice One</label><br> <input id="two" type="radio" name="items" value="two"> <label for="two">Choice Two</label><br> <input id="three" type="radio" name="items" value="three"> <label for="three">Choice Three</label> </fieldset> </form>

Border Color You can set the color of borders: (do it with text)

<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>

make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:

<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .header { border: 1px solid red; padding: 15px; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; border: 1px solid red; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="col-9"> <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>Resize the browser window to see how the content respond to the resizing.</p> </div> </div> </body>

Create a fully responsive navbar. (css) That starts on the left, then top then stacked.

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {margin: 0;} ul.sidenav { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } ul.sidenav li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } ul.sidenav li a.active { background-color: #4CAF50; color: white; } ul.sidenav li a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 25%; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 900px) { ul.sidenav { width: 100%; height: auto; position: relative; } ul.sidenav li a { float: left; padding: 15px; } div.content {margin-left: 0;} } @media screen and (max-width: 400px) { ul.sidenav li a { text-align: center; float: none; } } </style> </head> <body> <ul class="sidenav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <div class="content"> <h2>Responsive Sidenav Example</h2> <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p> <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body>

Recreate this navbar!

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} @media screen and (max-width: 600px){ ul.topnav li.right, ul.topnav li {float: none;} } </style> </head> <body> <ul class="topnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li class="right"><a href="#about">About</a></li> </ul> <div style="padding:0 16px;"> <h2>Responsive Topnav Example</h2> <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> <h4>Resize the browser window to see the effect.</h4> </div> </body>

Show examples of flex-direction: row; and row-reverse

<html> <head> <style> .flex-container { display: flex; flex-direction: row; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>

align-content: flex-end;

<html> <head> <style> .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-content Property</h1> <p>The "align-content: flex-end;" displays the flex lines at the end of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </body>

How to pull off perfect centering in a flexbox container

<html> <head> <style> .flex-container { display: flex; justify-content: center; align-items: center; height: 300px; background-color: DodgerBlue; } .flex-container>div { background-color: #f1f1f1; color: white; width: 100px; height: 100px; } </style> </head> <body> <h1>Perfect Centering</h1> <p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p> <div class="flex-container"> <div></div> </div> </body>

Name all items, and make a ready-to-use webpage template: (using grid area and naming)

<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-template-areas: '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>The grid-area Property</h1> <p>You can use the <em>grid-area</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-template-areas</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> </body>

Active and Hoverable Pagination (Using CSS) (add a transion effect for extra points)

<html> <head> <style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color: #4CAF50; color: white; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>Active and Hoverable Pagination</h2> <p>Move the mouse over the numbers.</p> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a class="active" href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div> </body>

Simple Pagination using CSS

<html> <head> <style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } </style> </head> <body> <h2>Simple Pagination</h2> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div> </body>

Text in Transparent Box (show an example)

<html> <head> <style> div.background { background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p { margin: 5%; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box.</p> </div> </div> </body> </html>

Show an example of a 4 picture css responsive image gallery

<html> <head> <style> div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body> <h2>Responsive Image Gallery</h2> <h4>Resize the browser window to see the effect.</h4> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_fjords.jpg"> <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> </div> </body>

CSS can be used to create an image gallery. (create 4 inline pictures with a hover effect)

<html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="gallery"> <a target="_blank" href="fjords.jpg"> <img src="fjords.jpg" alt="Fjords" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="mountains.jpg"> <img src="mountains.jpg" alt="Mountains" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html>

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:

<html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } li a { display: block; padding: 8px; background-color: #dddddd; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p> <p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p> <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p> </body>

Specify the Speed Curve of the Animation

<html> <head> <style> div { width: 100px; height: 50px; background-color: red; font-weight: bold; position: relative; -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ animation: mymove 5s infinite; } /* Safari 4.0 - 8.0 */ #div1 {-webkit-animation-timing-function: linear;} #div2 {-webkit-animation-timing-function: ease;} #div3 {-webkit-animation-timing-function: ease-in;} #div4 {-webkit-animation-timing-function: ease-out;} #div5 {-webkit-animation-timing-function: ease-in-out;} /* Standard syntax */ #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove { from {left: 0px;} to {left: 300px;} } /* Standard syntax */ @keyframes mymove { from {left: 0px;} to {left: 300px;} } </style> </head> <body> <p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p> <div id="div1">linear</div> <div id="div2">ease</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> </body>

Link for font awesome (add to the head)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Link for bootstrap glyphicons (comes with whole bootstrap)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

What code would you write to link the stylesheet.css file in your html file?

<link rel="stylesheet" href="stylesheet.css" />

You can also have different stylesheets for different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Show an example of an external stylesheet

<link rel="stylesheet" type="text/css" href="mystyle.css">

If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } </style> </head> <body> <p>Resize the browser window to see the effect.</p> <div></div> </body>

If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid red; } </style> </head> <body> <p>Resize the browser window to see the effect.</p> <div></div>

Change the cursor The cursor property specifies the type of cursor to display. (show all of the examples)

<span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br>

Show an example of grid templat column and rows

<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; width: 100%; background: LightGray; display: grid; grid-template-columns: 100px 100px 100px; /* add your code below this line */ grid-template-rows: 50px 50px; /* add your code above this line */ } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>

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.). (show 4 examples using 90 degree angles)

<style> #grad1 { height: 100px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */ } #grad2 { height: 100px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */ } #grad3 { height: 100px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(180deg, red, yellow); /* Standard syntax (must be last) */ } #grad4 { height: 100px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Linear Gradients - Using Different Angles</h1> <div id="grad1" style="text-align:center;">0deg</div><br> <div id="grad2" style="text-align:center;">90deg</div><br> <div id="grad3" style="text-align:center;">180deg</div><br> <div id="grad4" style="text-align:center;">-90deg</div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

Radial Gradient Key words The size parameter defines the size of the gradient. It can take four values: closest-side farthest-side closest-corner farthest-corner

<style> #grad1 { height: 150px; width: 150px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(closest-side at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */ } #grad2 { height: 150px; width: 150px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */ } #grad3 { height: 150px; width: 150px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(closest-corner at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */ } #grad4 { height: 150px; width: 150px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Radial Gradients - Different size keywords</h1> <h2>closest-side:</h2> <div id="grad1"></div> <h2>farthest-side:</h2> <div id="grad2"></div> <h2>closest-corner:</h2> <div id="grad3"></div> <h2>farthest-corner (default):</h2> <div id="grad4"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> </body>

The resize property specifies if (and how) an element should be resizable by the user. This example is horizontal.

<style> div { border: 2px solid; padding: 20px; width: 300px; resize: horizontal; overflow: auto; } </style> </head> <body> <h1>The resize Property</h1> <div> <p>Let the user resize only the width of this div element.</p> <p>To resize: Click and drag the bottom right corner of this div element.</p> </div> <p><b>Note:</b> Internet Explorer does not support the resize property.</p> </body>

Radial Gradient - Differently Spaced Color Stops The following example shows a radial gradient with differently spaced color stops:

<style> #grad1 { height: 150px; width: 200px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Radial Gradient - Differently Spaced Color Stops</h1> <div id="grad1"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> IT'S ALL IN THE PercentagesWhat MAN!

What are the shapes you can use for a radial gradient?

<style> #grad1 { height: 150px; width: 200px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */ } #grad2 { height: 150px; width: 200px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Radial Gradient - Shapes</h1> <h2>Ellipse (this is default):</h2> <div id="grad1"></div> <h2><strong>Circle:</strong></h2> <div id="grad2"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> </body>

Repeating a radial-gradient (How Sway How!?)

<style> #grad1 { height: 150px; width: 200px; background: red; /* For browsers that do not support gradients */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Repeating Radial Gradient</h1> <div id="grad1"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> </body>

Linear Gradient - Diagonal The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow:

<style> #grad1 { height: 200px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Linear Gradient - Diagonal</h1> <p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p> <div id="grad1"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> </body>

Linear Gradient - Left to Right (put 2 colors in a div and show an example)

<style> #grad1 { height: 200px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Linear Gradient - Left to Right</h1> <p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p> <div id="grad1"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> </body>

Repeating a linear-gradient The repeating-linear-gradient() function is used to repeat linear gradients: Show some example

<style> #grad1 { height: 200px; background: red; /* For browsers that do not support gradients */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */ } #grad2 { height: 200px; background: red; /* For browsers that do not support gradients */ background: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */ } #grad3 { height: 200px; background: red; /* For browsers that do not support gradients */ background: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */ } #grad4 { height: 200px; background: red; /* For browsers that do not support gradients */ background: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Repeating Linear Gradient</h1> <div id="grad1"></div> <p>A repeating gradient on 45deg axe starting red and finishing green:</p> <div id="grad2"></div> <p>A repeating gradient on 190deg axe starting red and finishing green:</p> <div id="grad3"></div> <p>A repeating gradient on 90deg axe starting red and finishing green:</p> <div id="grad4"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p> </body> The percentage probably defines the amount of a color will be present

Example of in image sprite

<style> #home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; } #next { width: 43px; height: 44px; background: url(img_navsprites.gif) -91px 0; } </style> </head> <body> <img id="home" src="img_trans.gif"><br><br> <img id="next" src="img_trans.gif"> </body>

Create an image modal using CSS and js

<style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes zoom { from {transform: scale(0.1)} to {transform: scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } </style> </head> <body> <h2>Image Modal</h2> <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p> <p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p> <p>Don't worry if you do not understand the code right away. When you are done with CSS, go to our JavaScript Tutorial to learn more.</p> <img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script> </body>

Add a "pressed" effect on click: for a css button

<style> .button { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover {background-color: #3e8e41} .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <h2>Animated Buttons - "Pressed Effect"</h2> <button class="button">Click Me</button> </body>

Usinng CSS display use make panel appear out of no where

<style> #panel, .flip { font-size: 16px; padding: 10px; text-align: center; background-color: #4CAF50; color: white; border: solid 1px #a6d8a8; margin: auto; } #panel { display: none; } </style> </head> <body> <p class="flip" onclick="myFunction()">Click to show panel</p> <div id="panel"> <p>This panel contains a div element, which is hidden by default (display: none).</p> <p>It is styled with CSS and we use JavaScript to show it (display: block).</p> <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p> <p>You will learn more about JavaScript in our JavaScript Tutorial.</p> </div> <script> function myFunction() { document.getElementById("panel").style.display = "block"; } </script>

Show an example of a CSS responsive form

<style> * { box-sizing: border-box; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } } </style> </head> <body> <h2>Responsive Form</h2> <p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">First Name</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Your name.."> </div> </div> <div class="row"> <div class="col-25"> <label for="lname">Last Name</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> </div> </div> <div class="row"> <div class="col-25"> <label for="country">Country</label> </div> <div class="col-75"> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> </div> </div> <div class="row"> <div class="col-25"> <label for="subject">Subject</label> </div> <div class="col-75"> <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div> </body>

do an entire web layout using the float property:

<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> </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>

Bordered Button Group create a bordered button group using CSS.

<style> .btn-group .button { background-color: #4CAF50; /* Green */ border: 1px solid green; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left; } .btn-group .button:not(:last-child) { border-right: none; /* Prevent double borders */ } .btn-group .button:hover { background-color: #3e8e41; } </style> </head> <body> <h2>Bordered Button Group</h2> <p>Add borders to create a bordered button group:</p> <div class="btn-group"> <button class="button">Button</button> <button class="button">Button</button> <button class="button">Button</button> <button class="button">Button</button> </div> <p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p> </body>

Shadow Buttons add shodaws to your buttons. One with a hover effect and one without

<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); } </style> </head> <body> <h2>Shadow Buttons</h2> <p>Use the box-shadow property to add shadows to the button:</p> <button class="button button1">Shadow Button</button> <button class="button button2">Shadow on Hover</button> </body>

Hoverable Buttons using CSS

<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4CAF50; } .button1:hover { background-color: #4CAF50; color: white; } .button2 { background-color: white; color: black; border: 2px solid #008CBA; } .button2:hover { background-color: #008CBA; color: white; } .button3 { background-color: white; color: black; border: 2px solid #f44336; } .button3:hover { background-color: #f44336; color: white; } .button4 { background-color: white; color: black; border: 2px solid #e7e7e7; } .button4:hover {background-color: #e7e7e7;} .button5 { background-color: white; color: black; border: 2px solid #555555; } .button5:hover { background-color: #555555; color: white; } </style> </head> <body> <h2>Hoverable Buttons</h2> <p>Use the :hover selector to change the style of the button when you move the mouse over it.</p> <p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p> <button class="button button1">Green</button> <button class="button button2">Blue</button> <button class="button button3">Red</button> <button class="button button4">Gray</button> <button class="button button5">Black</button> </body>

Add an arrow on hover: For a CSS only button

<style> .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } </style> </head> <body> <h2>Animated Button</h2> <button class="button" style="vertical-align:middle"><span>Hover </span></button> </body>

Add a "ripple" effect on click: CSS only

<style> .button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #f1f1f1; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px !important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } </style> </head> <body> <h2>Animated Button - Ripple Effect</h2> <button class="button">Click Me</button> </body>

Center Vertically - Using position & transform If padding and line-height are not options, a third solution is to use positioning and the transform property:

<style> .center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style>

Button on Image CSS

<style> .container { position: relative; width: 100%; max-width: 400px; } .container img { width: 100%; height: auto; } .container .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #f1f1f1; color: black; font-size: 16px; padding: 16px 30px; border: none; cursor: pointer; border-radius: 5px; text-align: center; } .container .btn:hover { background-color: black; color: white; } </style> </head> <body> <h2>Button on Image</h2> <p>Add a button to an image:</p> <div class="container"> <img src="img_lights.jpg" alt="Snow" style="width:100%"> <button class="btn">Button</button> </div> </body>

Slide in Overlay from the Top image

<style> .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height:0; transition: .5s ease; } .container:hover .overlay { bottom: 0; height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> </head> <body> <h2>Slide in Overlay from the Top</h2> <div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div>

Create a Fade in image overlay

<style> .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> </head> <body> <h2>Fade in Overlay</h2> <div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div>

Fade in a box overlay

<style> .container { position: relative; width: 50%; } .image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%) } .container:hover .image { opacity: 0.3; } .container:hover .middle { opacity: 1; } .text { background-color: #4CAF50; color: white; font-size: 16px; padding: 16px 32px; } </style> </head> <body> <h2>Fade in a Box</h2> <div class="container"> <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%"> <div class="middle"> <div class="text">John Doe</div> </div> </div> </body>

Positioning Text In an Image (center)

<style> .container { position: relative; } .center { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Image Text</h2> <p>Center text in image:</p> <div class="container"> <img src="trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="center">Centered</div> </div> </body>

Text in top left of image.

<style> .container { position: relative; } .topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Image Text</h2> <p>Add some text to an image in the top left corner:</p> <div class="container"> <img src="trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="topleft">Top Left</div> </div> </body>

The most common way to use the clear property is after you have used a float property on an element. When clearing floats, you should match the clear to the float. If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page. The following example clears the float to the left. Means that no floating elements are allowed on the left side (of the div):

<style> .div1 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div2 { border: 1px solid red; } .div3 { float: left; width: 100px; height: 50px; margin: 10px; border: 3px solid #73AD21; } .div4 { border: 1px solid red; clear: left; } </style> </head> <body> <h2>Without clear</h2> <div class="div1">div1</div> <div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div> <br> <h2>With clear</h2> <div class="div3">div3</div> <div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div> </body>

The flex-shrink Property The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

<style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container>div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-shrink Property</h1> <p>Do not let the third flex item shrink as much as the other flex items:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </body>

Dropdown Menu Create a dropdown menu that allows the user to choose an option from a list (CSS only)

<style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .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); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p> </body>

Show examples of aligned left and right content

<style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>Aligned Dropdown Content</h2> <p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p> <div class="dropdown" style="float:left;"> <button class="dropbtn">Left</button> <div class="dropdown-content" style="left:0;"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown" style="float:right;"> <button class="dropbtn">Right</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body>

Basic Dropdown Create a dropdown box that appears when the user moves the mouse over an element. (CSS)

<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> <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div>

Dropdown Image How to add an image and other content inside the dropdown box. (Using CSS)

<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); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .desc { padding: 15px; text-align: center; } </style> </head> <body> <h2>Dropdown Image</h2> <p>Move the mouse over the image below to open the dropdown content.</p> <div class="dropdown"> <img src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50"> <div class="dropdown-content"> <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> <div class="desc">Beautiful Trolltunga, Norway</div> </div> </div> </body>

All Values of The CSS object-fit Property

<style> .fill {object-fit: fill;} .contain {object-fit: contain;} .cover {object-fit: cover;} .scale-down {object-fit: scale-down;} .none {object-fit: none;} </style> </head> <body> <h1>The object-fit Property</h1> <h2>No object-fit:</h2> <img src="paris.jpg" alt="Paris" style="width:200px;height:400px"> <h2>object-fit: fill (this is default):</h2> <img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:400px"> <h2>object-fit: contain:</h2> <img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:400px"> <h2>object-fit: cover:</h2> <img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:400px"> <h2>object-fit: scale-down:</h2> <img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:400px"> <h2>object-fit: none:</h2> <img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:400px"> </body>

The flex-basis Property The flex-basis property specifies the initial length of a flex item.

<style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-basis Property</h1> <p>Set the initial length of the third flex item to 200 pixels:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis:200px">3</div> <div>4</div> </div>

The flex-grow Property The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

<style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-grow Property</h1> <p>Make the third flex item grow eight times faster than the other flex items:</p> <div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div> </body>

The flex Property The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

<style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container>div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex Property</h1> <p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div> </body>

The order property specifies the order of the flex items (default is 0)

<style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-container>div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The order Property</h1> <p>Use the order property to sort the flex items as you like:</p> <div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>

The direct child elements of a flex container automatically becomes flexible (flex) items. (show an example)

<style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>Flexible Items</h1> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <p>All direct children of a flexible container becomes flexible items.</p> </body>

Flexbox Elements To start using the Flexbox model, you need to first define a flex container.

<style> .flex-container { display: flex; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> <p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p> <p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

The flex-direction property defines in which direction the container wants to stack the flex items.

<style> .flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>

The flex-flow Property The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

<style> .flex-container { display: flex; flex-flow: row wrap; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-flow Property</h1> <p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> <p>Try resizing the browser window.</p> </body>

The flex-wrap property specifies whether the flex items should wrap or not. The examples below have 12 flex items, to better demonstrate the flex-wrap property.

<style> .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The flex-wrap Property</h1> <p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p> OR The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order: .flex-container { display: flex; flex-wrap: wrap-reverse; }

The baseline value aligns the flex items such as their baselines aligns: (Gives a staggered appearence. Not completely shure how this occurs.)

<style> .flex-container { display: flex; height: 200px; align-items: baseline; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-items Property</h1> <p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p> <div class="flex-container"> <div><h1>1</h1></div> <div><h6>2</h6></div> <div><h3>3</h3></div> <div><small>4</small></div> </div> </body>

The align-items for flex-box what does it do?

<style> .flex-container { display: flex; height: 200px; align-items: center; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-items Property</h1> <p>The "align-items: center;" aligns the flex items in the middle of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

The center value for flex box align-items

<style> .flex-container { display: flex; height: 200px; align-items: center; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-items Property</h1> <p>The "align-items: center;" aligns the flex items in the middle of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

The flex-start value aligns the flex items at the top of the container:

<style> .flex-container { display: flex; height: 200px; align-items: flex-start; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-items Property</h1> <p>The "align-items: flex-start;" aligns the flex items at the top of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

The stretch value stretches the flex items to fill the container (this is default)

<style> .flex-container { display: flex; height: 200px; align-items: stretch; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-items Property</h1> <p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

The align-self Property The align-self property specifies the alignment for the selected item inside the flexible container. The align-self property overrides the default alignment set by the container's align-items property.

<style> .flex-container { display: flex; height: 200px; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-self Property</h1> <p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> <p>The align-self property overrides the align-items property of the container.</p> </body>

Align-self property with flex start and flex end

<style> .flex-container { display: flex; height: 200px; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-self Property</h1> <p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p> <p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p> <div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div> <p>The align-self property overrides the align-items property of the container.</p> </body>

Flexbox align-content: center; (what does it do?)

<style> .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-content Property</h1> <p>The "align-content: center;" displays the flex lines in the middle of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div>

The align-content Property The align-content property is used to align the flex lines. (css flexbox)

<style> .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-content Property</h1> <p>The "align-content: space-between;" displays the flex lines with equal space between them:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div>

The space-between value displays the flex lines with equal space between them: (css flexbox)

<style> .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-content Property</h1> <p>The "align-content: space-between;" displays the flex lines with equal space between them:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div> </body>

Flex box align-content stretch

<style> .flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The align-content Property</h1> <p>The "align-content: stretch;" stretches the flex lines to take up the remaining space (this is default):</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> </div>

The justify-content Property The justify-content property is used to align the flex items:

<style> .flex-container { display: flex; justify-content: center; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The justify-content Property</h1> <p>The "justify-content: center;" aligns the flex items at the center of the container:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

The space-around value displays the flex items with space before, between, and after the lines:

<style> .flex-container { display: flex; justify-content: space-around; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The justify-content Property</h1> <p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

The space-between value displays the flex items with space between the lines:

<style> .flex-container { display: flex; justify-content: space-between; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>The justify-content Property</h1> <p>The "justify-content: space-between;" displays the flex items with space between the lines:</p> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

inline-block vs css float example (try to understand both)

<style> .floating-box { float: left; width: 150px; height: 75px; margin: 10px; border: 3px solid #73AD21; } .after-box { clear: left; border: 3px solid red; } </style> </head> <body> <h2>The Old Way - using float</h2> <div class="floating-box">Floating box 1</div> <div class="floating-box">Floating box 2</div> <div class="floating-box">Floating box 3</div> <div class="floating-box">Floating box 4</div> <div class="floating-box">Floating box 5</div> <div class="floating-box">Floating box 6</div> <div class="floating-box">Floating box 7</div> <div class="floating-box">Floating box 8</div> <div class="after-box">Another box, after the floating boxes...</div> </body> <style> .floating-box { display: inline-block; width: 150px; height: 75px; margin: 10px; border: 3px solid #73AD21; } .after-box { border: 3px solid red; } </style> </head> <body> <h2>The New Way - using inline-block</h2> <div class="floating-box">Floating box 1</div> <div class="floating-box">Floating box 2</div> <div class="floating-box">Floating box 3</div> <div class="floating-box">Floating box 4</div> <div class="floating-box">Floating box 5</div> <div class="floating-box">Floating box 6</div> <div class="floating-box">Floating box 7</div> <div class="floating-box">Floating box 8</div> <div class="after-box">Another box, after the floating boxes...</div> </body>

Image Sprites (what are they? ) Explain?

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

The grid-template-columns property can also be used to specify the size (width) of the columns

<style> .grid-container { display: grid; grid-template-columns: 80px 200px auto 30px; 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>grid-template-columns</h1> <p>Use the <em>grid-template-columns</em> property to specify the size of each column.</p> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>

The grid-column Property: The grid-column property defines on which column(s) to place an item. You define where the item will start, and where the item will end. With either spans or lines (show example of both)

<style> .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto; 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; } .item1 { grid-column: 1 / 5; } </style> </head> <body> <h1>The grid-column Property</h1> <p>Use the <em>grid-column</em> property to specify where to place an item.</p> <p>Item1 will start on column-line 1 and end on column-line 5:</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> <div class="item13">13</div> <div class="item14">14</div> <div class="item15">15</div> </div> </body> ////Example two//// <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto; 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; } .item2 { grid-column: 2 / span 3; } </style> </head> <body> <h1>The grid-column Property</h1> <p>Use the <em>grid-column</em> property to specify where to place an item.</p> <p>Item2 will start on column line 2 and span 3 columns:</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> <div class="item13">13</div> <div class="item14">14</div> <div class="item15">15</div> <div class="item16">16</div> </div> </body>

The grid-template-columns Property (show an example of a basic grid)

<style> .grid-container { display: grid; grid-template-columns: auto auto auto auto; 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>grid-template-columns</h1> <p>You can use the <em>grid-template-columns</em> property to specify the number of columns in your grid layout.</p> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </body> If you have more than 4 items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The Grid Layout allows us to position the items anywhere we like.

<style> .grid-container { display: grid; grid-template-columns: auto auto auto; 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; } .item1 { grid-area: 1 / 3 / 2 / 4; } .item2 { grid-area: 2 / 3 / 3 / 4; } .item3 { grid-area: 1 / 1 / 2 / 2; } .item4 { grid-area: 1 / 2 / 2 / 3; } .item5 { grid-area: 2 / 1 / 3 / 2; } .item6 { grid-area: 2 / 2 / 3 / 3; } </style> </head> <body> <h1>Sort the Items</h1> <p>The items do not have to be displayed in the same order as they are written in the HTML code.</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> </div> </body>

The grid-template-rows property defines the height of each row.

<style> .grid-container { display: grid; grid-template-columns: auto auto auto; grid-template-rows: 80px 200px; 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>The grid-template-rows Property</h1> <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <p>Use the <em>grid-template-rows</em> property to specify the size (height) of each row.</p> </body>

The grid-area property can also be used to assign names to grid items.

<style> .item1 { grid-area: myArea; } .grid-container { display: grid; grid-template-areas: 'myArea myArea myArea myArea myArea'; 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>The grid-area Property</h1> <p>You can use the <em>grid-area</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-template-areas</em> property on the grid container.</p> <p>Item1, is called "myArea" and will take up the place of all five columns:</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> </div> </body> Each row is defined by apostrophes (' ') The columns in each row is defined inside the apostrophes, separated by a space.

The column-rule-color property specifies the color of the rule between columns:

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */ -moz-column-rule-color: lightblue; /* Firefox */ column-rule-color: lightblue; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-color property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div>

Positioning tooltips (show a css example of the left)

<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; right: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Left Tooltip</h2> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> </body>

The column-rule-style property specifies the style of the rule between columns:

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

Column-rule property can be written in short hand

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

column-count property specifies the number of columns an element should be divided into. (show an example)

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

Rounded Borders Pagiantion (CSS)

<style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} .pagination a:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .pagination a:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } </style> </head> <body> <h2>Pagination with Rounded Borders</h2> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a class="active" href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div> </body>

Add spaces between your birdered pagination.

<style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; margin: 0 4px; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>Pagination with Margins</h2> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div> </body>

Bordered Pagination (css maker hoverable as well)

<style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>Pagination with Borders</h2> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div> </body>

Create next and previous paginations and navigation paginations

<style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <p>Next/Previous buttons:</p> <div class="pagination"> <a href="#">❮</a> <a href="#">❯</a> </div> <p>Navigation pagination:</p> <div class="pagination"> <a href="#" class="active">Home</a> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </body>

Rounded Active and Hoverable Buttons Pagination (with CSS)

<style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color: #4CAF50; color: white; border-radius: 5px; } .pagination a:hover:not(.active) { background-color: #ddd; border-radius: 5px; } </style> </head> <body> <h2>Rounded Active and Hover Buttons</h2> <div class="pagination"> <a href="#">&laquo;</a> <a href="#">1</a> <a href="#" class="active">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">&raquo;</a> </div> </body>

Tooltip Arrows To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble. This example demonstrates how to add an arrow to the bottom of the tooltip:

<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Top Tooltip w/ Bottom Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> </body>

Right tooltip whit left arrow

<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 110%; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Right Tooltip w/ Left Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> </body>

Create a tooltip that appears when the user moves the mouse over an element: USING CSS!

<style> /* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </style> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div>

You can also use the (max-width: ..) and (min-width: ..) values to set a minimum width and a maximum width. For example, when the browser's width is between 600 and 900px, change the appearance of a <div> element:

<style> @media screen and (max-width: 900px) and (min-width: 600px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } } </style> </head> <body> <h2>Change the appearance of DIV on different screen sizes</h2> <div class="example">Example DIV.</div> <p>When the browser's width is between 600 and 900px, change the appearance of DIV. <strong>Resize the browser window to see the effect</strong>.</p> </body>

Multiple Value Media Query Using an additional value: In the example below, we add an additional media query to our already existing one using a comma (this will behave like an OR operator):

<style> @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { div.example{ font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } } </style> </head> <body> <h2>Change the appearance of DIV on different screen sizes</h2> <div class="example">Example DIV.</div> <p>When the browser's width is between 600 and 900px OR above 1100px, change the appearance of DIV. <strong>Resize the browser window to see the effect</strong>.</p> </body>

CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. (show an example)

<style> a[target] { background-color: yellow; } </style> </head> <body> <p>The links with a target attribute gets a yellow background:</p> <a href="https://www.w3schools.com">w3schools.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>

Orientation: Portrait / Landscape Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation:

<style> body { background-color: lightgreen; } @media only screen and (orientation: landscape) { body { background-color: lightblue; } } </style> </head> <body> <p>Resize the browser window. When the width of this document is larger than the height, the background color is "lightblue", otherwise it is "lightgreen".</p> </body>

Nesting Counters

<style> body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Section " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>HTML tutorials:</h1> <h2>HTML Tutorial</h2> <h2>CSS Tutorial</h2> <h1>Scripting tutorials:</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>XML tutorials:</h1> <h2>XML</h2> <h2>XSL</h2> <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p> </body>

overflow: scroll

<style> div { background-color: #eee; width: 200px; height: 100px; border: 1px dotted black; overflow: scroll; } </style> </head> <body> <h2>CSS Overflow</h2> <p>Setting the overflow 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):</p> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div> </body>

Explain overflow-x and overflow-y and show examples

<style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow-x: hidden; overflow-y: scroll; } </style> </head> <body> <h2>CSS Overflow</h2> <p>You can also change the overflow of content horizontally or vertically.</p> <p>overflow-x specifies what to do with the left/right edges of the content.<br> overflow-y specifies what to do with the top/bottom edges of the content.</p> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div> </body>

Overflow: hidden (css what will it do?)

<style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: hidden; } </style> </head> <body> <h2>CSS Overflow</h2> <p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p> <p>Try to remove the overflow property to understand how it works.</p> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div> </body>

overflow: visible By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

<style> div { background-color: #eee; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; } </style> </head> <body> <h2>CSS Overflow</h2> <p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p> <div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div> </body>

If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:

<style> div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red; } </style> </head> <body> <p>Resize the browser window to see the effect.</p> <div></div>

Multiple Steps in animation duration,

<style> div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } /* Standard syntax */ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> </body>

CSS The skewX() Method

<style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { -ms-transform: skewX(20deg); /* IE 9 */ -webkit-transform: skewX(20deg); /* Safari */ transform: skewX(20deg); /* Standard syntax */ } </style> </head> <body> <h1>The skewX() Method</h1> <p>The skewX() method skews an element along the X-axis by the given angle.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is skewed 20 degrees along the X-axis. </div>

CSS The skewY() Method

<style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari */ transform: skewY(20deg); /* Standard syntax */ } </style> </head> <body> <h1>The skewY() Method</h1> <p>The skewY() method skews an element along the Y-axis by the given angle.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is skewed 20 degrees along the Y-axis. </div> </body>

Hide Elements With Media Queries Another common use of media queries, is to hide elements on different screen sizes:

<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>

CSS image of a card with box shadow.

<style> div.polaroid { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; } div.container { padding: 10px; } </style> </head> <body> <h2>Polaroid Images / Cards</h2> <p>The box-shadow property can be used to create paper-like cards:</p> <div class="polaroid"> <img src="rock600x400.jpg" alt="Norway" style="width:100%"> <div class="container"> <p>Hardanger, Norway</p> </div> </div>

Example of an image that floats left of the text.

<style> img { float: left; } </style> </head> <body> <p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p> <p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p> </body>

Vertical resizable element (show one)

<style> div { border: 2px solid; padding: 20px; width: 300px; resize: vertical; overflow: auto; } </style> </head> <body> <h1>The resize Property</h1> <div> <p>Let the user resize only the height of this div element.</p> <p>To resize: Click and drag the bottom right corner of this div element.</p> </div> <p><b>Note:</b> Internet Explorer does not support the resize property.</p> </body>

Transparent Hover Effect create three images side by side. Put them in line and when you hover over them make the clear.

<style> img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <h1>Image Transparency</h1> <p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p> <img src="img_forest.jpg" alt="Forest" width="170" height="100"> <img src="img_mountains.jpg" alt="Mountains" width="170" height="100"> <img src="img_fjords.jpg" alt="Fjords" width="170" height="100"> <p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p> </body>

CSS clip property: This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

<style> img { position: absolute; clip: rect(0px,60px,200px,0px); } </style> </head> <body> <img src="w3css.gif" width="100" height="140"> </body>

Overlapping Elements When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). (show an example of this)

<style> img { position: absolute; left: 0px; top: 0px; z-index: -1; } </style> </head> <body> <h1>This is a heading</h1> <img src="w3css.gif" width="100" height="140"> <p>Because the image has a z-index of -1, it will be placed behind the text.</p> </body>

Flip an image using css on hover

<style> img:hover { -webkit-transform: scaleX(-1); transform: scaleX(-1); } </style> </head> <body> <h2>Flip an Image</h2> <p>Move your mouse over the image.</p> <img src="paris.jpg" alt="Paris" width="400" height="300"> </body>

:focus (css) (when do you use this psuedo class?)

<style> input:focus { background-color: yellow; } </style> </head> <body> <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>

Show a tolltip hover of a hidden element

<style> p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } </style> </head> <body> <div>Hover over me to show the p element <p>Tada! Here I am!</p> </div>

Pseudo-elements and CSS Classes Pseudo-elements can be combined with CSS classes:

<style> p.intro::first-letter { color: #ff0000; font-size:200%; } </style> </head> <body> <p class="intro">This is an introduction.</p> <p>This is a paragraph with some text. A bit more text even.</p> </body>

CSS - The :first-child Pseudo-class The :first-child pseudo-class matches a specified element that is the first child of another element. (show an example)

<style> p:first-child { color: blue; } </style> </head> <body> <p>This is some text.</p> <p>This is some text.</p> <p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>

CSS - The :lang Pseudo-class (show an example)

<style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> The :lang pseudo-class allows you to define special rules for different languages. In the example below, :lang defines the quotation marks for <q> elements with lang="no":

CSS empty-cells Property You can hide empty cells in your table.

<style> table.ex1 { empty-cells: hide; } table.ex2 { empty-cells: show; } </style> </head> <body> <h1>The empty-cells Property</h1> <h2>empty-cells: hide:</h2> <table class="ex1" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td></td> </tr> </table> <h2>empty-cells: show (default):</h2> <table class="ex2" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td></td> </tr> </table>

The following example lets the user resize both the height and width of a <div> element:

<style> div { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } </style> </head> <body> <h1>The resize Property</h1> <div> <p>Let the user resize both the height and the width of this div element.</p> <p>To resize: Click and drag the bottom right corner of this div element.</p> </div> <p><b>Note:</b> Internet Explorer does not support the resize property.</p> </body>

Create a navbar with a dropdown menu

<style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { 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); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </body>

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

<style> ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body>

Breadcrumbs (create with css only)

<style> ul.breadcrumb { padding: 8px 16px; list-style: none; background-color: #eee; } ul.breadcrumb li {display: inline;} ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0"; } ul.breadcrumb li a {color: green;} </style> </head> <body> <h2>Breadcrumb Pagination</h2> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Summer 15</a></li> <li>Italy</li> </ul> </body>

Elaborate example of a box shadow

<style> #boxshadow { position: relative; -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5); -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); padding: 10px; background: white; } /* Make the image fit the box */ #boxshadow img { width: 100%; border: 1px solid #8a4419; border-style: inset; } #boxshadow::after { content: ''; position: absolute; z-index: -1; /* hide shadow behind image */ -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% */ height: 100px; bottom: 0; } </style> </head> <body> <div id="boxshadow"> <img src="rock600x400.jpg" alt="Norway" width="600" height="400"> </div>

The column-rule-width property specifies the width of the rule between columns:

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

Specify How Many Columns an Element Should Span The column-span property specifies how many columns an element should span across.

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } h2 { -webkit-column-span: all; /* Chrome, Safari, Opera */ column-span: all; } </style> </head> <body> <p><b>Note:</b> Firefox and Internet Explorer 9 (and earlier versions) do not support the column-span property.</p> <div class="newspaper"> <h2>Lorem Ipsum Dolor Sit Amet</h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

Specify The Column Width The column-width property specifies a suggested, optimal width for the columns.

<style> .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-width: 100px; /* Chrome, Safari, Opera */ -moz-column-width: 100px; /* Firefox */ column-width: 100px; } </style> </head> <body> <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-width property.</p> <div class="newspaper"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </body>

Delay an Animation show an example of animation delay(you can also add negative values to you delay )

<style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; animation-delay: 2s; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } /* Standard syntax */ @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> ///// div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-delay: -2s; }

Do some short hand transitions

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */ transition: width 2s linear 1s; } div:hover { width: 300px; } </style> </head> <body> <h1>Using The transition Shorthand Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> </body>

Show a background color CSS animation change

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */ transition: width 2s linear 1s; } div:hover { width: 300px; } </style> </head> <body> <h1>Using The transition Shorthand Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> </body>

Transition + Transformation The following example also adds a transformation to the transition effect: SHow and example where you are rotating some shit and growing it.

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */ transition: width 2s, height 2s, transform 2s; } div:hover { width: 300px; height: 300px; -webkit-transform: rotate(180deg); /* Safari */ transform: rotate(180deg); } </style> </head> <body> <h1>Transition + Transform</h1> <p>Hover over the div element below:</p> <div></div> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> </body>

CSS Transitions Change Several Property Values The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 4s; } div:hover { width: 300px; height: 300px; } </style> </head> <body> <h1>The transition Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

You can specify the curve of a transition

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 10s; } /* For Safari 3.1 to 6.0 */ #div1 {-webkit-transition-timing-function: linear;} #div2 {-webkit-transition-timing-function: ease;} #div3 {-webkit-transition-timing-function: ease-in;} #div4 {-webkit-transition-timing-function: ease-out;} #div5 {-webkit-transition-timing-function: ease-in-out;} /* Standard syntax */ #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} div:hover { width: 300px; } </style> </head> <body> <h1>The transition-timing-function Property</h1> <p>Hover over the div elements below, to see the different speed curves:</p> <div id="div1">linear</div><br> <div id="div2">ease</div><br> <div id="div3">ease-in</div><br> <div id="div4">ease-out</div><br> <div id="div5">ease-in-out</div><br> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> </body>

The transition-delay property specifies a delay (in seconds) for the transition effect.

<style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 3s; /* Safari */ -webkit-transition-delay: 1s; /* Safari */ transition: width 3s; transition-delay: 1s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition-delay Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p><b>Note:</b> The transition effect has a 1 second delay before starting.</p> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> </body>

CSS Outline Offset The outline-offset property adds space between an outline and the edge or border of an element.

<style> div.ex1 { margin: 20px; border: 1px solid black; outline: 4px solid red; outline-offset: 15px; } div.ex2 { margin: 10px; border: 1px solid black; outline: 5px dashed blue; outline-offset: 5px; } </style> </head> <body> <h1>The outline-offset Property</h1> <div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div> <br> <div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div> </body>

Create hover effect for a hidden text with CSS overflow

<style> div.test { white-space: nowrap; width: 200px; overflow: hidden; border: 1px solid #000000; } div.test:hover { text-overflow: inherit; overflow: visible; } </style> </head> <body> <p>Hover over the two divs below, to see the entire text.</p> <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> <br> <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> </body>

A CSS style input button (take a note of the cursor button)

<style> input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <p>Styled input buttons.</p> <input type="button" value="Button"> <input type="reset" value="Reset"> <input type="submit" value="Submit"> </body>

Animated Search Input (css let a search input grow using the transition property)

<style> input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } </style> </head> <body> <p>Animated search input:</p> <form> <input type="text" name="search" placeholder="Search.."> </form> </body>

CSS word-break property. (show and example)

<style> p.test1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.test2 { width: 140px; border: 1px solid #000000; word-break: break-all; } </style> </head> <body> <h1>The word-break Property</h1> <p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p> <p class="test2">This paragraph contains some text. The lines will break at any character.</p> <p><b>Note:</b> The word-break property is not supported in Opera 12 and earlier versions.</p> </body>

Create a table with caption

<table> <caption>Table 1.1 Customers</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> </table>

Right-Align Links Right-align links by floating the list items to the right (float:right;):

<ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right"><a class="active" href="#about">About</a></li> </ul>

Using Bold Text You must add another @font-face rule containing descriptors for bold text

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }

You must add another @font-face rule containing descriptors for bold text:

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }

Setting The Viewport HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. You should include the following <meta> viewport element in all your web pages:

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Which has higher priority .intro {background-color: yellow;} h1 {background-color: red;}

A class selector beats any number of element selectors - a class selector such as .intro beats h1, p, div, etc:

The font-size value can be an absolute, or relative size. (explain)

Absolute size: Sets the text to a specified size Does not allow a user to change the text size in all browsers (bad for accessibility reasons) Absolute size is useful when the physical size of the output is known Relative size: Sets the size relative to surrounding elements Allows a user to change the text size in browsers

Responsive Table (css) A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

Center Links & Add Borders to your vertical navbar (css)

Add text-align:center to <li> or <a> to center the links. Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one: ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }

Multiple selectors

Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.

The CSS @font-face Rule

Allows you to use a font that is not on your computer. @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; }

position: absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static. ie' div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }

position: fixed (show an example)

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; }

position: sticky;

An element with position: sticky; 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).

Show an example of how to use a counter!

Automatic Numbering With Counters CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used). To work with CSS counters we will use the following properties: counter-reset - Creates or resets a counter counter-increment - Increments a counter value content - Inserts generated content counter() or counters() function - Adds the value of a counter to an element To use a CSS counter, it must first be created with counter-reset. The following example creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element: <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; } </style> </head> <body> <h1>Using CSS Counters:</h1> <h2>HTML Tutorial</h2> <h2>CSS Tutorial</h2> <h2>JavaScript Tutorial</h2> <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p> </body>

Elliptical border radius. What does it mean (CSS)

Basically borders with a percentage or ratio. #rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px / 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }

Styling Textareas Tip: Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner): (css)

Because text areas can be resized. <style> textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; } </style> </head> <body> <p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p> <form> <textarea>Some text...</textarea> </form> </body>

Focused Inputs (how to change inputs using CSS)

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input. Use the :focus selector to do something with the input field when it gets focus: <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #555; outline: none; } input[type=text]:focus { background-color: lightblue; } </style> </head> <body> <p>In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):</p> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"> </form>

Specify the fill-mode For an Animation

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior. The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). The animation-fill-mode property can have the following values: none - Default value. Animation will not apply any styles to the element before or after it is executing forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions The following example lets the <div> element retain the style values from the last keyframe when the animation ends: <style> div { width: 100px; height: 100px; background: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 3s; animation-fill-mode: forwards; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { from {top: 0px;} to {top: 200px; background-color: blue;} } @keyframes example { from {top: 0px;} to {top: 200px; background-color: blue;} } </style> </head> <body> <p>Let the div element retain the style values from the last keyframe when the animation ends:</p> <div></div> <p><strong>Note:</strong> The animation-fill-mode property is not supported in Internet Explorer 9 and earlier versions.</p> </body>

WTF are CSS Counters.

CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.

CSS gradients let you display smooth transitions between two or more specified colors (What are the two types of gradients?)

CSS defines two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center)

CSS Transitions whats the deal with them

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

DOM stands for

Document Object Model

CODING CHAllENGE (create a rgb value controller using js)

Done

Show examples of Maxwidth and minwidth with media queires

Done

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: (play around with some shit.)

Done

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.

Cascading Order What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: Inline style (inside an HTML element) External and internal style sheets (in the head section) Browser default So, 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.

position: static;

HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

Which has higher priority: From external CSS file: #content h1 {background-color: red;} In HTML file: <style> #content h1 { background-color: yellow; } </style>

HTML file because it is closer

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

You can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window

INTERESTING

Multiple Style Sheets rule (explain how the browser may read)

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. (ie if your rel style-sheet is place after your internal styles, your rel will be used.)

Transparent Box When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text: div { background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */ }

Combinators

In CSS, combinators allow you to combine multiple selectors together, which allows you to select elements inside other elements, or adjacent to other elements. The four available types are: The descendant selector — (space) — allows you to select an element nested somewhere inside another element (not necessarily a direct descendant; it could be a grandchild, for example) The child selector — > — allows you to select an element that is an immediate child of another element. The adjacent sibling selector — + — allows you to select an element that is an immediate sibling of another element appearing after it (i.e. right after it, at the same level in the hierarchy). The general sibling selector — ~ — allows you to select any elements that are siblings of another element appearing after it (i.e. at the same level in the hierarchy, but not necessarily right after to it).

CSS Shadow Effects With CSS you can add shadow to text and to elements. With these two properties.

In this chapter you will learn about the following properties: text-shadow box-shadow

Specificity Hierarchy (CSS name them in order)

Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">. IDs - An ID is a unique identifier for the page elements, such as #navbar. Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc. Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

Input with icon/image (CSS style) find a searcch icon and recreate this

Input with icon/image If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon: <style> input[type=text] { width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; } </style> </head> <body> <p>Input with icon:</p> <form> <input type="text" name="search" placeholder="Search.."> </form> </body>

CSS Word Wrapping (what does it do?)

It keeps words in a div. If the word is too long it will break that word so it does not flow out. <style> p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; } </style> </head> <body> <h1>The word-wrap Property</h1> <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body>

CSS - The ::selection Pseudo-element (show an example what is it)

It's a psuedo element that chages the text when you highlight it. <style> ::-moz-selection { /* Code for Firefox */ color: red; background: yellow; } ::selection { color: red; background: yellow; } </style> </head> <body> <h1>Select some text on this page:</h1> <p>This is a paragraph.</p> <div>This is some text in a div element.</div> <p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p> <p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p> </body>

Always Design for Mobile First (what does this mean?) (show an example)

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This means that we must make some changes in our CSS. Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First: /* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }

Setting the display property of an element only changes how the element is displayed,

NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The attribute selectors can be useful for styling forms without class or ID (CSS)

Okay that explains it's usefulness

How to create horizontal button groups using css

Remove margins and add float:left to each button to create a button group: .button { float: left; }

Name and describe all of the CSS selectors

Review Type Selector Review Class Selector Review ID Selector Review Compound Selector Review Descendent Selector Review Child Review Adjacent Sibling Review General Sibling Review Universal Review Attribute Selectors Review Pseudo Selectors

min-width property

Sets the minimum width of an element

Show a way using CSS to set a block element to the center

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.

What font formats should you use if you are going to import?

TTF/OTF or WOFF

How to Calculate Specificity? Memorize how to calculate specificity!

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. Consider these three code fragments: A: h1 B: #content h1 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

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 The following example illustrates the background-origin property: <style> #example1 { border: 10px solid black; padding: 35px; background: url(img_flwr.gif); background-repeat: no-repeat; } #example2 { border: 10px solid black; padding: 35px; background: url(img_flwr.gif); background-repeat: no-repeat; background-origin: border-box; } #example3 { border: 10px solid black; padding: 35px; background: url(img_flwr.gif); background-repeat: no-repeat; background-origin: content-box; } </style> </head> <body> <h1>The background-origin Property</h1> <p>No background-origin (padding-box is default):</p> <div id="example1"> <h2>Lorem Ipsum Dolor</h2> <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> <p>background-origin: border-box:</p> <div id="example2"> <h2>Lorem Ipsum Dolor</h2> <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> <p>background-origin: content-box:</p> <div id="example3"> <h2>Lorem Ipsum Dolor</h2> <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>

The CSS box-shadow property applies shadow to elements.

The CSS box-shadow property applies shadow to elements. In its simplest use, you only specify the horizontal shadow and the vertical shadow: div { box-shadow: 10px 10px; }

CSS float and clear difference

The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side.

What are CSS margins?

The CSS margin properties are used to create space around elements, outside of any defined borders

CSS The object-fit Property what is it

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

CSS Padding definition

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

CSS Text Overflow what does it do?

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }

What happens when you have equal specificity in css

The Latest rule counts h1 {background-color: yellow;} h1 {background-color: red;}

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. The following example selects all elements with a class attribute value that ends with "test": Note: The value does not have to be a whole word! <html> <head> <style> [class$="test"] { background: yellow; } </style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="my-test">The third div element.</div> <p class="mytest">This is some text in a paragraph.</p> </body>

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value. The following example selects all elements with a class attribute value that contains "te": Note: The value does not have to be a whole word! <html> <head> <style> [class*="te"] { background: yellow; } </style> </head> <body> <div class="first_test">The first div element.</div> <div class="second">The second div element.</div> <div class="my-test">The third div element.</div> <p class="mytest">This is some text in a paragraph.</p> </body> </html>

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value. The following example selects all elements with a class attribute value that begins with "top": Note: The value does not have to be a whole word! <!DOCTYPE html> <html> <head> <style> [class^="top"] { background: yellow; } </style> </head> <body> <h1 class="top-header">Welcome</h1> <p class="top-text">Hello world!</p> <p class="topcontent">Are you learning CSS?</p> <p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value. The following example selects all elements with a class attribute value that begins with "top": Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! <style> [class|=top] { background: yellow; } </style> </head> <body> <h1 class="top-header">Welcome</h1> <p class="top-text">Hello world!</p> <p class="topcontent">Are you learning CSS?</p> <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower": <style> [title~=flower] { border: 5px solid yellow; } </style> </head> <body> <p>All images with the title attribute containing the word "flower" get a yellow border.</p> <img src="klematis.jpg" title="klematis flower" width="150" height="113"> <img src="img_flwr.gif" title="flower" width="224" height="162"> <img src="img_tree.gif" title="tree" width="200" height="358"> <p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body>

Alpha opacity (explain it) (css)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): It only works with RGB a HSL values

Run Animation in Reverse Direction or Alternate Cycles (show and explain all example )

The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The animation-direction property can have the following values: normal - The animation is played as normal (forwards). This is default reverse - The animation is played in reverse direction (backwards) alternate - The animation is played forwards first, then backwards alternate-reverse - The animation is played backwards first, then forwards The following example will run the animation in reverse direction (backwards):

overflow: auto

The auto value is similar to scroll, only it add scrollbars when necessary: div { overflow: auto; }

Border - Shorthand Property

The border property is a shorthand property for the following individual border properties: border-width border-style (required) border-color

The outline-color property is used to set the color of the outline

The color can be set by: name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000" invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)

What is the difference between background contain and background 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. The following example illustrates the use of contain and cover: #div1 { background: url(img_flower.jpg); background-size: contain; background-repeat: no-repeat; } #div2 { background: url(img_flower.jpg); background-size: cover; background-repeat: no-repeat; }

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. 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): <style> #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style> </head> <body> <h1>Multiple Backgrounds</h1> <p>The following div element has two background images:</p> <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>

Figure out which style will apply and why? div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;}

The first one because you have an element and in ID together

The flex container becomes flexible by setting the display property to flex: (what are the flex-container properties?)

The flex container properties are: flex-direction flex-wrap flex-flow justify-content align-items align-content

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

CSS border-image Property 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:

The image to use as the border Where to slice the image Define whether the middle sections should be repeated or stretched We will use the following image (called "border.png"): Border

The matrix() Method CSS what does it do?

The matrix() method combines all the 2D transform methods into one. The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv1 { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */ } div#myDiv2 { -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */ } </style> </head> <body> <h1>The matrix() Method</h1> <p>The matrix() method combines all the 2D transform methods into one.</p> <div> This a normal div element. </div> <div id="myDiv1"> Using the matrix() method. </div> <div id="myDiv2"> Another use of the matrix() method. </div>

Outline Offset: property, what is it?

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example specifies an outline 15px outside the border edge: p { margin: 30px; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; }

Outline Width: show the 4 different ways you can specify the width

The outline-width property specifies the width of the outline, and can have one of the following values: thin (typically 1px) medium (typically 3px) thick (typically 5px) A specific size (in px, pt, cm, em, etc) The following example shows some outlines with different widths:

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 The following example illustrates the background-clip property: #example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }

CSS The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The following example rotates the <div> element clockwise with 20 degrees: <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); /* Standard syntax */ } </style> </head> <body> <h1>The rotate() Method</h1> <p>The rotate() method rotates an element clockwise or counter-clockwise.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is rotated clockwise 20 degrees. </div>

The rotateX() Method CSS

The rotateX() method rotates an element around its X-axis at a given degree: <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } #myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); /* Standard syntax */ } </style> </head> <body> <h1>The rotateX() Method</h1> <p>The rotateX() method rotates an element around its X-axis at a given degree.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is rotated 150 degrees. </div> <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p> </body>

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree: <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } #myDiv { -webkit-transform: rotateY(150deg); /* Safari */ transform: rotateY(150deg); /* Standard syntax */ } </style> </head> <body> <h1>The rotateY() Method</h1> <p>The rotateY() method rotates an element around its Y-axis at a given degree.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is rotated 150 degrees. </div> <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p> </body>

The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree: <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } #myDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); /* Standard syntax */ } </style> </head> <body> <h1>The rotateZ() Method</h1> <p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is rotated 90 degrees. </div>

Border Width size can be set using:

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

CSS The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). The following example increases the <div> element to be two times of its original width, and three times of its original height: <style> div { margin: 150px; width: 200px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* Standard syntax */ } </style> </head> <body> <h1>The scale() Method</h1> <p>The scale() method increases or decreases the size of an element.</p> <div> This div element is two times of its original width, and three times of its original height. </div> </body>

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.)

CSS The skew() Method what does it do?

The skew() method skews an element along the X and Y-axis by the given angles. <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { -ms-transform: skew(20deg,10deg); /* IE 9 */ -webkit-transform: skew(20deg,10deg); /* Safari */ transform: skew(20deg,10deg); /* Standard syntax */ } </style> </head> <body> <h1>The skew() Method</h1> <p>The skew() method skews an element into a given angle.</p> <div> This a normal div element. </div> <div id="myDiv"> This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis. </div> </body>

The full list of transitions timing functions

The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end ease-in - specifies a transition effect with a slow start ease-out - specifies a transition effect with a slow end ease-in-out - specifies a transition effect with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

CSS 2D Transforms The translate() Method what doe sit do?

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position: <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari */ transform: translate(50px,100px); /* Standard syntax */ } </style> </head> <body> <h1>The translate() Method</h1> <p>The translate() method moves an element from its current position:</p> <div> This div element is moved 50 pixels to the right, and 100 pixels down from its current position. </div> </body>

The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.

The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.

Universal selector

The universal selector (*) is the ultimate joker. It allows selecting all elements in a page. As it is rarely useful to apply a style to every element on a page, it is often used in combination with other selectors

Combinators:

These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.

@import

This at-rule imports another CSS file into the current CSS ie. @import 'custom.css';

Compound selector. What is and show an example

This selects all matched elements in the compound set. This selector is indicated by a , comma separating the selectors of the set. Each element within the comma separated list will be styled the same. h1, h2, #box { font-family: Arial, Helvetica, sans-serif; }

Multiple Shadows Text. Show an example

To add more than one shadow to the text, you can add a comma-separated list of shadows. The following example shows a red and blue neon glow shadow:

What are the importance of @keyframes

To animate an element, you need to know about the animation properties and the @keyframes rule. The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation.

Centered Pagination (css onlay)

To center the pagination, wrap a container element (like <div>) around it with text-align:center

How to Use CSS Transitions?

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 Note: If the duration part is not specified, the transition will have no effect, because the default value is 0. The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds: <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> <h1>The transition Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> </body>

Margin collapse (explain!)

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on left and right margins! Only top and bottom margins! Look at the following example: h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; }

Vertical Button Group CSS

Use display:block instead of float:left to group the buttons below each other, instead of side by side: <style> .btn-group .button { background-color: #4CAF50; /* Green */ border: 1px solid green; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; width: 150px; display: block; } .btn-group .button:not(:last-child) { border-bottom: none; /* Prevent double borders */ } .btn-group .button:hover { background-color: #3e8e41; } </style> </head> <body> <h2>Vertical Button Group</h2> <div class="btn-group"> <button class="button">Button</button> <button class="button">Button</button> <button class="button">Button</button> <button class="button">Button</button> </div>

Disabled Buttons how to create one using CSS?

Use the opacity property to add transparency to a button (creates a "disabled" look). Tip: You can also add the cursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button: .disabled { opacity: 0.6; cursor: not-allowed; }

Button Sizes how can you make a button size bigger using CSS only?

Using font-size property <style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; } .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} </style> </head> <body> <h2>Button Sizes</h2> <p>Change the font size of a button with the font-size property:</p> <button class="button button1">10px</button> <button class="button button2">12px</button> <button class="button button3">16px</button> <button class="button button4">20px</button> <button class="button button5">24px</button> </body>

CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements with a specified attribute and value. The following example selects all <a> elements with a target="_blank" attribute:

a[target="_blank"] { background-color: yellow; }

Responsive Font Size (what does vw stand for and what does it do?)

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

You can also give a grid row gap as well (css grid)

grid-row-gap: 5px;

What are the CSS multiple column properties.

column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width

When you used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created. Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. Here's an example that would create the 100 row grid, each row at 50px tall. grid-template-rows: repeat(100, 50px);

You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean: grid-template-columns: repeat(2, 1fr 50px) 20px; This translates to: grid-template-columns: 1fr 50px 1fr 50px 20px; Note 1fr 50px is repeated twice followed by 20px.

When you create your variables in :root they will set the value of that variable for the whole page.

You can then over-write these variables by setting them again within a specific element.

The list-style-position property specifies the position of the list-item markers

You have two positions, The outisde and the inside. outside is default.

Syntax for CSS animaion

You have you animation name and animation duration. You must that add @keyframes then put the animation name.

The var() function can be used to insert the value of a custom property.

You place your value at the root and it will then be your value The var() Function Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector. The variable name must begin with two dashes (--) and is case sensitive! The syntax of the var() function is as follows: var(custom-name, value) example: <style> :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); padding: 5px; } #div2 { background-color: var(--main-bg-color); padding: 5px; } #div3 { background-color: var(--main-bg-color); padding: 5px; } </style> </head> <body> <h1>The var() Function</h1> <div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div> <br> <div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div> <br> <div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div> </body>

Links can be styled differently depending on what state they are in (CSS) (create a link with all four states)

a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

OTHER PSEUDO CLASS SELECTORS INCLUDE:

a:link selects links in their default state before the visitor has interacted with them. a:visited selects links after the user has already clicked on them and is visiting that page again. a:hover selects links when the user is hovering their mouse over the link. a:active selects links for only the moment when the mouse button is pressed when clicking on the link. p:first-child selects elements that are the first child when appearing inside a common parent. Such as <div><p>I'm selected</p><p>I'm not</p><p>Neither am I</p></div> p:last-child selects elements that are the last child when appearing inside a common parent. Such as <div><p>I'm not selected</p><p>Neither am I</p><p>I'm selected</p></div> These are just a few pseudo selectors, but there are many additional ones you can explore in the resource links provided at the bottom of this lesson.

The background-color property can be used to specify a background color for links

a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }

Create a dynamic button only using an anchor tag

a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }

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. (What is the default syntax and default style)

ackground: radial-gradient(shape size at position, start-color, ..., last-color); By default, shape is ellipse, size is farthest-corner, and position is center. Radial Gradient - Evenly Spaced Color Stops (this is default) The following example shows a radial gradient with evenly spaced color stops: <style> #grad1 { height: 150px; width: 200px; background: red; /* For browsers that do not support gradients */ background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Radial Gradient - Evenly Spaced Color Stops</h1> <div id="grad1"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

rotate3d(x,y,z,angle) CSS

all kinds of rotation

In CSS you can name you animation with

animation-name

table-layout: auto|fixed|initial|inherit (css explain all four situations)

auto Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout fixed Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit

CSS Grid: Create Flexible Layouts Using auto-fit

auto-fit works almost identically to auto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container. Note If your container can't fit all your items on one row, it will move them down to a new one.

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. (Know the syntax and show an example)

background: linear-gradient(direction, color-stop1, color-stop2, ...); <style> #grad1 { height: 200px; background: red; /* For browsers that do not support gradients */ background: linear-gradient(red, yellow); /* Standard syntax (must be last) */ } </style> </head> <body> <h1>Linear Gradient - Top to Bottom</h1> <p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p> <div id="grad1"></div> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

Background Image (show an example css)

body { background-image: url("paper.gif"); }

For border-image to work, the element also needs the

border property set! #borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 round; }

text-align: justify;

causes all lines of text except the last line to meet the left and right edges of the line box

Know your CSS Units (Absolut Units)

cm centimeters mm millimeters 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)

Animation Shorthand Property The example below uses six of the animation properties: div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; }

div { animation: example 5s linear 2s infinite alternate; }

Css element box-shadow with color and a blur effect

div { box-shadow: 10px 10px 5px grey; }

Css element box-shadow with color

div { box-shadow: 10px 10px grey; }

CSS unicode-bidi Property

div { direction: rtl; unicode-bidi: bidi-override; }

Set How Many Times an Animation Should Run

div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; } you can also write the word infinite

Centering divs with width and max-width

div.ex1 { width: 500px; margin: auto; border: 3px solid #73AD21; } div.ex2 { max-width: 500px; margin: auto; border: 3px solid #73AD21; }

Polaroid Images / Cards

div.polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } img {width: 100%} div.container { text-align: center; padding: 10px 20px; }

position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. (show a css example)

div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }

Hover on <div> An example of using the :hover pseudo-class on a <div> element:

div:hover { background-color: blue; }

border-collapse (show a css example of that with a table )

done

explain the show the purpose of figure andm figcaption tags

doney done done

Know you CSS units (Relative Lengths Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.)

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 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 border-radius property is actually a shorthand property

for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

You can use absolute and relative units like px and em in CSS Grid to define the size of rows and columns. You can use these as well:

fr: sets the column or row to a fraction of the available space, auto: sets the column or row to the width or height of its content automatically, %: adjusts the column or row to the percent width of its container. Here's the code that generates the output in the preview:

you can give your css grid colums gaps

grid-column-gap: 10px

General grid gap

grid-row-gap: 10px 5px;

There's another built-in function to use with grid-template-columns and grid-template-rows called minmax. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:

grid-template-columns: 100px minmax(50px, 200px);

You can also use the text-shadow property to create a plain border around some text (without shadows):

h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

The following example shows a red neon glow shadow:

h1 { text-shadow: 0 0 3px #FF0000; }

Create a red text shadow with a blur

h1 { text-shadow: 2px 2px 5px red; }

You also ass color to css text shadow

h1 { text-shadow: 2px 2px red; }

CSS Text Shadow The CSS text-shadow property applies shadow to text

h1 { text-shadow: 2px 2px; }

CSS - The ::after Pseudo-element (show an example of what it be)

h1::after { content: url(smiley.gif); }

CSS - The ::before Pseudo-element (show an example of what it is)

h1::before { content: url(smiley.gif); }

Show an example of a general siblibg selector (css)

h2 ~ p { color: black; } <h2>Sub heading</h2> <p>I'm selected because I appear after an h2.</p> <p>I'm also selected for the same reason, in fact any paragraphs on the rest of the page after the h2 will be selected.</p>

CSS visibility Property

h2.a { visibility: visible; } h2.b { visibility: hidden; }

Show an example of adjecent sibling selector (css)

h3 + p { color: green; } <h3>Heading</h3> <p>I'm a paragraph that is selected because I come directly after an h3.</p> <p>I'm not selected.</p>

css content property (what does it do?)

he content property is used with the ::before and ::after pseudo-elements, to insert generated content.

Full Size Background Image how to do that with CSS:

html { background: url(img_flower.jpg) no-repeat center fixed; background-size: cover; }

All CSS Pseudo Classes

https://www.w3schools.com/css/css_pseudo_classes.asp

Create this using flexbox

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2

On an actual text editor show examples of css sprites

https://www.youtube.com/watch?v=d-O5rYbJjr4

Image Filters The CSS filter property adds visual effects (like blur and saturation) to an element.

img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } img { width: 33%; height: auto; float: left; max-width: 235px; } .blur {-webkit-filter: blur(4px);filter: blur(4px);} .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);} .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} .invert {-webkit-filter: invert(100%);filter: invert(100%);} .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} .saturate {-webkit-filter: saturate(7); filter: saturate(7);} .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);} </style> </head> <body> <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p> <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> </body>

Show examples of rounded images using CSS

img { border-radius: 8px; } or img { border-radius: 50%; }

Show and exmplain an example of the css attribute selector.

img[alt="Cat"] { border: 1px solid black; } This selects an element with a matching attribute value. This selector is indicated by [] square brackets, followed by the attribute property and value of the selected element within the brackets. <img src="myimage.jpg" alt="Cat">

Responsive Web Design is

is a concept that all website should be acc

The idea of css grid

is that there are mainly 4 columns.

background shorthand property.

is used to set backgrounds with short hand. ie: #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

The justify-content property is used to align the whole grid inside the container. (show all of the examples)

justify-content: space-evenly; justify-content: space-around; justify-content: space-between; justify-content: center; justify-content: start; justify-content: end;

The display: inline-block Value: (what does it do)

keeps elements as blocks but also inline. You can set height and width

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

Anchor Pseudo-classes order...

link visited hover active.

The list-style property is a shorthand property.

list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed) list-style-position (specifies whether the list-item markers should appear inside or outside the content flow) list-style-image (specifies an image as the list item marker)

What is the quickest way to remove default settings for lists (css)

list-style-type: none but Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>

The clear property can have one of the following values:

none - Allows floating elements on both sides. This is default left - No floating elements allowed on the left side right- No floating elements allowed on the right side both - No floating elements allowed on either the left or the right side inherit - The element inherits the clear value of its parent

The three attributes used for the display property are

none, inline, block

What is a css type selector

one that uses an element.

The flex item properties are:

order flex-grow flex-shrink flex-basis flex align-self

CSS has the following outline properties

outline-style outline-color outline-width outline-offset outline

Show an example of The ::first-letter Pseudo-element

p::first-letter { color: #ff0000; font-size: xx-large; } Note: The ::first-letter pseudo-element can only be applied to block-level elements. The following properties apply to the ::first-letter pseudo- element: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear

Show and example of multiple pseudo elements combined

p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; }

Show an example of a first-line pseudo element

p::first-line { color: #ff0000; font-variant: small-caps; } Note: The ::first-line pseudo-element can only be applied to block-level elements. The following properties apply to the ::first-line pseudo-element: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

With the CSS border-radius

property, you can give any element "rounded corners".

With the CSS border-image

property, you can set an image to be used as the border around an element.

Horizontal Dividers (how would you add horizontal dividers to your table?)

th, td { border-bottom: 1px solid #ddd; }

What units can you use for max-length

px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

CSS Grid: Create Flexible Layouts Using auto-fill The repeat function comes with a option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with minmax. In the preview, grid-template-columns is set to

repeat(auto-fill, minmax(60px, 1fr)); When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. Note If your container can't fit all your items on one row, it will move them down to a new one.

background-repeat: (show the three times of repeat)

repeat-x; repeat-y; no-repeat;

Max width will make your element

responsive. In other cases it will add a scroll bar

Center an Image To center an image,

set left and right margin to auto and make it into a block element:

The clear property

specifies what elements can float beside the cleared element and on which side.

The position property specifies the type of positioning method used for an element. There are five different position values: (css)

static relative fixed absolute sticky

If you only want a border around the table, only specify the border property for <table>

table { border: 1px solid black; }

Table Borders To specify table borders in CSS, use the border property.

table, th, td { border: 1px solid black; }

The opacity property can

take a value from 0.0 - 1.0. The lower value, the more transparent:

Table vertical algnment can be set to th or td

td { height: 50px; vertical-align: bottom; } you also habe middle and top

Center Align Text To just center the text inside an element, use

text-align: center;

CSS Overflow The overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area. The overflow property has the following values:

visible - Default. The overflow is not clipped. It 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, but a scrollbar is added to see the rest of the content auto - If overflow is clipped, a scrollbar should be added to see the rest of the content

The font-variant property specifies

whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. p.normal { font-variant: normal; } p.small { font-variant: small-caps; }

outline-color: invert,

which performs a color inversion. This ensures that the outline is visible, regardless of color background: p.ex1 { border: 1px solid yellow; outline-style: solid; outline-color: invert; }

Media queries can be used to check many things, such as:

width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution

Tell the difference between visibility vs display properties

{visibility: hidden } visibility will always take up space on a page. Whereas display will not take up space.

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values: (using css take a text and change the background colors using all of the styles)

<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Text Color You can set the color of text:

<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Vertical alignment of an image

<style> img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } </style> </head> <body> <p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50"> image with a default alignment.</p><br> <p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50"> image with a text-top alignment.</p><br> <p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50"> image with a text-bottom alignment.</p>

Disable text wrapping inside an element (show how)

<style> p { white-space: nowrap; } </style> </head> <body> <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. 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>

You can also specify that only specific HTML elements should be affected by a class. (show an example)

<style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> </body>

Rounded Borders show a basic example (css)

<style> p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radius: 8px; } p.round3 { border: 2px solid red; border-radius: 12px; } </style> </head> <body> <h2>The border-radius Property</h2> <p>This property is used to add rounded borders to an element:</p> <p class="normal">Normal border</p> <p class="round1">Round border</p> <p class="round2">Rounder border</p> <p class="round3">Roundest border</p> <p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p>

font-weight will soecify the boldness of your font (show the four ways you can do so.)

<style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 700; } </style>

CSS Outline (wtf is it?)

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. (draw it!)

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

Pseudo-elements

Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element

Outline differs from borders!

Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

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.

Background - Shorthand property show an example and rules

body { background: #ffffff url("img_tree.png") no-repeat right top; } When using the shorthand property the order of the property values is: background-color background-image background-repeat background-attachment background-position

All CSS Border Properties

border: Sets all the border properties in one declaration border-bottom: Sets all the bottom border properties in one declaration border-bottom-color: Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-radius Sets all the four border-*-radius properties for rounded corners border-right Sets all the right border properties in one declaration border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-style Sets the style of the four borders border-top Sets all the top border properties in one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders

The inherit Value (margin css) (explain what you can do)

div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }

create a div with a height of 200 pixels and a width of 50%

div { height: 200px; width: 50%; background-color: powderblue; }

Show how the box-sizing property will limit your padding and element width.

div { width: 300px; padding: 25px; box-sizing: border-box; }

Padding and Element Width (padding will increase an element width show how)

div { width: 300px; padding: 25px; }

The border-style property specifies what kind of border to display (create and name as many as you can.)

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

outline-style property specifies the style of the outline, and can have one of the following values

dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline

font-size property sets the size of the text (show the three ways)

font-size: 40px; font-size: 2.5em; /* 40px/16=2.5em */ or body { font-size: 100%; }

In CSS, there are two types of font family names

generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial")

Show examples of the three line text decoration examples

h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }

Grouping Selectors (CSS)

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

The auto Value for margin (wtf is it?)

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: <style> div { width:300px; margin: auto; border: 1px solid red; } </style> </head> <body> <h2>Use of margin:auto</h2> <p>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:</p> <div> This div will be horizontally centered because it has margin: auto; </div>

In order to set the width and height of an element correctly in all browsers, you need to know

how the box model works.

CSS vertical-align Property (try and play with all of the properties)

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Csss white space property play around.

https://www.w3schools.com/cssref/pr_text_white-space.asp

Why should you use em as oppsed to px

in em when you use a new browser, the sie will adjust properly. body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; }

The max-width property is used

is used to set the maximum width of an element

If border-color is not set

it inherits the color of the element.

If the name of a font family is more than one word,

it must be in quotation marks, like: "Times New Roman". p { font-family: "Times New Roman", Times, serif; }

CSS has properties for specifying the margin for each side of an element (show examples for all sides)

margin-top margin-right margin-bottom margin-left

Create a margin example in both shorthand and long hand

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

Play with the border color property

p { border-style: solid; border-color: red green blue yellow; }

Outline - Shorthand property show some examples A dashed outline. A dotted red outline. A 5px solid yellow outline. A thick ridge pink outline.

p.ex1 {outline: dashed;} p.ex2 {outline: dotted red;} p.ex3 {outline: 5px solid yellow;} p.ex4 {outline: thick ridge pink;}

The font-style property is mostly used to specify italic text

p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

CSS has properties for specifying the padding for each side of an element:

padding-top padding-right padding-bottom padding-left

Text Indentation:

property is used to specify the indentation of the first line of a text: p { text-indent: 50px; }

The line-height

property is used to specify the space between lines p.small { line-height: 0.8; } p.big { line-height: 1.8; }

letter-spacing property

property is used to specify the space between the characters in a text. h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; }

text-decoration property is used to

set or remove decorations from text.

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): h1 { text-shadow: 3px 2px red; }

The text-align property is used to set the horizontal alignment of a text. The four examples are

text-align: center text-align: left text-align: right text-align: justify (which forces alight margins to be the same length like in a news paper)

The height and width properties do not include padding, borders, or margins;

they set the height/width of the area inside the padding, border, and margin of the 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

color property is used

to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)"

If a border-style property has three values: (border-style: dotted solid double;) what will happen? (css)

top border is dotted right and left borders are solid bottom border is double

If the padding property has three values: padding: 25px 50px 75px;

top padding is 25px right and left paddings are 50px bottom padding is 75px

background-position: (place a small one in top right, top left, and center )

will set the position of the background.


Related study sets

Contracts/ Financing not sure 17 %

View Set

Abnormal Psych Ch.9- Trauma & Dissociative Disorders

View Set

25: Fluid, Electrolyte, and Acid-Base Balance Questions Full

View Set