Section 6: CSS Flashcards
CSS format
the format for CSS is very easy:
Selector {
Property: value;
}
How to link CSS to HTML file
Type this in the section of your HTML document:
< link rel=”stylesheet” href=”style.css” >
To break it down:
< link >
is the tag to link the html file to something else.
rel=”stylesheet”
attribute for “relation” (rel-ation, get it?). It specifies the kind of relationship the link will have, which in this case is a “stylesheet”
type=”text/css”
attribute that states the media type. You are essentially telling HTML that the file being linked is a “text/css” file.
href=”style.css”
attribute that links to the file which is named “style.css”
CSS overview
CSS means “Cascading Style Sheets”
Cascading:
In simple terms it means it always takes the selector that is last.
For example:
p {
color: green;
}
p {
color: purple;
}
From the example above, your text is going to end up purple because CSS always takes the selector that is last.
Order:
You will want to organize your CSS by order of largest to smallest elements as it gets more and more specific.
For example:
body {
}
h2 {
color: red;
}
p {
color: pink;
}
Cascading Style Sheets at the most basic level indicates that the order of CSS rules matter.
CSS resources
go to css-tricks.com
and browse the almanac. 90% of answers to CSS questions on the web come from this almanac. It will have all the CSS properties on there with ways to learn them.
unsplash.com
has a ton of free high quality images you can use.
paletton.com
Great website for picking color templates for websites
https://specificity.keegan.st/
Checks the importance of selector specificity
background-image property
Ex: background-image: url(smileyface.jpg);
Makes a background image
background-size property
Ex: background-size: cover;
changes the size of the background on the website
color property
Ex: color: blue;
changes the color of text
text-align property
Ex: text-align: center;
changes the alignment of the text
border property
Ex: border: 5px solid purple;
changes the border properties including the size, type, and color.
cursor property
Ex: cursor: pointer;
The type of cursor when hovered over something.
list-style property
Ex: list-style: none;
Takes away or changes bullets or other formatting on lists. This is nice to use for navigation menu’s.
display property
Ex: display: inline-block; or display: block;
has a few properties you can use. inline-block is a good one because it allows navigation links in menu’s to line up horizontal instead of vertical (vertical by default being a display: block). So you’d choose whatever your navigation is using (probably “li”) and use inline-block to make the list links horizontal.
rgb and rgba values
You can choose a color by saying blue, by using a hex color code like #0000FF, or by using red, blue, and green values: rgb(255, 176, 170).
Transparency:
for transparency you put rgba instead of just rgb and put a 4th number value: rgba(255, 176, 170, 0.5)
The last number can be between 0 and 1 for transparency effect.
Selectors
selector {
property: value;
}
Selectors are telling the browser which HTML elements should be selected to have CSS property values inside the rule applied to them.
You can have more than one selector:
Ex: h1, p {
color: brown;
}
Main selectors to know for CSS:
.class
Ex: class=”webtext”
select a group of elements that you want to all have the same styles. You can add multiple ones for ex: class=”webtext active” where “webtext” and “active” do different things. In CSS file, the selector would look like this: .webtext { content }
——————————————————–
#id
Similar to class, except you can only use the same id once. Ex: id=”div1” in the CSS file, the selector would look like this: #div1 { content }
———————————————————–
*
Star is not used very often, but it symbolizes all elements. Ex:
* {
text-align: right;
}
This will make all elements text-aligned to the right. Note that if you have selectors/elements beneith the * selector in your CSS file, and they align text a different way, then those will override since that code is being read in order after the * selector was read at the top of the CSS file. This is a good example of how CSS cascades, or reads the code from top to bottom with the bottom overriding anything that is equivelant style at the top.
—————————————————————-
element
Ex:
h1 {
text-align: “center”;
}
where “h1” is the element/selector and the stuff on the inside of the brackets are the properties and values.
———————————————————————–
element, element
Ex:
h2, p {
color: blue;
}
You want both “h2” and “p” to have the same properties/styles. In this case, to have the text be blue.
—————————————————————————–
element element
Ex:
h2 p {
color: blue;
}
This is selecting all “p’s” that are inside “h2’s” to be the color blue. So if we had something like this:
< h2 >
< div >
< p >homegnome< /p >
< /div >
< /h2 >
it would still work because the “p” is still within the “h2” even though it’s closest parent is “div”.
————————————————————————–
element > element
h2 > p {
color: blue;
}
In this example, it only wants “p’s” that have parents of “h2’s”. So if we had something like this:
<h2>
< div >
< p >homegnome< /p >
< /div >
< /h2 >
it wouldn't work since "p's" parent is "div" and not "h2".
-----------------------------------------------------------------------------
element + element
Ex:
h2 + p {
color: blue;
}
This says select any "p" element that is exactly after an "h2" element. So if it was like this in the html:
< h2 >Home< /h2 >
< p >homegnome< /p >
then the selector h2 + p in the CSS would style it since the "p" element is right after an "h2" element.
-------------------------------------------------------------------------------
\:hover
ex:
h2 + p: hover {
color: blue;
}
Will make the changes only when you hover over the h2 + p's. This is often used with links in a navigation menu and buttons.
------------------------------------------------------------------------------
\:last-child
ex:
.webtext: last-child {
border: 5px dashed green;
}
Will make only the last child of your webtext class elements change.
----------------------------------------------------------------------------
\:first-child
ex:
.webtext: first-child {
border: 5px dashed green;
}
Will make only the first child of your webtext class elements change.
-----------------------------------------------------------------------------
Cascading Style Sheets at the most basic level indicates that the order of CSS rules matter.</h2>
What selectors win out in the cascade depends on these three things
When there is more than one selector being used in one line, they will each have different importance in the way CSS reads it.
Specificity:
How specific is the selector. Each one will have a specificity score which you can test here: https://specificity.keegan.st/
Ex:
a > li > li a #food .blue {
}
In this example, the elements/pseudo elements a and li rank 3, the ID #food are ranked 1, and the class .blue is ranked 1 in importance, therefore the class and the ID will win out over the elements a and li giving them priority in what they do in the way the css is read in the cascading stylesheet.
(FYI inline styles will always win out over everything)
———————————————————————
Importance:
Source Order:
If you had two different CSS style sheets linked to your html like this:
< link rel=”stylesheet” href=”style.css” >
< link rel=”stylesheet” href=”style2.css” >
and just for an example, had two different selectors with properties and values for your h2’s like this:
Style Sheet 1:
h2 {
color: blue;
}
Style Sheet 2:
h2 {
color: red;
}
Then the CSS style sheet will change all h2’s to the color red since < link rel=”stylesheet” href=”style2.css” > is read last cascading down after < link rel=”stylesheet” href=”style.css” >.
