Scribd
Upload
13 views103 pages

CSS Introduction

Uploaded by

noranbaniyassin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views103 pages

CSS Introduction

Uploaded by

noranbaniyassin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 103

CSS Introduction

BIT 381
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS Syntax
CSS Syntax
Example
In this example all <p> elements will be center-aligned, with a red text
color:
p {
color: red;
text-align: center;
}
Example Explained
•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
You will learn much more about CSS selectors and CSS properties in the
next chapters!
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class)
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)
The next slides will explain the most basic CSS selectors.
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
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 (#) character, followed by the id of the element.
Example: The CSS rule below will be applied to the HTML element with id="para1":

Note: An id name cannot start with a number!


The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:

Note: A class name cannot start with a number!


The CSS class Selector
You can also specify that only specific HTML elements should be affected by a class.
The CSS class Selector
HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class="center" and to class="large":
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
The CSS Grouping Selector
he grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
The CSS Grouping Selector
Example
In this example we have grouped the selectors from the code above:
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one
file! Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
Example: External styles are defined within the <link> element, inside the <head> section of an
HTML page:
External CSS
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:
"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
} Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example: Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
Example: Inline styles are defined within the "style" attribute of the relevant element:
Multiple Style Sheets
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.
Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the <h1> element:
h1 {
color: orange;
}
Multiple Style Sheets
Example: If the internal style is defined after the link to the external style sheet, the <h1>
elements will be "orange“
Multiple Style Sheets
Example
However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules,
where number one has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Example
/* This is a single-line comment */
p{
color: red;
}
You can add comments wherever you want in the code:
Example
p{
color: red; /* Set text color to red */
}
Even in the middle of a code line:
Example
p{
color: /*red*/blue;
}
CSS Comments
Comments can also span multiple lines:
Example
/* This is
a multi-line
comment */

p{
color: red;
}
HTML and CSS Comments
From the HTML tutorial, you learned that you can add comments to your HTML source by using the <!--...--> syntax.
In the following example, we use a combination of HTML and CSS comments:

Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>HTML and CSS comments are not shown in the output.</p>

</body>
</html>
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS Color Names: In CSS, a color can be specified by using a predefined color name
CSS Background Color
You can set the background color for HTML elements:
CSS Text Color
CSS Border Color
CSS Color Values
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values
CSS RGB Colors
An RGB color value represents RED, GREEN, and BLUE light sources.

RGB Value
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
CSS RGB Colors
Shades of gray are often defined using equal values for all the 3 light sources:
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which specifies
the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at
all).
RGBA Value
CSS HEX Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color.

HEX Value
•In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-
255).
• For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set
to the lowest value (00).
• To display black, set all values to 00, like this: #000000.
• To display white, set all values to ff, like this: #ffffff.
CSS HEX Colors
CSS HEX Colors
Shades of gray are often defined using equal values for all the 3 light sources:
3 Digit HEX Value
Sometimes you will see a 3-digit hex code in the CSS source.
The 3-digit hex code is a shorthand for some 6-digit hex codes.
The 3-digit hex code has the following form:
#rgb
Where r, g, and b represent the red, green, and blue components with values between 0 and f.
The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for
each component. So, if we have #ff00cc, it can be written like this: #f0c.
3 Digit HEX Value-Example
CSS HSL Colors
HSL stands for hue, saturation, and lightness.
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
◦ Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
◦ Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
◦ Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white
CSS HSL Colors-Example
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
Saturation-Example
Lightness
The lightness of a color can be described as how much light you want to give the color, where
0% means no light (black), 50% means 50% light (neither dark nor light) and 100% means full
lightness (white).
Shades of Gray
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness
from 0% to 100% to get darker/lighter shades:
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel - which specifies
the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at
all).
HSLA Value-Example
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
In this section, you will learn about the following CSS background properties:
◦ background-color
◦ background-image
◦ background-repeat
◦ background-attachment
◦ background-position
◦ background (shorthand property)
CSS background-color
The background-color property specifies the background color of an
element.

Example
The background color of a page is set like this:

body {
background-color: lightblue;
}
CSS background-color
You can set the background color for any HTML elements:
Example: Here, the <h1>, <p>, and <div> elements will have different background colors:
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from
0.0 - 1.0. The lower value, the more transparent:
Opacity / Transparency
Note: When using the opacity property to add transparency to the background of an element,
all of its child elements inherit the same transparency. This can make the text inside a fully
transparent element hard to read.
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color
values.
In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which
specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a
number between 0.0 (fully transparent) and 1.0 (fully opaque).
Transparency using RGBA
CSS Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
CSS Background Image
This example shows a bad combination of text and background image. The text is hardly
readable:
CSS Background Image
The background image can also be set for specific elements, like the <p> element:
CSS Background Image Repeat
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like
this:
CSS Background Image Repeat
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background
will look better:

Tip: To repeat an image vertically, set background-repeat: repeat-y;


CSS background-repeat: no-
repeat
Showing the background image only once is also specified by the background-repeat property:

In the example above, the background image is placed in the same place as the text. We want to change the position
of the image, so that it does not disturb the text too much.
CSS background-position
The background-position property is used to specify the position of the background image.
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):
CSS Background Attachment
Specify that the background image should scroll with the rest of the page:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
CSS 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.
Instead of writing:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
You can use the shorthand property background:

Example
Use the shorthand property to set the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
CSS Background Shorthand
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.
CSS Background Properties
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's
border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted 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).
Example
Results

None of the OTHER CSS border properties will have ANY effect unless the border-style property is set!
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:

