7 Basic CSS Flashcards by Jesse Agar

Change the colour of text as an attribute

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

Create a style block for all of a certain class

Apply the class to an HTML element

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

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

How well did you know this?

Not at all

Perfectly

Control font size

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

Change font

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

How well did you know this?

Not at all

Perfectly

Import font family from the web

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

How well did you know this?

Not at all

Perfectly

Define a backup font

What happens if there is no backup font?

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

How well did you know this?

Not at all

Perfectly

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

What happens if you only define 1 of them?

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

height: 500px

The image remains proportional.

How well did you know this?

Not at all

Perfectly

Create a border. Define its:

size,
style,
edge roundness/circularity, and
colour

Which style creates the border itself?

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

How well did you know this?

Not at all

Perfectly

Define multiple classes for a single element

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

How well did you know this?

Not at all

Perfectly

Set background colour

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

How well did you know this?

Not at all

Perfectly

set id styles

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

id=”id-name”

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

control padding/margin for each side

2 ways

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

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

Class selector

id selector

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

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

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

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

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

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

true

Change font colour

color: green;

NOT font-color: green;

Precedence of selectors

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

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

Why would you want to overwrite CSS styles?

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.

Colour with hexadecimal numbers

Is it pigment or light?

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

Colour with abbreviated hexadeciaml

``` #000 only 16 values per symbol but good enough ```

Colour with RGB Is it pigment or light?

rgb(255, 255, 255) | Light (additive) not pigment

Create a CSS variable

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

Fallback value for a variable if variable is invalid Where is the fallback variable?

background: var(--penguin-skin, black); It's in the tag

Browser fallbacks when things are incompatible with a specific browser.

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

Where are CSS variables available?

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

How to make a CSS variable available in all selectors

:root { variables here }

Variable predence (element vs root)

element variable>root variable

Why do we separate CSS and HTML (3 things)

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.

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

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.

p{ width: 20px } will do what?

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

How do padding and border numbers work?

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

How do border numbers work?

``` /* 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;