Antonis Kalipetis
@akalipetis - https://www.akalipetis.com
CSS can be added to HTML elements using the style="..." attribute
<p style="...">Styled paragraph content</p><div style="background-color:yellow;">
<h1>My <span style="color:red">favourite</span> cities</h1>
<h2>Athens</h2>
<h2>Barcelona</h2>
</div>Rendered:
CSS styling is made by defining CSS declarations - property: value pairs.
Each element is rendered after applying the declarations that match it.
<div style="background-color:yellow;">
<h1>My <span style="color:red">favourite</span> cities</h1>
<h2>Athens</h2>
<h2>Barcelona</h2>
</div>Notes:
div yellowspan redstyle to each and every element?Of course not!
style="..." attributes<style> tags inside the <head><link rel="stylesheet" href="..."> tags inside the <head>CSS can be applied to one or multiple elements using CSS selectors.
element selector appplies to all HTML elements with the <element> tag#id selector applies to elements with a specific id="id" attribute.class selector applies to elements containing a specific class="class" attributeselector {
property: value;
}Notes:
<style>
.bg-yellow {
background: yellow;
}
.text-red {
color: red;
}
</style>
...
<div class="bg-yellow">
<h1>My <span class="text-red">favourite</span> cities</h1>
<h2>Athens</h2>
<h2>Barcelona</h2>
</div>CSS has more advanced selectors, for example
element element - selects all elements inside a certain elementelement>element - selects all elements where the direct parent is a certain element:hover - selects elements on mouse overelement.class - combile selectors, all elements that have a classIn CSS, there are multiple wayts to define a colour
red, blue, yellow, greenrgba(255, 0, 0, 0.3), rgb(255, 0, 0)#fefefeNotes:
Adding a background to an element
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positiondisplay: ... propertyThe display property is the most important one for handling layout.
display: block; - used for making an inline element a block onedisplay: inline; - used for making an block element a inline onedisplay: none; - used for hiding elementsvisibility: hidden - used for hiding elements, but they still keep their space<p>First</p>
<p style="display: none;">Second</p>
<p>Third</p>
<p style="visibility: hidden">Fourth</p>
<p>Fifth</p>Rendered:
First
Third
Fifth
Notes:
display: none to completely hide an elementvisibility: hidden to hide an element and show it again, without the content moving aroundPositioning can be made using the following ways
static - the default positioningrelative - relative to its normal positionfixed - fixed inside the viewport, not affected by scrollingabsolute - absolutely positioned relative to the closest ancestorNotes:
static and relative for most of the casesfixed if you want elements sticking in the viewportabsolute only in special cases and when you know what you're doing
Add a green background to the whole body
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>Create a page with a blue div, that stays in the bottom of the screen at all times
Create an external CSS file, import it to an HTML page and make all paragraphs have red-coloured text
Make all paragraphs have a blue yellow, except the last one.
Hint: Use a special selector
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
<p>Fifth</p>
</body>
</html>@akalipetis - https://www.akalipetis.com
