Professional Documents
Culture Documents
Hex 2 Week 6
Hex 2 Week 6
Hex 2 Week 6
Blog
[Hex
Week
5]
b
yJ
a
c
k
i
eC
r
o
x
f
o
r
d
After:
You can probably tell the differences between the two images but Im not here to
make assumptions! The word love was changed to the color red by using the <span>
tag before the word love and assigning a class to it, like this:
<span class=lovey-dovey> love </span>.
At the top in the <style> tag (this single tag holds all the CSS elements on a
color: red}
And its as simple as that! <span> is just a specifier that allows you to easily edit
certain things on a webpage by assigning them classes and IDs, just like <div>. Speaking
of which, thats where the gray box around the paragraph came from! <div> is responsible
for making sidebars, headers, text boxes, and essentially every major webpage element,
but in this case its only adding a simple background to the paragraph to demonstrate
the concept. To properly execute this, someone would use <div> tags surrounding the <p>
tags, and then add a class or ID to the <div> like we did with the <span>, like so:
<p><div id=official-info> (all of the paragraph text)</div>
And then, in the <style> tag:
#official-info{
background: rgb(230, 230, 230)}
Ta-daaaa~!
Aint that neat? This stuff is just like magic and I love it. Im addicted
to CSS. I imagine that this will soon become disruptive to my social and personal life as
no one will be able to put an end to my rampant programming binge; for days I will be
After:
For this challenge, I had to do a few things: first, add a <span> to the first
sentence of each paragraph, then add a class to those <span>s called first-sentence.
To the overall text I had to designate a <div> and a class for the <div> called info. In the
style tag I wrote the following to make the text bold and the background gray:
.first-sentence{
font-weight: bold
}
.info{
background-color: rgb(230, 230, 230);
}
This can be accomplished through the utilization of the mighty and elusive <div>.
In the <style> tag after classifying/identifying your <div>, you can use the overflow
property in a number of ways:
overflow: hidden:
Creates a box, but cuts off the text inside rather than creating
a scroll-bar.
overflow: auto:
Creates a box and a scroll-bar to navigate the text.
overflow: visible:
Creates a box, but excess text will spill out of the bottom.
There are also x and y values for overflow that specify what action should be
taking place in what direction. For example, if you wanted a horizontal scrollbar instead
of the customary vertical one, you would use
overflow-x: auto
.
Another useful bit of information I learned today was that you can resize any
image on your page by using the
width
and
height
properties. The fun thing about this
is that when you change one property, the other automatically changes with it to satisfy
the proportions of the image to save you some grief! Its fantastic.
After:
This challenge required that I, your Blog Host Jackie, resize both this beautiful
image of the riveting sea and its less beautiful, less riveting text counterpart. I did this in
part by setting the width of the image and the text to 70%, then by setting the text
overflow to auto. You cant tell from the screencaps, but I also changed the background
color of the text area to a seafoam blue-green, because I am a tasteful individual. Heres
the code I wrote to make all this wild fun stuff happen:
.info {
background: rgb(219, 235, 255);
width: 70%;
height: 200px;
overflow: auto;
}
.pic{
width: 70%;
}
MODEL,
and its about to rock your gosh darn world. Everything you previously thought I
thought I knew about the universe was wrong and is now being replaced with boxes.
Anything is possible and I fear what I may do with this newfound limitless power. I feel
invincible, dear reader, like I could engage in hand-to-hand three-way combat between a
lion and a bear at the same time and actually convince both of them to befriend me, the
three of us sharing a boundary-dissolving bond that lasts the rest of our natural lives.
I understand that you may be harboring some minor disgruntlement about what
Im trying to convey right now, but allow your confusion to subside as I am about to
explain to you why this is so exciting. There one was a time when boxes of content on
any webpage I made were horribly ugly and there was nothing any of us could do to
prevent the ugliness from invading our lives. Until now. We have all collectively reached a
Golden Age wherein boxes permeate themselves to obtain a multilayered richness that,
for purposes of this tech blog, were previously unbeknownst to me.
Dont let the confinements of the written word prevent you from experiencing the
true splendor of my realization, observe:
Content
typically comes in the form of words and images, like we saw in earlier
These four elements, much like earth, air, wind, and fire, are what constitute the
cosmic powers of balance and peace in the online universe, and from them anything can
be created. Because I like you Ill show you how to use them in the correct format.
#content{
border: 5px
(value specifies size)
solid
(style)
red
(color)
padding: 4px
margin: 1px}
The border can come in many different styles, and each side of the border can
actually be different. Heres a resource I found that demonstrates all the different
borders: