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