Section 5 - Introduction to CSS Flashcards
What does CSS stand for?
Cascading Style Sheets
(applied like a waterfall)
What is Style Sheet (SS) language?
a type of language (similar to how HTML is a markup language)
What is the most important Style Sheet (SS) language to know for web developers?
Cascading Style Sheets (CSS)
What are the 3 ways we can add CSS to our HTML website?
- Inline
- Internal
- External
What is the style attribute?
an attribute that is globally available to all tags (not just HTML like image, break, etc)
With CSS, when is inline used?
when adding CSS style to a single element on your HTML page
Where do you place inline CSS?
goes in the same line as a particular HTML element in the opening tag
<html>
</html>
Attributes normally have what 2 defining characteristics?
- A name for the attribute
- A value for the attribute
<html>
style = name
background: blue = value
</html>
What do you add in the value section of an attribute (in terms of CSS?)
you add the CSS code
In the value section where we add our CSS code, what are the 2 ways it’s broken down?
- First part is the property you want to change (background)
- Second part is the value of that property that you want to set it to
<html>
</html>
background = property you want to change
blue = value you want to set it to
What is the special HTML tag to addinternal CSS?
<style>
</style>
When do you add internal CSS?
when you want to add CSS to a single HTML document (not a multi-page website)
[can apply to anywhere in our HTML, and inside target as many elements as we want]
Where do you add internal CSS?
Developers usually put it in the head section, but it can be applied anywhere within the HTML document
Besides adding the special HTML tag for internal CSS, what else do we need to add?
a selector
<style>
html {
background: red;
html = selector</style>Where do you add a selector in internal CSS?
a selector comes before a set of curly brackets
<style>
html {
background: red;
html = selector</style>What’s the difference between External and Inline/Internal?
External CSS sits in a completely different file with a .css extension
When should you use External CSS?
For multi-page websites
How do you link up a CSS with our index.html (External)? 3 steps
- In the head section, add a self-closing <link></link> element
- Add the relationship
- Add the href
<head>
<link></link>
</head>
What does the relationship stand for in External linking?
what is the role of the thing we’re linking to
rel=”stylesheet”
What does href stand for in External linking?
where is it located?
href=”./styles.css”
You can create CSS rules by specifying 2 simple things?
- Property we want to change(colon)
- Specify the value we want to change the property to (after the colon)
background: blue;
What is a CSS selector?
It selects the HTML to apply the rules in between the curly brackets
h1 {
color: blue;
}
h1 = selector
What is an element selector? How does it work?
It targets ALL elements of a particular HTML tag (the simplest selector)
(all h2, all h3, all p, all a, etc)
h1 {
color: blue;
}
What is a class selector?
can be added as an attribute to any HTML element and groups those certain elements together to apply the same CSS rule to them all (useful for multi-page websites)
example:
<h2>Red</h2>
class –> the attribute added to the h2 HTML
What does a class selector look like when targeting headings with the color red?
.red-heading {
color: red;
}
A class selector applies CSS rules to specific elements with what attribute?
A class selector applies CSS rules to specific elements with the class attribute
Example:
.red-text {
color: red;
}
is applied to:
<h2>Red</h2>
When using classes, they must be spelled how?
EXACTLY the same in all code lines
Can different elements be grouped into the same class?
Yes
example:
h2 and p can be grouped into the same class
What is an ID selector?
requires a # with no spaces between # and ID name for selector, should only be 1 ID with the specific name in the entire file
id=”main” attribute
#main { selector
What are the different types of selectors? (5)
- Element
- Class
- ID
- Attribute
- Universal
What special symbols do all the selectors use?
curly brackets { }
What’s the difference between an ID selector and a class selector?
There should ony be 1 ID attribute/selector in the entire file with that specific name
When we create an HTML tag, can we add as many attributes as we’d like?
Yes
(src, draggable, ID/class, href, etc)
What is an attribute selector?
selects all elements with targeted attributes using brackets
p[draggable] {
How do you change the order of a list item in an ordered list?
value=”3” or whatever order you want it to be
