CSS C1
I. Syntaxe
example
selector {
property: value;
property: value; body {
} color:darkolivegreen;
background-color: beige;
}
II. Selectors
1. simple selectors Combinator selectors
select elements based on name, select elements based on a
id class specific relationship between
them
to select an element with a
specific id, use # followed by Pseudo-class selectors
the id (e.g. #para1)
select elements based on a
An id cannot start with a certain state
number
Pseudo-elements selectors
class selector: use . followed
select and style part of an
by the class (e.g. .center or
element
p.center, associated with <p
class="center large">This Attribute selectors
paragraph refers to two select elements based on an
classes.</p>) attribute or attribute value
universal selector * affects
all HTML elements on the page
grouping selector: affects all
elements with the same style
definitions like h1, or p. you
can also group them and
separate them with a coma
before {}: h1, h2, p {…}
CSS C1 1
III. How to
Three ways to insert CSS:
External CSS
<link rel="stylesheet" href="mystyle.css">
change the look of a website
with one file
Internal CSS
each html page must include a
defined within the <style>
reference to the external style
element inside the <head>
sheet file inside the <link>
section of an html page element inside the head section
<head>
body {
<style>
background-color: lightblue;
body {
}
background-color: linen;
}
h1 {
color: navy;
h1 {
margin-left: 20px;
color: maroon;
}
margin-left: 40px;
}
</style>
</head>
Inline CSS
may be used to apply a unique style for a single element
add the style attribute to the relevant element. The style attribute can
contain any CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Multiple style sheets
CSS C1 2
If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used
(e.g. defined in an external style sheet and in an internal style sheet,
whichever style internal or external is defined after the other will be used)
Cascading order
order of priority:
1. Inline style
2. External and internal style sheets
3. Browser default
IV. CSS comments
placed inside the <style> element, starts with /* and ends with */
both single line and multiple line
V. CSS colors
CSS color names
In CSS, a color can be specified by
background colour
using a predefined color name (like
Tomato, Orange, Gray…)
<h1 style="background-color: DodgerBlue;">Hello World
Text color Border color
<h1 style="color: DodgerBlue;">Hello World</h1> h1{
border:2px solid Tomato;
}
color values
colors can alo be specified using RGB values, HEX values, HSL values, RGBA
values and HSLA values:
for hex and rgb, for shades of grey, use 3 times the same values.
CSS C1 3
3 digits in hex means 3 times the same double digits
HSL: hue saturation and lightness
rgb(0,0,300)
#ff6347
hsl(9,100%,64%)
Transparency
0 is completely transparent
rgba(255, 99, 71, 0.5)
HSLA(9,100%,64%,0.5)
VI. CSS backgrounds
Opacity/Transparency property
background-color
for any HTML element
div {
background-color: green;
background-image opacity: 0.3;
}
By default, the image is repeated so
it covers the entire element
or you can use the alpha in rgba or
It can also be set for specific hsla (see previous section
elements
selector {
background-image: url("nameofimage.extension");
}
background-repeat property
⬆️ or only vertically/*shows
⬇️ */ the image only once*/
background-repeat: repeat-x; background-repeat: no-repeat;
/* repeat the image only horizontally
background-repeat: repeat-y;
background-position property background-attachment property
different ways of indicating defines whether the background image
position should scroll with the rest of the
page
1. Keyword Values:
CSS C1 4
top , right , bottom , left , and
background-attachment: fixed;
center : These keywords /* or */
specify the position of the background-attachment: scroll;
background image relative
to the element's box.
For example, background-position:
top right; will position the
image at the top right
corner of the element.
2. Percentage Values:
You can use percentage
values to specify the
position relative to the
element's box. For example,
background-position: 50% 25%; will
position the image at the
horizontal center and 25%
from the top.
3. Length Values:
You can use length values,
such as pixels or ems, to
specify the position in
absolute units. For
example, background-position: 10px
20px;will position the
image 10 pixels from the
left and 20 pixels from the
top.
4. Multiple Values:
You can specify two values
to control both the
horizontal and vertical
positions. For example,
background-position: 10px 20px; will
position the background
image 10 pixels from the
left and 20 pixels from the
top.
5. Percentage and Keyword Values:
CSS C1 5
You can combine percentage
and keyword values to
specify a position relative
to the keyword value. For
example, background-position: right
20%; will position the image
at the vertical center and
20% from the right.
6. Inverted Values:
By using the right and bottom
keywords, you can invert
the position. For example,
background-position: right bottom;
will position the image at
the bottom right corner.
7. Background Position Shorthand:
You can use the background-
position property with only
one value to specify the
horizontal position
(centered vertically), or
with two values to specify
both horizontal and
vertical positions. For
example:
background-position: center;
(horizontal centered)
background-position: center top;
(centered both
horizontally and at the
top)
8. Global Values:
You can also use global
values like initial , inherit ,
or unset to control the
background position based
on the parent element or
the browser's default
settings.
CSS C1 6
background shorthand
To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.
When using the shorthand property the
order of the property values is: body {
background: #ffffff url("img_tree.png") no-repeat r
background-color }
background-image
background-repeat
background-attachment
background-position
VII. CSS borders
border-style border-width
allowed values: The width can be set as a specific
size (in px, pt, cm, em, etc) or by
dotted - Defines a dotted border
using one of the three pre-defined
dashed - Defines a dashed border values: thin, medium, or thick
solid - Defines a solid border
double - Defines a double border border-radius
- Defines a 3D grooved
groove to obtain rounded borders
border. The effect depends on border-radius: 5px;
the border-color value
ridge - Defines a 3D ridged
border. The effect depends on
the border-color value
inset - Defines a 3D inset
border. The effect depends on
the border-color value
outset - Defines a 3D outset
border. The effect depends on
the border-color value
none - Defines no border
hidden - Defines a hidden border
CSS C1 7
The border-style property can have from
one to four values (for the top
border, right border, bottom border,
and the left border). for example:
p.mix {border-style: dotted dashed solid double;}
border-color
The color can be set by: Note: If border-color is not set, it
inherits the color of the element.
name - specify a color name, like
"red" and like border-style , The border-
color property can have from one to
HEX - specify a HEX value, like
four values (for the top border,
"#ff0000"
right border, bottom border, and the
RGB - specify a RGB value, like left border).
"rgb(255,0,0)"
HSL - specify a HSL value, like
"hsl(0, 100%, 50%)"
transparent
Individual sides shorthand property
border-top-style or replace top by right, The border property is a shorthand
bottom or left, using the shorthand property for the following individual
property border properties:
border-width
border-style (required)
border-color
you can also specify borders for just
one side: border-left: 6px solid red;
VIII. CSS margins
used to create spaces around elements, outside of any defined borders
Individual sides Allowed values
margin-top
CSS C1 8
margin-right auto (the browser calculates the
margin)
margin-bottom
length (px, cm, pt…)
margin-left
percentage (margin in % of the
p { width of the containing element)
margin-top: 100px;
margin-bottom: 100px; inherit (specifies that the margin
margin-right: 150px; should be inherited from the
margin-left: 80px;
}
parent element)
(Tip: negative values are allowed)
Shorthand property
if the shorthand property has:
p {
3 values margin: 25px 50px 75px 100px;
}
right and left are the same
2 values
top and bottom and the same;
right and left are the same
1 value
all four margins are the same
Margin collapse
If there is a bottom margin of an element followed by a top margin of an
element underneath, there is only one margin used and it is the largest one.
Note: this only happens with top/bottom margins
CSS C1 9
