Web Development
>> CSS: Colors, Images, links
Colors
• Using a Color
• Property: background-color
• Using an Image
• Property: background-image
• Usage: background-image:url(‘myimage.png’);
• Using an Image – Repeat
• Use the background-image property again
• Use another property called background-repeat
• Values: repeat | repeat-x | repeat-y | no-repeat
• Using an Image – Position
• Use the background-image property again
• Use another property called background-position
• Values: top |bottom | center | left | right | center
• Can also add distance from the position in the same value
• Eg. background-position: 10px right;
• try an Image – size: cover
Colors
• Using an Image opacity div {
background: rgba(76, 175, 80, 0.3) /* Green
background with 30% opacity */
}
• Using an background gradient
background: linear-gradient(direction/Angle, color-stop1, color-stop2, ...);
div{background: linear-gradient(to left, #00ccff,#b3f0ff);}
div{background: linear-gradient(-90deg, white,yellow);}
Images
img{
max-width: 70%;
• Using an Image height: auto;
• Padding & Margins border: 2px dotted red;
padding: 2px 4px;
• 1 value: used for all sides
• 2 values: <top/bottom> <left/right>
}
• 4 values: <top> <right> <bottom> <left>
• Borders
• border: <border-width> <border-style> <border-color>
• Rounded Borders
• The border-radius property is used to add rounded borders to an element
img{
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}
Links
a:link {
• The four links states are: font-weight: bold;
• a:link - a normal, unvisited link text-decoration: none;
color: #B7A5DF;
• a:visited - a link the user has visited }
• a:hover - a link when the user mousse over it a:visited {
font-weight: bold;
• a:active - a link the moment it is clicked text-decoration: none;
color: #D4CDDC;
}
a:hover, a:focus, a:active {
text-decoration: underline;
Note: When setting the style for several link states, color: #9685BA;
there are some order rules: display: inline-block;
•a:hover MUST come after a:link and a:visited }
•a:active MUST come after a:hover
https://www.w3schools.com/css/css_link.asp
Shadow
• With CSS you can add shadow to text and to elements
The first two values specify the
text-shadow length of the shadow offset. The first
h1 {text-shadow: 2px 2px 5px red; } value specifies the horizontal distance
and the second specifies the vertical
distance of the shadow. The third
box-shadow
value specifies the blur radius and the
div { last value describes the color of the
box-shadow: 10px 10px 5px grey; shadow:
}
Shadow
• Try
h1 {
p{ background: #0e8dbc;
color: white;
text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
} 0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
Multiple Shadows: you can add a comma-separated list of shadows 0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
Combinators
• Defines the relationship between the selectors.
• A CSS selector can contain more than one simple selector. Between
the simple selectors, we can include a combinator.
• There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
https://www.w3schools.com/css/css_combinators.asp
Combinators - Descendant Selector
The descendant selector matches
ul li { <ul> all elements that are descendants
color: crimson; <li>First</li> of a specified element
} <li>Second</li>
<ol>
li { <li>third</li>
color: blue; <li>fourth</li>
} </ol>
<li>Last</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
Combinators - Child Selector
The child selector selects all
ul > li { <ul> elements that are the immediate
children of a specified element
color: crimson; <li>First</li>
} <li>Second</li>
<ol>
<li>third</li>
li { <li>fourth</li>
color: blue; </ol>
} <li>Last</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
Combinators - Adjacent Sibling Selector
The adjacent sibling selector
div + p {
selects the first element that is
background-color: yellow;
the adjacent siblings of a specified
}
element.
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
Combinators - General Sibling Selector
The adjacent sibling selector
div ~ p {
selects all elements that are the
background-color: yellow;
adjacent siblings of a specified
}
element.
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4.</p>
