7 Basic CSS

Question 1

Change the colour of text as an attribute

Answer 1

&lth1 style=”color:blue;”> textext /h1>

Question 2

Create a style block for all of a certain kind of HTML element

Answer 2

&ltstyle>
     h2 {
     color:red;
    }
&lt/style>

Question 3

Create a style block for all of a certain class

Apply the class to an HTML element

Answer 3

style>
     .class-name {
     color:red;
    }
/style>

h2 class=”class-name”>
textext
/h2>

Question 4

Control font size

Answer 4

&lth1 style=”font-size: 12px;”> textext /h1>

Question 5

Can you put multiple entries within 1 set of style tags?

Answer 5

yes
&ltstyle>
  .red-text {
    color: red;
  }
  p {
    font-size: 29px;
  }
&lt/style>

Question 6

Change font

Answer 6

&ltstyle>
p {
font-family: sans-serif;
}
&lt/style>

Question 7

Import font family from the web

Answer 7

&ltlink href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>

Question 8

Define a backup font

What happens if there is no backup font?

Answer 8

the one that appears first after : has higher priority
&ltstyle>
p {
  font-family: Helvetica, sans-serif;
}
&lt/style>

If there’s no backup font it will use the default font Verdana

Question 9

Define the width/height of something (image, text box etc.)

What happens if you only define 1 of them?

Answer 9

&ltstyle>
  .larger-image {
    width: 500px;
  }
&lt/style>

height: 500px

The image remains proportional.

Question 10

Create a border. Define its:

size,
style,
edge roundness/circularity, and
colour

Which style creates the border itself?

Answer 10

&ltstyle>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius: 3px (or in terms of %, 50% + is a complete circle);
  }
&lt/style>

To create the border you need:
border-style: solid;

Question 11

Define multiple classes for a single element

Answer 11

List the classes within the “class” attribute separated by a space.
&ltimg class=”class1 class2”>

Question 12

Set background colour

Answer 12

.green-background {
background-color: green;
}

Question 13

set id styles

Answer 13

#id-name {
  background-color: green;
}

id=”id-name”

Question 14

What is an id attribute
How do they interact with classes?
Benefits of id attribute (2 things)
The basic rule of ID elements

Answer 14

ids are like a “non-reusable” class used for a only a single element (although they seem to be able to be used for multiple elements).

They overwrite classes. Classes don’t overwrite ids.

You can use an id to style a single element
You can use them to select and modify specific elements with JavaScript.

id attributes should be unique.

Question 15

All html elements are rectangular. What 3 properties can defines their shape?

Answer 15

padding- controls the amount of space BETWEEN the element’s content and its border

border-

margin- controls the amount of space between an element’s border and SURROUNDING elements. If negative it will grow beyond its neighbours.

Question 16

control padding/margin for each side

2 ways

Answer 16

.red-box {
    background-color: crimson;
    color: #fff;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

 .red-box {
    background-color: crimson;
    color: #fff;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  }

or
Clockwise notation (NO commas)
padding: 10px 20px 10px 20px;
margin: 10px 20px 10px 20px;

Question 17

What is this:
.intro {
  background-color: yellow;
}
#id-of-this {
stuff
}

Answer 17

Class selector

id selector

Question 18

Select a specific element-attribute for styling rather than class or id

Answer 18

[attr=value]

example:
[type='radio'] {
  margin: 20px 0px 20px 0px;
}
Now all radio inputs have this style

/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}

Question 19

What are some different measurement options and what do they do?

Answer 19

Absolute:
px- pixels on the screen
in, mm etc.- distance on the screen

Relative:
em- relative to family font size (ex: 1.5em)
rem-

Question 20

There is always a body element even if not created, true or false?

Answer 20

true

Question 21

Change font colour

Answer 21

color: green;

NOT font-color: green;

Question 22

Precedence of selectors

What happens if there are multiple of the same kind of selector?

Answer 22

!important>inline styles>id>Class>element
(use !important like this: “color: pink !important;”

Last processed (last item) in declaration takes precedence.
Last processed within an inline style selector.
First processed (first item) attribute within a tag takes precedence.

Question 23

Why would you want to overwrite CSS styles?

Answer 23

To be sure.
Some libraries will have certain styles and you only want some of them but want to make sure this element behaves a certain way.

Question 24

Colour with hexadecimal numbers

Is it pigment or light?

Answer 24

color: #000000;
#000000
Light (additive) not pigment
# 00R 00G 00B
Hexidecimal digits: 0123456789ABCDEF

Question 25

Colour with abbreviated hexadeciaml

Answer 25

#000
only 16 values per symbol but good enough

Question 26

Colour with RGB

Is it pigment or light?

Answer 26

rgb(255, 255, 255)

Light (additive) not pigment

Question 27

Create a CSS variable

Answer 27

–variable-name: value;
Call with:
style-type: var(–variable-name);

.penguin {
    --penguin-skin: gray;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

background-color: var(–penguin-skin);

Question 28

Fallback value for a variable if variable is invalid

Where is the fallback variable?

Answer 28

background: var(–penguin-skin, black);

It’s in the tag

Question 29

Browser fallbacks when things are incompatible with a specific browser.

Answer 29

When something is incompatible, it will not read it. This means we can use the precedence rules from before.

Here if var(–red-color); is not readable, it will still use background:red;

style>
  :root {
    --red-color: red;
  }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
/style>
div class="red-box"> 
/div>

Question 30

Where are CSS variables available?

Answer 30

When you create a variable, it is available for you to use INSIDE THE SELECTOR IN WHICH YOU CREATE IT. It also is available in any of that selector’s descendants. This happens because CSS variables are inherited, just like ordinary properties.

It is available everywhere if:
:root {
}

Question 31

How to make a CSS variable available in all selectors

Answer 31

:root {
variables here
}

Question 32

Variable predence (element vs root)

Answer 32

element variable>root variable

Question 33

Why do we separate CSS and HTML (3 things)

Answer 33

CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

Question 34

What's the difference between a class and an ID?
(3 things)

Answer 34

Each element can only have 1 ID
Elements can have multiple classes

Each ID should only point to only 1 element. IDs can be search for: http://yourdomain.com#theID . So it’s important each ID be unique to 1 element per page. (also JS concerns)
Classes don’t have this functionality so they can point to multiple elements

IDs and classes are functionally identical to CSS
But JS cares.

Question 35

p{
width: 20px
}
will do what?

Answer 35

set the paragraph box width to 20px (super narrow)

Question 36

How do padding and border numbers work?

Answer 36

/* Apply to all four sides */

margin: 1em;
margin: -3px;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */

margin: inherit;
margin: initial;
margin: unset;

Question 37

How do border numbers work?

Answer 37

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */

border: inherit;
border: initial;
border: unset;