<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="card">
<p>
<b>FREE HTML COURSE:</b>
https://scrimba.com/g/ghtml
</p>
</div>
</body>
</html>
<!-- FREE HTML COURSE --> <html>
<head>
<link rel="stylesheet" href="style.css">
<!-- <style>
body {
background-color: black;
color: white;
}
</style> -->
</head>
<body >
<section>
<h1>APPLYING STYLES</h1>
<h3>Inline Styles</h3> section > b, div > b {
color: blueviolet;
}
/* Selectors */
/* https://www.w3schools.com/cssref/css_selectors.asp */
/* Combinators */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors */ .box {
border: 2px solid;
background-color: white;
}
#classes {
color: slateblue;
}
#ids {
color: tomato;
}
#classes > P > b, #ids li > b {
color: goldenrod;
} #id {
background-color: blueviolet;
}
html .class {
background-color: tomato;
}
.class {
background-color: goldenrod;
}
html body {
background-color: aqua;
}
body {
background-color: goldenrod; #inline * {
display: inline-block;
width: 200px;
height: 100px;
}
#block * {
width: 200px;
height: 200px;
}
/* More Info about Block vs Inline Elements */
/* https://www.w3schools.com/html/html_blocks.asp */
/* More Info about Width & Height */
/* https://www.w3schools.com/css/css_dimension.asp */ .bar {
width: 50%;
}
.progress {
width: 50%;
} .box {
background-color: rgba(255,0,0,.5);
}
/* COLOR NAMES LIST:
https://www.w3schools.com/cssref/css_colors.asp
*/
/* COLOR TYPES:
https://www.w3schools.com/cssref/css_colors_legal.asp
*/ .box {
background-color: lightgray;
width: 100px;
height: 100px;
padding: 10px;
box-sizing: border-box;
}
.content {
background-color: white;
} .box {
background-color: lightgray;
width: 100px;
height: 100px;
padding: 10px;
/* box-sizing: border-box; */
border: solid 10px lightgreen;
}
.content {
background-color: white;
padding: 10px;
box-sizing: border-box;
} .parent {
background-color: rgba(0,0,0,.3);
}
.box {
background-color: lightgray;
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
/* box-sizing: border-box; */
border: solid 10px lightgreen;
}
.content { .box {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid lightgreen;
margin: 10px;
box-sizing: border-box;
} .box {
margin: 20px;
}
.hidden {
/* display: none; */
/* visibility: hidden; */
/* opacity: .5; */
} @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
body {
background-color: #3D85C6;
color: rgba(0,0,0,.8);
height: 95vh;
display: flex;
justify-content: center;
align-items: center;
}
.font {
font-family: 'Black Han Sans', arial, sans-serif;
font-size: 30px;
font-weight: bold; .inline {
background-color: slateblue;
color: white;
padding: 2px 5px;
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
}
.block {
border: 2px solid tomato;
padding: 5px;
} <html>
<head>
<link rel="stylesheet" href="instructor.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Floating Elements</h1>
<!-- <img src="https://placeimg.com/400/400/animals"> -->
<section>
<div class="box tomato"></div>
<div class="box purple"></div>
<div class="box gold"></div>
<div class="box green"></div>
<div class="clearfix"></div> /*
CHALLENGE
— Apply a percent width to CONTENT ID of 75 percent and set the
- Apply a height of 400 pixels to the CONTENT & NAVIGATION IDs
— Apply a pixel height to the HEADER and FOOTER ID of 50 pixels
— Apply the proper float values to the content and navigation ID
— Apply a clear property that clears all floated elements to the
*/
#header {
background: #44accf;
height: 50px;
}
#content { body {
padding-bottom: 100px;
}
.first {
position: relative;
top: -40px;
margin-bottom: -40px;
}
.second {
position: relative;
}
.ribbon {
position: absolute; ul a:hover::before {
content: "⇨ ";
color: red;
margin-right: 20px;
}
/*
Pseudo Elements
https://www.w3schools.com/css/css_pseudo_elements.asp
Psudo Classes
https://www.w3schools.com/css/css_pseudo_classes.asp
*/ <html>
<head>
<link rel="stylesheet" href="instructor.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h1 class="class" id="id" >Congratulations!</h1>
</header>
<section>
<h2>
We have learned...
</h2>
<ul>