Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
CSS stands for Cascading Style Sheets and is used to control the look, feel and visual
representation of HTML elements.
HTML is used to structure the content of a web page while CSS is used for styling and laying out
content on the page.
Purposes Of CSS:
Example:
h2 {
color: blue;
h2 - Selector
{ } - Declaration block
color - property
blue - value
Types of CSS:
● Inline CSS:
This is CSS code written directly in HTML tags. This is achieved by adding the style
attribute within the html tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Styling Example</title>
</head>
<body>
<div>
<h1 style=”color:blue”>Style Web Page</h1>
<p style=”font-size: 16px;”>This is a paragraph
with some basic styling.</p>
</div>
</body>
</html>
● Internal CSS
This is CSS code written in the <head> section of the html document. It is achieved by
adding the <style> tag in the head section of the html document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Styling Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
font-size: 16px;
line-height: 1.5;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Style Web Page</h1>
<p>This is a paragraph with some basic styling.</p>
</div>
</body>
</html>
● External CSS
This is CSS code written in a blank document and called within the HTML document via
the <link> tag in the head section of the HTML file.
Example:
mystyle.css
body {
font-family: Arial, sans-serif;
}
p {
font-size: 16px;
line-height: 1.5;
}
.container {
width: 80%;
margin: 0 auto;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Styling Example</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="container">
<h1>Style Web Page</h1>
<p>This is a paragraph with some basic styling.</p>
</div>
</body>
</html>
Selectors and Combinators:
Selectors are used to find the HTML elements that we want to style. They are a way of accessing
elements on the web page and styling them in a way of choice.
Combinators on the other hand are objects that are used to define the relationship between two
or more selectors.
Types of combinators:
Types of selectors:
These are selectors that are used to style elements based on the element name, id, or
class.
Selection by name:
Example:
p {
text-align: center;
}
The above declaration would be used to style all paragraphs on a web page.
Inorder to select all elements on the web page, we use an asterisk (*) symbol before the
declaration block. E.g
* {
text-align: center;
color: red;
Selection by id:
This is used to style an element on a web page using its unique identifier created by the id
attribute in the element tag . To select an element with a specific id, we would write a
hash (#) character before the id of the element and then a declaration block.
Example:
#first {
text-align: center;
color: red;
This would be used to style only the paragraph with the id as first on the web page.
Selection by class:
This is used to style elements on a web page that have corresponding values under the
class attribute of the element tags. To select elements with the same class value, we
would write a dot (.) character before the class name and then a declaration block.
Example:
.center {
text-align: center;
color: red;
h1, p, h2 {
text-align: center;
color: red;
Would be used to style h1 headers, h2 headers and paragraphs with the same style.
These target elements within a specific parent. They use the descendant combinator to
style elements e.g., div p targets all <p> inside <div>.
4. Child Selectors:
These select direct children of an element, e.g., div > p targets only <p> directly
inside <div>.
These select elements based on their attributes, e.g., [type="text"] targets input
fields of type text.
The following are properties that can be used when styling text in a web page.
h2 {
text-align: center;
h1 {
color: red;
● font-family: This is used to set the font family of a text on the web page.
h2 {
}
This is used to set the font family of an h2 header. However, not all fonts may be
supported by a web browser. This is when we can use fall back fonts. These are
necessary as they allow a text to be displayed in a different font incase the
browser doesn’t support the set font family
h2 {
This sets the font family of an h2 header to Brush Script MT but in case a
browser can’t easily display it, it will fall back to Times New Roman and in
case it also can’t be displayed, it will display the Verdana font.
Note: If a font family name is more than one word, it should be added to the
CSS declaration block using double quotes ("Times New Roman") and can be
omitted in case the font family name is a single word.
h2 {
font-size: 20px;
Note: The font property can be added to a css declaration block as a shorthand
property that can be used to cater for all properties dealing with fonts.
h2 {
}
This is used to add a font family of “Brush Script MT” to an h2 header but
also set its text size to 20px.
Backgrounds can be added to html elements using the following CSS properties
div {
background-color: red;
div {
background-image: url(myimage.png);
Note: The background property can be added to a css declaration block as a shorthand
property that can be used to cater for all properties dealing with backgrounds.
h2 {
background: green;
3. Box Model:
The box model defines how an element is structured in terms of content, padding, border,
and margin.
div {
width: 300px;
padding: 20px;
margin: 10px;
4. Layout techniques
Layouts define the structure, positioning and visibility of elements on a web page.
Layouts can be achieved in different ways and below are some examples:
● display:
This is used to change the default display of an element. All elements are either
displayed as inline or block but the display property can be used to change the
predefined display. There are other different types of display but these are mainly
used:
● inline - sets an html element to be inline (fill available width)
● block - sets an html element to be block (fill maximum width)
● none - Removes the object from being displayed
li {
display: inline;
}
● position
Note: The position property is used alongside top, bottom, left and
div {
position: absolute;
top: 80px;
right: 0;
● float
This defines the direction in which an element should float relative to other
information on the web page
img {
float: right;
There are other CSS properties used to design layouts but some include
5. Responsive CSS:
While working with different devices having different sizes and resolutions, CSS helps us make
web pages responsive with the help of media queries.
Media queries are conditional CSS rules based on viewport size, device orientation, and
resolution.
CSS-Code;
Meaning of keywords:
Example:
body {
background-color: lightgreen;
body {
font-size: 18px;
}
HTML COLORS:
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
Primary colors (red, green, and blue) are fundamental colors that cannot be created by mixing
other colors. Primary colors are Red, Green and Blue
Secondary colors are created by combining two primary colors. Secondary colors are Yellow,
Cyan and Magenta
Examples:
div {
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:
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
div {
}
3. HEX Colors
Hexadecimal color values are supported in all browsers. A hexadecimal color is specified
with:
#rrggbb
Examples:
● #ff0000 is displayed as red, because red is set to its highest value (ff), and the
other two (green and blue) are set to 00.
● Another example, #00ff00 is displayed as green, because green is set to its
highest value (ff), and the other two (red and blue) are set to 00.
● To display black, set all color parameters to 00, like this: #000000.
● To display white, set all color parameters to ff, like this: #ffffff.
div {
background-color: #00bfff;
color: #ffffff;
HSL stands for Hue, Saturation, and Lightness. This format however isn’t acceptable in
all browsers.
HSL color values are specified with:
hsl(hue, saturation, lightness)
Hue - is a degree on the color wheel from 0 to 360. 0 (or 360) is red, 120 is green, 240
is blue.
Lightness - is how much light you want to give the color. 0% means no light (dark),
50% means 50% light (neither dark nor light), and 100% means full light.
Examples:
● hsl(0, 100%, 50%) is displayed as red, because hue is set to 0, and the
saturation to full color (100%), and lightness to neither white or black (50%).
● rgb(120, 100%, 50%) is displayed as green, because hue is set to 120,
and the saturation to full color (100%), and lightness to neither white or black
(50%).
● To display black, set the lightness to 0%, like this: hsl(0, 0%, 0%).
● To display white, set the lightness to 0%, like this: hsl(0, 0%, 100%).
div {
}
5. HSLA Color Values
HSLA color values are an extension of HSL color values, with an Alpha channel - which
specifies the opacity for a color.
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent
at all):
div {
Trial Questions:
1. What will be the color code in hsl, rgb, rgba, hsla, and hex for the following colors
● Red
● Green
● Yellow
● Cyan
● Magenta
2. Given the html piece of code, write a simple CSS code on how You can style the text
Samuel below so that it’s red in color and has a background color of green and font of
Helvetica.
<div>
<h2>My brother, Samuel Peter lives in Denmark</h2>
</div>
3. Create a website and make it responsive on different screens with media queries.