Example
Demonstration of the different border widths:
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}
Results
Specific Side Widths
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):

Example
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
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
Note: If border-color is not set, it inherits the color of the element.

Example
Demonstration of the different border colors:
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
Specific Side Colors
The border-color property can have from one to four values (for the top border,
right border, bottom border, and the left border).

Example
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue
bottom and yellow left */
}
HEX Values
The color of the border can also be specified using a hexadecimal value (HEX):
Example
p.one {
border-style: solid;
border-color: #ff0000; /* red */
RGB Values
Or by using RGB values:

Example

p.one {

border-style: solid;

border-color: rgb(255, 0, 0); /* red */

HSL Values

You can also use HSL values:

Example

p.one {

border-style: solid;

border-color: hsl(0, 100%, 50%); /* red */

}
CSS Border Sides
CSS Border - Individual Sides

From the examples on the previous pages, you have seen that it is possible to specify a different
border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
Example
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSS Border Sides
If the border-style property has four values:
•border-style: dotted solid double dashed;
•top border is dotted
•right border is solid
•bottom border is double
•left border is dashed
If the border-style property has three values:
•border-style: dotted solid double;
•top border is dotted
•right and left borders are solid
•bottom border is double
If the border-style property has two values:
•border-style: dotted solid;
•top and bottom borders are dotted
•right and left borders are solid
If the border-style property has one value:
•border-style: dotted;
•all four borders are dotted
CSS Border Sides

The border-style property is used in the example above.


However, it also works with border-width and border-color.
CSS Shorthand Border Property
Like you saw in the previous page, 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:
•border-width
•border-style (required)
•border-color

Example
p {
border: 5px solid red;
}
CSS Shorthand Border Property
You can also specify all the individual border properties for just one side:
Left Border
p{
border-left: 6px solid red;
}

Bottom Border
p{
border-bottom: 6px solid red;
}
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:
CSS Margins
Margins are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for
each side of an element (top, right, bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
•margin-top
•margin-right
•margin-bottom
•margin-left
All the margin properties can have the following values:
•auto - the browser calculates the margin
•length - specifies a margin in px, pt, cm, etc.
•% - specifies a margin in % of the width of the containing element
•inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.
Margin - Individual Sides
Margin - Shorthand Property
To shorten the code, 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:
•margin-top
•margin-right
•margin-bottom
•margin-left
So, here is how it works:
If the margin property has four values:
•margin: 25px 50px 75px 100px;
•top margin is 25px
•right margin is 50px
•bottom margin is 75px
•left margin is 100px
Margin - Shorthand Property
Example
Use the margin shorthand property with four values:
p {
margin: 25px 50px 75px 100px;
}
If the margin property has three values:
•margin: 25px 50px 75px;
•top margin is 25px
•right and left margins are 50px
•bottom margin is 75px

Example
Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
If the margin property has two values:
•margin: 25px 50px;
•top and bottom margins are 25px
•right and left margins are 50px
Margin - Shorthand Property
Example
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}

If the margin property has one value:


•margin: 25px;
•all four margins are 25px

Example
Use the margin shorthand property with one value:
p {
margin: 25px;
}
The auto Value
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally
between the left and right margins.

Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
The inherit Value
This example lets the left margin of the <p class="ex1"> element be inherited from the parent
element (<div>):
Example
Use of the inherit value:
div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}
All CSS Margin Properties
CSS Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!
Look at the following example:
Example
Demonstration of margin collapse:
h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}
In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.
Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px +
20px). But due to margin collapse, the actual margin ends up being 50px.
CSS Padding
Padding is used to create space around an element's content, inside of any defined borders.
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of
any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding
for each side of an element (top, right, bottom, and left).
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
•padding-top
•padding-right
•padding-bottom
•padding-left
All the padding properties can have the following values:
•length - specifies a padding in px, pt, cm, etc.
•% - specifies a padding in % of the width of the containing element
•inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.

Example
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual padding properties:
•padding-top
•padding-right
•padding-bottom
•padding-left
So, here is how it works:
If the padding property has four values:
•padding: 25px 50px 75px 100px;
•top padding is 25px
•right padding is 50px
•bottom padding is 75px
•left padding is 100px

Example
Use the padding shorthand property with four values:
div {
padding: 25px 50px 75px 100px;
}
Padding - Shorthand Property
If the padding property has three values:
•padding: 25px 50px 75px;
•top padding is 25px
•right and left paddings are 50px
•bottom padding is 75px

Example
Use the padding shorthand property with three values:
div {
padding: 25px 50px 75px;
}
If the padding property has two values:
•padding: 25px 50px;
•top and bottom paddings are 25px
•right and left paddings are 50px

Example
Use the padding shorthand property with two values:
div {
padding: 25px 50px;
}
Padding - Shorthand Property

If the padding property has one value:


•padding: 25px;
•all four paddings are 25px

Example
Use the padding shorthand property with one value:
div {
padding: 25px;
}
Padding and Element Width
The CSS width property specifies the width of the element's content area.
The content area is the portion inside the padding, border, and margin of an element (the box model).
So, if an element has a specified width, the padding added to that element will be added to the total
width of the element. This is often an undesirable result.

Example
Here, the <div> element is given a width of 300px. However, the actual width of the <div>
element will be 350px (300px + 25px of left padding + 25px of right padding):
div {
width: 300px;
padding: 25px;
}
Padding and Element Width
To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes
the element to maintain its actual width; if you increase the padding, the available content space will decrease.

Example
Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
All CSS Padding Properties
End of the chapter

You might also like