Scribd
Upload
19 views

CSS Colors, Images, Links

The document discusses various CSS properties and selectors for styling web pages. It covers topics like using colors and images for backgrounds, adding borders and padding to images, styling links and adding shadows. It also explains CSS combinators like the descendant, child, adjacent sibling and general sibling selectors for defining relationships between CSS selectors.

Uploaded by

Dahlia Gamal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

CSS Colors, Images, Links

The document discusses various CSS properties and selectors for styling web pages. It covers topics like using colors and images for backgrounds, adding borders and padding to images, styling links and adding shadows. It also explains CSS combinators like the descendant, child, adjacent sibling and general sibling selectors for defining relationships between CSS selectors.

Uploaded by

Dahlia Gamal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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>

You might also like