Part 1
Using what you’ve learned about general and more specific styling, apply a style to all text inside the <body> of the HTML document. You can use any property, but some suggestions are different web-safe fonts like in the lesson example, a text decoration, font style, or a colour property. Using a descendant selector, specify a different style for the links inside the navigation list items. Test to see if the link items render differently than the general body text in the browser or result view. Take screenshots of the HTML, CSS, browser, or result view and describe what you’ve learned.
HTML:
CSS:
Result:
Conclusion:
Thanks to the video explaining the order specificity for every CSS property we give, I understood how to write and organize my code in the file and the importance of keeping track in order to make it work. The most generic tag for example "<h1>" is the least specific, followed by the class and then id as the most specific. If two lines of code have the same specificity, the one that is written last will take over the earlier one. This makes it very easy to target a specific line of code and change it's properties to our liking.
Part 2
Open the website CSS Zen Garden in Chrome. This website was developed to display how powerful CSS can change the appearance of a simple HTML document.
Using the Chrome inspect function, find the following elements:
<h1>
<p>
A link <a> with the class= “designer-name” inside a <li> element.
For each element, write down the CSS ruleset applied to it (you will see this in the styles pane). After doing this, load a different CSS style to the web page and repeat the exercise. Write about how the appearance of each of the three elements changed from one CSS ruleset to the other and mention what properties and values were applied. You can include screenshots to support your writing.
Original theme
<h1>
@media only screen and (min-width: 1132px) {
h1::before {
display: inline-block;
position: relative;
top: 65px;
content: "";
width: 125px;
height: 125px;
margin: -65px 40px 0 0;
background: url(enso.svg);
background-size: auto;
background-size: 100%;
opacity: 0.6;
-webkit-animation: koan 36000s infinite alternate;
-moz-animation: koan 36000s infinite alternate;
animation: koan 36000s infinite alternate;
}
}
h1::before {
display: inline-block;
position: relative;
top: 20px;
content: "";
width: 80px;
height: 80px;
margin: -20px 20px 0 0;
background: url(enso.svg);
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.6;
}
element {
}
@media only screen and (min-width: 1132px) {
h1 {
display: inline-block;
position: relative;
margin: 15px 0 0 0;
padding: 60px 0 5px 0;
}
}
h1 {
padding-top: 0;
padding-bottom: 5px;
border-bottom: none;
font-family: 'Julius Sans One', sans-serif;
font-size: 3.2em;
text-transform: uppercase;
}
h1, h2 {
padding: 0 10%;
margin: 0;
color: #fff;
font-weight: normal;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width: 1132px) {
header {
text-align: left;
}
}
header {
text-align: center;
}
@media only screen and (min-width: 1132px) {
body {
font-size: 100%;
}
}
body {
color: #325050;
font-family: 'Libre Baskerville', sans-serif;
font-size: 70%;
}
<p>
element {
}
@media only screen and (min-width: 1132px) {
.intro p:last-child, .supporting p:last-child {
margin-bottom: 0;
}
}
@media only screen and (min-width: 1132px) {
p {
font-size: 1em;
}
}
p {
margin: 0.75em 0;
margin-bottom: 0.75em;
line-height: 2;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media only screen and (min-width: 1132px) {
body {
font-size: 100%;
}
}
body {
color: #325050;
font-family: 'Libre Baskerville', sans-serif;
font-size: 70%;
}
A link <a> with the class= “designer-name” inside a <li> element.
element {
}
.design-selection .designer-name {
color: #616857;
font-size: 0.9em;
font-style: normal;
}
.sidebar a {
color: #607476;
text-decoration: none;
}
a:visited {
color: #1a5952;
}
a {
color: #0d8ba1;
text-decoration: none;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.design-selection li, .zen-resources li {
color: #c0cac3;
font-style: italic;
}
.sidebar ul {
list-style: none;
}
@media only screen and (min-width: 1132px) {
body {
font-size: 100%;
}
}
body {
color: #325050;
font-family: 'Libre Baskerville', sans-serif;
font-size: 70%;
}
"Mid Century Modern" theme
<h1>
element {
}
.intro header h1 {
position: absolute;
color: #ffffff;
font-size: 100%;
line-height: 2em;
top: 4.2em;
left: -3em;
width: auto;
margin: 0;
padding: 1em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
html, body {
font-family: "ff-meta-web-pro", sans-serif;
text-rendering: optimizeLegibility;
font-size: 100%;
line-height: 26px;
color: #0d2c40;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
<p>
element {
}
.intro .summary p {
padding: 0 40% 2em 0;
margin: 0;
}
.intro .summary {
font-size: 100%;
color: #ffffff;
}
html, body {
font-family: "ff-meta-web-pro", sans-serif;
text-rendering: optimizeLegibility;
font-size: 100%;
line-height: 26px;
color: #0d2c40;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
A link <a> with the class= “designer-name” inside a <li> element.
element {
}
.sidebar .design-selection nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
border-bottom: 0 solid transparent;
}
a {
color: #0d2c40;
text-decoration: none;
border-bottom: 1px solid #0d2c40;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .design-selection nav ul li {
list-style: none;
color: #ffffff;
text-align: left;
}
html, body {
font-family: "ff-meta-web-pro", sans-serif;
text-rendering: optimizeLegibility;
font-size: 100%;
line-height: 26px;
color: #0d2c40;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
Comentarios