7 Basic CSS Flashcards
Change the colour of text as an attribute
<h1 style=”color:blue;”> textext /h1>
Create a style block for all of a certain kind of HTML element
<style> h2 { color:red; } </style>
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>
Control font size
<h1 style=”font-size: 12px;”> textext /h1>
Can you put multiple entries within 1 set of style tags?
yes <style> .red-text { color: red; } p { font-size: 29px; } </style>
Change font
<style> p { font-family: sans-serif; } </style>
Import font family from the web
<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>
Define a backup font
What happens if there is no backup font?
the one that appears first after : has higher priority <style> p { font-family: Helvetica, sans-serif; } </style>
If there’s no backup font it will use the default font Verdana
Define the width/height of something (image, text box etc.)
What happens if you only define 1 of them?
<style> .larger-image { width: 500px; } </style>
height: 500px
The image remains proportional.
Create a border. Define its:
size,
style,
edge roundness/circularity, and
colour
Which style creates the border itself?
<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; border-radius: 3px (or in terms of %, 50% + is a complete circle); } </style>
To create the border you need:
border-style: solid;
Define multiple classes for a single element
List the classes within the “class” attribute separated by a space.
<img class=”class1 class2”>
Set background colour
.green-background {
background-color: green;
}
set id styles
#id-name { background-color: green; }
id=”id-name”
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.
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.
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;