Career Digital Skills Program
Web Development - CSS 01
What is CSS?
CSS stands for Cascading Style Sheets
CSS is the language we use to style a Web page.
CSS describes how HTML elements should be displayed.
It define styles for your web pages, including the design, layout and variations in display
for different devices and screen sizes.
CSS Example
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
CSS Syntax
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.
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
CSS Selectors
CSS selectors are used to select the HTML elements you want to style.
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:
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.
Career Digital Skills Program | 0334-9511133 Page 2
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
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:
.center {
text-align: center;
color: red;
}
CSS Comments
CSS comments are not displayed in the browser, but they can help document your source code.
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 */
}
Career Digital Skills Program | 0334-9511133 Page 3
Comments can also span multiple lines:
Example
/* This is
a multi-line
comment */
p{
color: red;
}
CSS Backgrounds
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
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: blue;
}
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)"
Career Digital Skills Program | 0334-9511133 Page 4
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 1
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}
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:
100% opacity
10% opacity
Example
div {
background: rgba(0, 225, 0, 0.3) /* Green background with 30% opacity */
}
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.
Example
Set the background image for a page:
body {
background-image: url("[Link]");
}
Career Digital Skills Program | 0334-9511133 Page 5
CSS background-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.
Example
body {
background-image: url("gradient_bg.png");
}
If the image above is repeated only horizontally (background-repeat: repeat-x;), the
background will look better.
Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
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:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
CSS background-position
The background-position property is used to specify the position of the background image.
Example
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Career Digital Skills Program | 0334-9511133 Page 6
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
Demonstration of the different border styles:
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
Career Digital Skills Program | 0334-9511133 Page 7
CSS Border - Shorthand Property
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;
}
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;
}
Career Digital Skills Program | 0334-9511133 Page 8
