Professional Documents
Culture Documents
Source: https://www.w3schools.com
What is CSS?
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• 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.
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>).
• Example
/* This is a single-line comment */
p{
color: red;
}
p{
color: red; /* Set text color to red */
}
CSS Comments
/* This is
a multi-line
comment */
p{
color: red;
}
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
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:
p{
text-align: center;
color: red;
}
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":
#para1 {
text-align: center;
color: red;
}
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":
#para1 {
text-align: center;
color: red;
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:
.center {
text-align: center;
color: red;
}
The CSS class Selector
You can also specify that only specific HTML elements should be
affected by a class.
Example
In this example only <p> elements with class="center" will be red
and center-aligned:
p.center {
text-align: center;
color: red;
}
The CSS class Selector
Example
In this example the <p> element will be styled according to
class="center" and to class="large":
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector
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;
}
The CSS Grouping Selector
Example
• In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}
How To Add CSS
1. External CSS
2. Internal CSS
3. Inline CSS
External CSS
Note: Do not add a space between the property value and the unit:
Incorrect (space): margin-left: 20 px;
Correct (nospace): margin-left: 20px;
Internal CSS
Tip: An inline style loses many of the advantages of a style sheet (by
mixing content with presentation). Use this method sparingly.
Multiple Style Sheets
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:
So, an inline style has the highest priority, and will override external and
internal styles and browser defaults.
CSS Colors
Example:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Text Color
Example:
CSS Border Color
Example:
CSS Color Values
In CSS, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values:
Example:
CSS RGB Colors
An RGB color value represents RED, GREEN, and BLUE light sources.
• Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
• 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 HEX Colors
• 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).
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.
The CSS background properties are used to add background effects for
elements.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)
CSS background-color
Example
The background color of a page is set like this:
Other Elements
You can set the background color for any HTML elements:
Example
Here, the <h1>, <p>, and <div> elements will have different background colors:
CSS Opacity / Transparency
Example:
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. The following example sets the opacity for the
background color and not the text:
• 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).
Example:
CSS background-image
Example
• Set the background image for a page:
• The background image can also be set for specific elements, like the <p>
element:
Note: When using a background image, use an image that does not disturb the text.
CSS background-repeat
• Showing the background image only once is also specified by the background-
repeat property:
Example
• Show the background image only once:
• In the example, 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
Example
Position the background image in the top-right corner:
CSS background-attachment
Example
Specify that the background image should be fixed:
CSS background - Shorthand property
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:
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 Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.
CSS Borders
The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).
CSS Borders
Example
• Demonstration of the different border styles:
Result:
CSS Border Width
• Results:
CSS Border 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):
CSS Border Color
The border-color property is used to set the color of the four borders.
The border-color property can have from one to four values (for the top
border, right border, bottom border, and the left border).
The color of the border can also be specified using a hexadecimal value (HEX),
RGB values, and HSL values.
CSS Border Sides
In CSS, there are also properties for specifying each of the borders (top, right,
bottom, and left):
Result:
Like you saw in the previous page, there are many properties to
consider when dealing with borders.
• border-width
• border-style (required)
• border-color
CSS Border Sides
You can also specify all the individual border properties for just one side:
CSS Rounded Borders