CSS / HTML, HTML & CSS

CSS

Cascading Style Sheets

Style=

to apply styles locally, type _______ within an HTML tag.

property:value

the format to define properties in style format is

;

what symbol goes between each style definition?

internal style sheets must go between which tags

which tag comes after if creating an internal style sheet?

{

Which symbol follows the name of the tag when creating style sheets?

tags

H1 and P are examples of what?

what are the comment tags

h1 {color:red}

to apply the text color red to H1 using styles...

p {color:yellow;text-align:right}

to apply the text color yellow and align right to P uisng styles...

a:link {color:red}

to make an untouched link red

a:visited {color:blue}

to make a visited link blue

a:hover {color:green}

to make a link green when moused over

tag for adding an image or video

p {text-indent:8pt}

to indent the text in P by 8 pts

h1 {font: 10pt "Arial","Times"}

to change the font of H1 to 10pt Arial with a backup Times font

h1 {background:green;color:yellow}

to change the background color of H1 to green and the text to yellow

p {letter-spacing:.5em}

to change kerning (the area around each letter) of paragraph element to .5em

-

a two worded property is separated by what symbol

p {font-weight:bold}

to change the text on a paragraph element to bold

.css

to save an external style sheet, save it with what extension?

p.intro

to assign a class called intro to tag P

to apply the class H1.heading to a paragraph

p#intro

to assign an ID called inro to tag P

div

a special tag that allows you to change the style of a section of the document

span

a special tag that allows you to change the style of a few words of the document

div.love {background:red}

to set a DIV called love to have a red backgroud

to apply a DIV called love, which TAGS should be used?

span.caps {font-variant:small-caps}

to set a SPAN called caps to have all capital letters

to apply a SPAN called caps, which TAGS should be used?

p {font-family:"verdana"}

to change the font family of P to Verdana

p {font-style:italic}

to change the font style of P to italic

700

what number represents bold weight

p {font-size:12pt}

to change the font size of p to 12pt

p {line-height:15pt}

to change the leading between text lines of p by 15pt

h1 {background:url("pic.gif")}

to apply a background to h1 named pic.gif

fixed

to keep the background from moving use the word...

repeat

which word tiles an image horizontally and vertically

repeat-x

which word tiles an image horizontally

repeat-y

which word tiles an image vertically

no-repeat

which words keep the image from being tiled

letter-spacing

which property specifies kerning

h1 {white-space:pre}

to set white space for h1

p {text-decoration:underline}

to underline text for p

p {text-transform:uppercase}

to change the text of p to uppercase

style="z-index:-1"

if 2 images are overlaping which property can be used to decide which goes on bottom

Heading (h1 to h6)

Paragraph

h1, p {

color: #ff00000;

}

having the same CSS color of Red for both

and

.logo {

padding: 20px;

}

Padding the class called logo with 20px surrounding it

.logo {

padding: 20px 10px 20px 10px;

}

Padding the top and bottom 20px and left & right with 10px

.logo {

padding: 20px 10px;

}

Padding the top&bottom with 20px and left&right with 10px in short-cut

float: right;

Align elements horizontally from right

Welcome to Progate !

Applying CSS to a part of a text with

= You can now change the CSS of the word Progate individually

.logo {

border: width style color;

}

Adding a border

.logo {

border-bottom: 1px solid #333

{

Adding a border with only the bottom with solid style and black-ish

Margin, border, and padding relationships

The margin is the space just outside the border whilst padding is inside the border covering the text

Making a link tag

Comment

0000

Putting a URL/destination to a link

Putting an image (no closing tag needed)

Creating a list of items

A parent element for a

tag.

This will make a bulleted list.

where {

what: how;

}

Basic structure of a CSS

/ /

Comments for CSS

color: #ff0000;

CSS color for Red

font-size: 10px;

Font size of 10 pixel for CSS

font-family: "Avenir Next";

font-family: serif;

Font styles for CSS

background-color: #ffd800;

Background color for CSS

class="Name that you selected"

Naming a specific tag so you can only specify it for CSS changes

li {

}

.selected {

}

During classification you must add a (.)period but not for tags like

Basic structure of HTML

Main structure of the of HTML

A division element to divide the of HTML

li {

list-style: none;

}

Removing the bullets from the

float: left;

Align elements horizontally from left

Header tag

Footer tag

background-image: url(URL);

CSS to put a background image

background-size: cover;

CSS to fill the background with a single image

margin: 0 auto;

CSS to center the container class by having the margin auto (0 is for the top and bottom and auto for left and right)

letter-spacing: 10px

CSS for letter spacing

opacity: 0.7

CSS on how to make something invisible

display: block;

Makes an element VERTICALLY aligned and CAN specify width, height, margin, and paddings

div:hover {

background-color: red;

}

element in a hover mode and so when the cursor is pointing it, the background-color turns into red

border-radius: 10px;

Making a border-radius of 10px. Border-radius makes an element round, the bigger the px the more rounder it will be.

text-align: center;

Making an element align in the center. This could also be used with left or right.

Difference between using margin and text-align is?

Margin is use for block elements and so it will move the whole block to the center if auto margin is used. On the other hand, text-align is for inline or inline-block element and so it will move the text or button to the center.

Font Awesome

https://fontawesome.com/ to find icons for a website

To put an Icon into your webpage

background-color: rgba(84, 190, 238, 0.5);

Turning the background-color to 0.5 transparent

line-height: 10px;

Specifying the height that a text occupies

font-weight: normal; OR font-weight: bold;

Changing the thickness of text

box-shadow: 10px 10px #000

Box-shadow property to add shadow to an element

div:active {

background-color: red;

{

To add an CSS to an element that is being clicked

.btn:active {

box-shadow: none;

}

Hide shadow when pressed

.btn:active {

position: relative;

top: 10px;

left: 7px;

}

Changing the position of an element when activated (clicked) so than when you click an element it looks like a 3D button has been clicked

.logo {

position: fixed;

top: 10px

left: 7px

}

To fix an element to a certain position even though the screen is scrolled