23/02/2024

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed
CSS Introduction on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of
CSS is the language we use to style a Web page. multiple web pages all at once
• External stylesheets are stored in CSS files

1 2

CSS Syntax
• A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

3 4
 23/02/2024

Example CSS Selectors

• A CSS selector selects the HTML element(s) you want to
style.
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.

• p is a selector in CSS (it points to the HTML element you want to style:
<p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value

5 6

CSS selectors into Five categories: The CSS element Selector

• Simple selectors - select elements based on name, id, • The element selector selects HTML elements based on
class the element name.
• Combinator selectors - select elements based on a
specific relationship between them
• Pseudo-class selectors - select elements based on a
certain state
• Pseudo-elements selectors - select and style a part of
an element
• Attribute selectors - select elements based on an
attribute or attribute value)

7 8
 23/02/2024

The CSS id Selector The CSS class Selector

• The class selector selects HTML elements with a specific class attribute.
• The id selector uses the id attribute of an HTML element • To select elements with a specific class, write a period (.) character, followed
to select a specific element. by the class name.

• The id of an element is unique within a page, so the id

selector is used to select one unique element!
• To select an element with a specific id, write a hash (#) • You can also specify that only specific HTML elements should be affected by a
character, followed by the id of the element. class.

• HTML elements can also refer to more than one class.

9 10

The CSS Universal Selector The CSS Grouping Selector

• The grouping selector selects all the HTML elements with the
• The universal selector (*) selects all HTML elements on same style definitions.
the page. • Look at the following CSS code (the h1, h2, and p elements have
the same style definitions):

11 12
 23/02/2024

How To Add CSS

• It will be better to group the selectors, to minimize the • When a browser reads a style sheet, it will format the
code. HTML document according to the information in the
• To group selectors, separate each selector with a style sheet.
comma.

13 14

Three Ways to Insert CSS External CSS

• There are three ways of inserting a style sheet: • With an external style sheet, you can change the look
• External CSS of an entire website by changing just one file!
• Internal CSS • Each HTML page must include a reference to the
• Inline CSS external style sheet file inside the <link> element,
inside the head section.

15 16
 23/02/2024

External CSS External CSS

• Example • An external style sheet can be written in any text editor,
and must be saved with a .css extension.
• The external .css file should not contain any HTML tags.
• Here is how the "mystyle.css" file looks:

17 18

Internal CSS Internal CSS

• An internal style sheet may be used if one single HTML • Internal CSS
page has a unique style.
• The internal style is defined inside the <style> element,
inside the head section.

19 20
 23/02/2024

Inline CSS Inline CSS

• An inline style may be used to apply a unique style for • Example
a single element.
• To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any
CSS property.

21 22

Cascading Order CSS Comments

• What style will be used when there is more than one style • CSS comments are not displayed in the browser, but they can
specified for an HTML element? help document your source code.
• All the styles in a page will "cascade" into a new "virtual"
style sheet by the following rules, where number one has • Comments are used to explain the code, and may help when
the highest priority: you edit the source code at a later date.
1. Inline style (inside an HTML element) • Comments are ignored by browsers.
2. External and internal style sheets (in the head
section) • A CSS comment is placed inside the <style> element, and starts
3. Browser default with /* and ends with */:
• So, an inline style has the highest priority, and will override
external and internal styles and browser defaults.

23 24
 23/02/2024

CSS Comments Examples CSS Backgrounds

• The CSS background properties are used to add
background effects for elements.
• In these chapters, you will learn about the following CSS background
properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

25 26

CSS background-color Opacity / Transparency

• The background-color property specifies the background color of an • The opacity property specifies the opacity/transparency of an
element. element. It can take a value from 0.0 - 1.0. The lower value, the more
transparent:

• With CSS, a color is most often specified by:

• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

27 28
 23/02/2024

CSS Background Image CSS Background Image Repeat

• CSS background-image • CSS background-repeat
• By default, the background-image property repeats an image both
• The background-image property specifies an image to use as the background
horizontally and vertically.
of an element.
• Some images should be repeated only horizontally or vertically, or they will
• By default, the image is repeated so it covers the entire element.
look strange, like this:

• If the image above is repeated only horizontally (background-repeat: repeat-

• The background image can also be set for specific elements, like the <p> x;), the background will look better:
element:

29 30

CSS background-repeat: no-repeat CSS background-position

• Showing the background image only once is also specified by the • The background-position property is used to specify the position of
background-repeat property: the background image.
• Position the background image in the top-right corner

31 32
 23/02/2024

CSS Background Attachment

• CSS background-attachment
• The background-attachment property specifies whether the background
image should scroll or be fixed (will not scroll with the rest of the page):

Specify that the background image should scroll with the rest of the page:

Specify that the background image should be fixed:

33 34

CSS Background Shorthand

• CSS background - Shorthand property • You can use the shorthand property background:
• To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.

• Instead of writing:

35 36
 23/02/2024

• When using the shorthand property the order of the

property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

It does not matter if one of the property values is missing, as long as the other ones are
in this order. Note that we do not use the background-attachment property in the
examples above, as it does not have a value.

37 38

CSS Borders CSS Border Style

• The border-style property specifies what kind of border to display.
• The CSS border properties allow you to specify the • The following values are allowed:
• dotted - Defines a dotted border
style, width, and color of an element's border. • dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on 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
• The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).

39 40
 23/02/2024

Example CSS Border Width

• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm,
em, etc) or by using one of the three pre-defined
values: thin, medium, or thick:

41 42

Specific Side Widths CSS Border Color

• The border-color property is used to set the color of the four borders.
• The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent

43 44
 23/02/2024

CSS Border Color CSS Border Sides

45 46

CSS Border - Shorthand Property CSS Border - Shorthand Property

• There are many properties to consider when dealing with borders.
• To shorten the code, it is also possible to specify all the individual
border properties in one property.
• The border property is a shorthand property for the following
individual border properties:

47 48
 23/02/2024

CSS Rounded Borders CSS Margins

• The border-radius property is used to add rounded borders to an • Margins are used to create space around elements, outside of any
element: defined borders.
• The CSS margin properties are used to create space around elements,
outside of any defined borders.
• There are properties for setting the margin for each side of an
element (top, right, bottom, and left).

This element has a margin of 70px

49 50

Margin - Individual Sides Margin - Shorthand Property

• CSS has properties for specifying the margin for each side of an element: • It is possible to specify all the margin properties in one property.
• The margin property is a shorthand property for the following
individual margin properties:

• All the margin properties can have the following values:

• auto - the browser calculates the margin • If the margin property has four values:
• length - specifies a margin in px, pt, cm, etc.
• margin: 25px 50px 75px 100px;
• % - specifies a margin in % of the width of the containing element • top margin is 25px
• inherit - specifies that the margin should be inherited from the parent element • right margin is 50px
• bottom margin is 75px
• Tip: Negative values are allowed. • left margin is 100px

51 52
 23/02/2024

Margin - Shorthand Property Margin - auto Value

• If the margin property has three values:
• margin: 25px 50px 75px; • You can set the margin property to auto to horizontally center the
• top margin is 25px element within its container.
• right and left margins are 50px
• bottom margin is 75px
• The element will then take up the specified width, and the remaining
space will be split equally between the left and right margins.
• If the margin property has two values:
• margin: 25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px
• If the margin property has one value:
• margin: 25px;
• all four margins are 25px

53 54