CSSC1

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
inset - Defines a 3D inset

outset - Defines a 3D outset

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

CSSC1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSSC1

Uploaded by

Copyright:

Available Formats

CSS C1

select elements based on name, select elements based on a

grouping selector: affects all

may be used to apply a unique style for a single element

<h1 style="color:blue;text-align:center;">This is a heading</h1>

Multiple style sheets

(e.g. defined in an external style sheet and in an internal style sheet,

2. External and internal style sheets

IV. CSS comments

both single line and multiple line

Text color Border color

<h1 style="color: DodgerBlue;">Hello World</h1> h1{

HSL: hue saturation and lightness

rgba(255, 99, 71, 0.5)

VI. CSS backgrounds

background-position property background-attachment property

different ways of indicating defines whether the background image

background image relative

For example, background-position:

top right; will position the

You can use percentage

position the image at the

You can use length values,

20px;will position the

You can specify two values

5. Percentage and Keyword Values:

By using the right and bottom

will position the image at

7. Background Position Shorthand:

You can use the background-

position property with only

background-position: center top;

You can also use global

To shorten the code, it is also possible to specify all the background

When using the shorthand property the

VII. CSS borders

allowed values: The width can be set as a specific

double - Defines a double border border-radius

the border-color value

ridge - Defines a 3D ridged

inset - Defines a 3D inset

outset - Defines a 3D outset

none - Defines no border

hidden - Defines a hidden border

p.mix {border-style: dotted dashed solid double;}

color property can have from one to

HSL - specify a HSL value, like

Individual sides shorthand property

border-top-style or replace top by right, The border property is a shorthand

you can also specify borders for just

VIII. CSS margins

Individual sides Allowed values

length (px, cm, pt…)

percentage (margin in % of the

(Tip: negative values are allowed)

if the shorthand property has:

top and bottom and the same;

all four margins are the same

You might also like