Cascading style sheets-Week3

Cascading style sheets-Week3

memorize.aimemorize.ai (lvl 286)
Section 1

Preview this deck

Internal CSS Style

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

1

Favorites

0

Last updated

7 years ago

Date created

Mar 14, 2020

Cards (36)

Section 1

(36 cards)

Internal CSS Style

Front

CSS styles whose code is located within the head section of the HTML code of a web page. Control limited to that one HTML page. (also known as embedded)

Back

background-color

Front

Sets the background color of the element

Back

.class

Front

It allows all elements with the class selector to be changed. Selects all elements with class="intro" HTML <div> <p> class="highlight">me</p> </div> <div> <p> class="highlight">you</p> <p>no highlight here</p> </div> CSS .hightlight { background: yellow; }

Back

Inline CSS Style

Front

CSS coded in the body of the web page as an attribute of an html tag. Control limited to the one element with the style.

Back

CSS

Front

Cascading Style Sheets; a language used to describe how HTML elements should be styled

Back

selector

Front

The part of a CSS rule which specifies which element(s) are to be styled.

Back

Internal styles are located between ____ inside ___

Front

style tags inside the head section

Back

CSS commands are called

Front

rules

Back

3 ways to insert CSS

Front

external or internal style sheet, or inline style

Back

<link href="style.css" rel="stylesheet"/> This code shows an example of:

Front

Linking your HTML and CSS files.

Back

Popular Colors used in CSS

Front

CSS includes most common color names (red, blue, green),

Back

basic CSS file

Front

body { background-color: darksalmon; } h1 { color: saddlebrown; font-family: sans-serif; margin: 20px; } h2 { font-family: sans-serif; color: saddlebrown; border-style: groove } img { float: right; width: 250px; height: auto; margin: 15px; border-color: saddlebrown; border-width: 9px; border-style: dotted; border-radius: 10px; } p { text-align: left; font-family: fantasy; font-size: 14px; background-color: cornsilk; width: 200px; }

Back

width

Front

Sets the width of an element

Back

RGB

Front

numbers describe mix of red green and blue color: rgb (143, 188, 143)

Back

float

Front

Floats an element to one side of the page

Back

inline styles

Front

make it possible to write CSS code directly within HTML code add "style" attribute and CSS styles (end with ;) ex: <p style= "color: red;"> I'm learning code </p>

Back

CSS Format

Front

Selector { property: value; } h1 { color: purple }

Back

margin

Front

Generates space around an element

Back

Where is the link element

Front

between the head tags

Back

RGB

Front

Red, Green, Blue h1 { color: rgb(0, 0, 0); }

Back

declaration

Front

Property name and value separated by a colon and terminated with a semicolon, for example... color: blue;

Back

.css file

Front

keep style code separate from HTML

Back

border-style

Front

Changes the style of border

Back

h2 { color: blue; font-family: cursive; }

Front

In this example, h2 is the selector, color and font-family are properties, and blue and cursive are the values for those properties

Back

Write inline style to p to make text blue

Front

<p style = "color : blue">text phrase</p>

Back

<style> tag

Front

write a section of CSS code in HTML placed inside <head>

Back

Purpose of CSS:

Front

Change the way HTML elements are rendered by the browser - presentation layer

Back

border-color

Front

Sets the color of the border

Back

height

Front

Sets the height of an element

Back

External style sheets are stored in:

Front

CSS folder and has a .css file extension.

Back

Practice: Define header 1 to be of color yellow

Front

h1 { color: yellow; }

Back

Why is it best not use inline styles?

Front

It mixes content with presentation which makes it harder to understand the code.

Back

What element references to external style sheets

Front

<link> element

Back

External Style Sheet

Front

Collection of styles stored in a separate file that controls the formatting of elements on any web page that links to the .css file.

Back

<link>

Front

link CSS file to HTML with <link> - placed within <head> - self closing tag <link href= "style.css" " rel= "stylesheet">

Back

border-width

Front

Changes the border width of an element

Back