Reference Website
1. The General Rule
selection {
property: value;
anotherProperty: value;
}
2. Examples
/* Make all h1's purple and 56px font */
h1 {
color: purple;
font-size: 56px;
}
/* Give all img's a 3px red border */
img {
boder-color: red;
boder-width: 3px;
}
3. Where do we write our styles?
<h3 style="color: pink">blah blah blah</h3>
<h3 style="color: pink">knock knock knock</h3>
<p style="color: yellow">blah blah blah</p>
<head>
<title>About Me</title>
<style type="text/css">
/* css begins */
li {
color: red;
}
/* css ends */
</style>
</head>
To comment in CSS: /* comments */
/ + *+[comments] +* + / (Slash + Asterisk)
Using the <link> tag in html head part:
<link rel="stylesheet" type="text/css" href="*.css">
4. Colors in CSS
# +[String of 6 hexadecimal numbers(from 0-F)]
h1 {
color: #ff3B0A
}
1-2 digits: describe how red it would be
3-4 digits: describe how green it would be
5-6 digits: describe how blue it would be
h2 {
color: rgb(0,255,0);
}
Just like RGB, but with an alpha(transparency) channel. Ranges from 0.0 - 1.0
h1 {
color: rgba(11,99,150,1);
}
h2 {
color: rgba(11,99,150,.6);
}
5. Background and Border
<!-- Html -->
<div>
<p>Hello<p>
</div>
/* Background Colors */
body {
background: #95a5a6;
}
div {
background: #3498db;
}
/* Background image */
body {
background: url(https://linfaner.top/logo.png);
background-repeat: no-repeat;
background-size: cover; /* Stretch up imge*/
}
h1 {
color: rgba(11,99,150,1);
border: purple;
border-width: 5px;
border-style: solid;
/* border: 5px solid purple; */
}
6. CSS Selectors
Use [tag name] as selection
HTML:
<ul>
<li>
<input type="checkbox" name="">
Walk Rusty
</li>
<li>
<input type="checkbox" name="">
Buy Groceries
</li>
</ul>
CSS:
li {
border: 2px solid red;
}
Use .+[class name] as selection
HTML:
<div>
<p class="highlight">You say goodbye</p>
<h2 class="highlight">By your name</h2>
</div>
CSS:
.highligh {
background: yellow;
}
Use #+[ID name] as selection
HTML:
<li id="hello">
<input type="checkbox" name="">
Finish Recording CSS video
</li>
CSS:
#hello {
border: 3px solid blue;
}
Use [tag name]+[tag descendant name] as selection
HTML:
<li>
<a href="https://linfaner.top"><span>Linfaner<span></a>
</li>
CSS:
li a {
border: 1px solid lightgrey;
}
li a span{
color: red;
}
Use [tag name]+++[tag adjacent name] as selection
HTML:
<div id="container">
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
<a></a>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
CSS:
ul + p {
color: red;
}
This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first and third paragraph after each ul will have red text.
Use [tag name]+[+[Attribute]+] as selection
HTML:
<a href="https://baidu.com">happy 1</a>
<a href="http://taobao.com">happ 2</a>
<a href="https://baidu.com">happy 3</a>
<input type="email">
CSS:
a[href="https://baidu.com"] {
background: blue;
}
input[type="checkbox"] {
background: yellow;
}
Use [tag name]+:+nth-of-type([number]) as selection
HTML:
<div id="container">
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
<a></a>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
<ul>
<li> List Item </li>
<li> List Item </li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed. </p>
CSS:
ul:nth-of-type(3) {
background: purple;
}
In this case, only the third ul is in purple background.
Inline styles > IDs > Classes/Attributes/Pseudo-classes > Elements/Pseudo-elements
7. Practice
/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS!
/* Give the <body> element a background of #bdc3c7*/
/* Make the <h1> element #9b59b6*/
/* Make all <h2> elements orange */
/* Make all <li> elements blue(pick your own hexadecimal blue)*/
/*Change the background on every paragraph to be yellow*/
/*Make all inputs have a 3px red border*/
/* Give everything with the class 'hello' a white background*/
/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
/*Make only inputs with type 'text' have a gray background*/
/* Give both <p>'s inside the 3rd <div> a pink background*/
/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/
/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/
/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/
/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/
/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/
/*Make the <h1> element's color change to blue when hovered over */
/*Make the <a> element's that have been visited gray */