The Basics Flashcards
What property is used to assign the type (or name) of font to be used in an element?
font-family
h1 { font-family: helvetica, sans-serif;}
If the first font is not available the second will be used. helvetica is Mac only.
use “ “ around your font name if there are spaces.
How do you use internal CSS?
On the page that you want to add the CSS put:
<head
<style h1 { color: red; } </style>
</head>
What is the attribute selector and how do you use it?
Put this in the .css file or between the <style tags at the top of the page.
h1[draggable] { color:blue; }
If the attribute draggable is set for any h1 element in your .html file, it will be colored blue.
<h1 draggable=”true” Hi</h1>
for example.
How do you change the root html font size?
<style
html { font-size: 30px; }
</style>
What are 4 ways you can size fonts?
px - pixel is equal to 1/96th of an inch. 0.26mm
pt - point is equal to 1/72th of an inch. Used in MS Word. 0.35mm
em - 1em is 100% of the parent tag
rem - 1rem is 100% of the root tag of the page.
html { font-size: 30px; } inside the style tag.
Where on the web can you go to get fonts?
fonts.google.com
What is a CSS ID selector and how do you use one?
Put this in a .css file
#myID {color: blue; }
the # symbol makes this an ID selector.
<h1 id=”myID” Yippie </h1>
ID selector can only be used once per .html file
What are the three ways to add CSS to a webpage?
Inline, Internal, and external.
What is a CSS class selector and how do you declare and use one?
Put this in a .css file.
.myClass { color: blue; }
the “.” at the beginning of myClass makes this a class selector.
Put the following in any .html file
<link rel=”stylesheet” href=”./styles.css”
<h1 class=”myClass” I will be blue.</h1>
What is the correct code for creating a class named wrapper in a stylesheet?
Put this in a .css file
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
The “.” makes it a class
How do you use inline CSS?
<h1 style=”color:Green;” I am green </h1>
This will turn only this h1 green.
What is a CSS element selector and how do you use it?
Put this in the .css file or between the <style tags at the top of the page.
h1 { color: blue;}
in this code, h1 is the element selector.
How do you use internal CSS?
on the page that you want to add the CSS put:
<head
<style h1 { color:red; } </style>
</head>
How do you use external CSS?
Create a page with style.css as the name. Include the following code
h1 { color: red; }
In the web page you want to use the stylesheet put
<link rel=”stylesheet” href=”./style.css”
in between the <head tags
All h1’s on teh page will be red.
What are the five selectors you can use in .css files?
Element selector h1 { color: blue:}
class selector .myClass { color: blue:}
ID selector #myID { color: blue:}
attribute selector hi[draggable] { color: blue:}
Universal selector * { color: blue:}
What are the three properties that determine the spacing of the box model?
Margin, padding and border.
These three properties along with width and height. it goes…
margin
border
padding
height + width
How do you set the width of your border, margin and padding of a paragraph(or any) element?
In the following code, the word border can be replaced with padding or margin.
border: 30px solid black;
can then say… border-top: 0px:
Or.. border-width: 0px 10px 20px 30px;
top, right, bottom, left
Or.. border-width: 0px 20px;
with just two values, the first is top+bottom,
the second is left and right
How can you center a div?
External CSS
div{
width: 50%;
margin-left: 25%;
}
Internal CSS
<style
div{
width: 50%;
margin-left: 25%;
}
<style>
</style>What are the four categories of importance in css?
position, specificity, type, and importance.
position - where on the page is it. If you have p{ color: red;} then later on the same page have p{ color: blue;} the blue will be used
specificity - #id, [attribute], .class then element
<p class=”class” #id=”id” draggable> #id will be used in this case.
type - external, internal, and inline
importance - using the !important key word
p { color: red !important;}
What is the order of specificity in a css file? what is that order?
id then attribute then class then element is
the order of importance
li { color: blue }
.first-class { color: red; }
li[draggable] { color: black; }
#first-id { color: orange; }
When you set the font-family for your <p> tags in a css file, between the <style> tags on your page and in <p style="etc.."> inline to different vaules, which one will get used?</style>
inline, internal, then external
How can you make sure the a rule will be used no matter where it appears in your website?
color: red:
color: green !important;
color: black:
green will be used
In what ways can you combine selectors in your css file?
group selector, child selector, descendant selector, chaining selectors, combined selectors
h1, h2 {
color: blueviolet;
}
p’s that are only one level down
.box > p {
color: firebrick;
}
all li’s that are inside a box class
.box li {
color: blue;
}
all of the selectors must be present
the element selector must come first
li.done#id {
color: seagreen;
}
combined
ul > p.done {
font-size: 0.5rem;
}
What are the 4 ways to position elements on your web page?
Which way is the default positioning?
static (default), relative, absolute, and fixed
fixed - the element will be in a fixed position in the browser. If you scroll the page, the element won’t move.
When using pesticide in the Chrome browser, how do you hover over an item to see what type of element it is?
pressing the ctrl key and hovering the mouse over the item.
How do you create a circle from a square?
border-radius: 50%;
What is the default display property of a <span> element?
What is the default property of most other elements?</span>
inline is the default display property of <span>
an inline element does not have its own height and width</span>
display: block; is the default for most elements.
What are the 4 most used non responsive display properties used?
block, inline, inline-block, and none
inline-block can get bigger and smaller
none will hide an element.
Block is default.
What does the float property do?
float: left; or right
it will allow things to wrap around another element.
What is a @media query?
What are four ways to make your website responsive to different sizes?
Media queries, css grid, css flexbox, and bootstrap
