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="#">«</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="#">»</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="#">«</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="#">»</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="#">«</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="#">»</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 for bootstrap glyphicons (comes with whole bootstrap)

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

You can also have different stylesheets for different media:

Show an example of an external stylesheet

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

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:

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

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)

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

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

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

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

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

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:

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

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

Example of in image sprite

Create an image modal using CSS and js

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

Usinng CSS display use make panel appear out of no where

Show an example of a CSS responsive form

do an entire web layout using the float property:

Bordered Button Group create a bordered button group using CSS.

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

Hoverable Buttons using CSS

Add an arrow on hover: For a CSS only button

Add a "ripple" effect on click: CSS only

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

Button on Image CSS

Slide in Overlay from the Top image

Create a Fade in image overlay

Fade in a box overlay

Positioning Text In an Image (center)

Text in top left of image.

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

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

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

Show examples of aligned left and right content

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

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

All Values of The CSS object-fit Property

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

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

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

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

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

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

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

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

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.

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

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

The center value for flex box align-items

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

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

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.

Align-self property with flex start and flex end

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

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

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

Flex box align-content stretch

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

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

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

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

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

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)

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

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

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

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

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

Positioning tooltips (show a css example of the left)

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

Column-rule property can be written in short hand

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

Rounded Borders Pagiantion (CSS)

Add spaces between your birdered pagination.

Bordered Pagination (css maker hoverable as well)

Create next and previous paginations and navigation paginations

Rounded Active and Hoverable Buttons Pagination (with CSS)

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:

Right tooltip whit left arrow

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

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:

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

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

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:

Nesting Counters

overflow: scroll

Explain overflow-x and overflow-y and show examples

Overflow: hidden (css what will it do?)

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

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

Multiple Steps in animation duration,

CSS The skewX() Method

CSS The skewY() Method

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

CSS image of a card with box shadow.

Example of an image that floats left of the text.

Vertical resizable element (show one)

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

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

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)

Flip an image using css on hover

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

Show a tolltip hover of a hidden element

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

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)

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

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

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

Create a navbar with a dropdown menu

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

Breadcrumbs (create with css only)

Elaborate example of a box shadow

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

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

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

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

Do some short hand transitions

Show a background color CSS animation change

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.

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:

You can specify the curve of a transition

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

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

Create hover effect for a hidden text with CSS overflow

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

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

CSS word-break property. (show and example)

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)

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

Disable text wrapping inside an element (show how)

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

Rounded Borders show a basic example (css)

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

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)

CSS

Related study sets

Government Unit 6

Contracts/ Financing not sure 17 %

Nursing I-test 4

Active and Passive Verbs

Xunzi 1

psyc module 42

NCLEX - OB

Business Management: Chpt. 10

Respiratory System

Poetry

Bargaining

ch 17 psy

Abnormal Psych Ch.9- Trauma & Dissociative Disorders

CSE 240 Final

Anatomical Terms/Body Cavities

chpater 10,13,14

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

eng 12

Traducción

Intro to business ch. 13