Scribd
Upload
21 views

CSSC1

CSS C1 discusses CSS syntax, selectors, and how to insert CSS styles into HTML documents. It covers simple selectors that select elements by name, id, class, and universal selector. Combinator selectors select elements based on relationships. Pseudo-classes and pseudo-elements select elements based on states or parts of elements. CSS comments are used to add notes within style sheets. The document also discusses CSS colors defined by names, hex codes, RGB and HSL values. Background properties like color, image, repeat, position and attachment are explained. Priorities of inline, internal and external styles are provided.

Uploaded by

Forner Tyfenn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

CSSC1

CSS C1 discusses CSS syntax, selectors, and how to insert CSS styles into HTML documents. It covers simple selectors that select elements by name, id, class, and universal selector. Combinator selectors select elements based on relationships. Pseudo-classes and pseudo-elements select elements based on states or parts of elements. CSS comments are used to add notes within style sheets. The document also discusses CSS colors defined by names, hex codes, RGB and HSL values. Background properties like color, image, repeat, position and attachment are explained. Priorities of inline, internal and external styles are provided.

Uploaded by

Forner Tyfenn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like