Training

The CSS stand for Cascading Style Sheets

Cascading Style Sheets (CSS) it is a style sheet language that is used for describing the presentation of a document written in a markup language like HTML or XML.

CSS describes how elements should be displayed on a screen.

To start using Cascading Style Sheets (CSS) follow these steps:

1. Create an HTML File:
This can be done using a text editor like Sublime Text or any code editor.

e.g (index.html)

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
</head>
<body>

</body>
</html>

2. Create a CSS File:

Create CSS file (styles.css) in the same directory as your HTML file.

This is where you will write your CSS code.

example

style.css

body{

background: blue;

font-size: 14px;

}

3. Link CSS to HTML:

Link your CSS file to your HTML file.

add this link <link rel="stylesheet" href="styles.css"> in your html file within the head e.g <head><link rel="stylesheet" href="styles.css"> </head>

selector{

properties: value;

}

Selectors:

Selectors target HTML elements to which you want to apply styles.

Properties:

Properties define the elements that you want to style.

Values:

Values are assigned to properties and define how the property should be applied.

example:

div{

background: blue;

color: white;

font-size: 16px

text-align: center;

}

Notice:

- You need to identify the element you want to style in your HTML page.

The comment in CSS gives an explanation about the source code.

Comment are not displayed in the browser.

Single line comment

/* This is a single line commenrt*/

Multiple line comment

/* This is a

multi line

commenrt*/

/*Orange

background

color*/

background: orange;

}

The font in CSS is a graphical representation of text that can have different font sizes and font family

style.css

/*Font-Size*/

div{

font-size: 25px

}

/*Font-family*/

div{

font-family: "Times New Roman", Times, serif;

}

Example:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div> Welcome to Schools Network</div>

</body>
</html>

The color property in CSS is used to set the color of HTML elements.

example:

style.css

div{

font-color: blue;

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div>Welcome to Schools Network</div>

</body>
</html>

The Background property in CSS is used to set the background color of HTML page or a specific area within html page.

example:

style.css

body{

background: skyblue;

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</body>
</html>

By using CSS style sheets in the table it is easy to maintain visual consistency throughout table and your website.

Cascading Style Sheet (CSS) use to style and control the layout of the table

Example:

style.css

table{

width: 100%;

border: 2px solid green;

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jafar</td>
<td>Mohammad Musa</td>
</tr>
</table>

</body>
</html>

Margins create extra space around an element,

Margin properties

margin-top: Sets the margin for the top edge of an element

margin-bottom: Sets the margin for the bottom edge of an element

margin-right: Sets the margin for the right edge of an element

margin-left: Sets the margin for the left edge of an element

Example

style.css

h1{

margin-left: 50px;

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<h1> My CSS margin</h1>

</body>
</html>

CSS allows us to format text to create visually appealing content.

The following properties are used to style text using CSS.

color: This property helps us change the text color.

letter-spacing: This property is used to set the spacing between characters.

line-height: The height of a line is specified using this property.

text-align: The horizontal alignment of the text is controlled by text-align property.

text-decoration: To underline, strikethrough or overline and style it, text-decoration is used.

text-indent: The indentation of the first line of an element is set by the text-ident property.

text-shadow: To display a shadow around text, the text-shadow property is used.

text-transform: The case of text can be set with the text-transform property.

word-spacing: The space between words can be set with this property.

The text-decoration in CSS are use to sets the appearance of decorative lines on text.

text-decoration: underline - To set the under line on text
text-decoration: line-through - To set the line through on text
text-decoration: overline - To set the overline on text

text-decoration: underline overline - To set the overline on text

Example

style.css

h1{

text-decoration: underline;

}

h2{

text-decoration: line-through;

}

h3{

text-decoration: overline;

}

h4{

text-decoration: underline overline;

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<h1>header one </h1>

<h2>header two </h2>

<h3>header three </h3>

<h4>header four </h4>

</body>
</html>

The height property in CSS are use to specifies the height of an element.

Height property values:

auto - Let the browser to calculate the height by default

% - To defines the height in percentage

length - To defines the height in cm, px, etc

initial - the default value

inherit - Inherit the property from its parent elements

Example:

style.css

div{

height: 500px;

}

index.css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</div>

</body>
</html>

Outlines are used to draw a border around an element that is outside the element's border box, without affecting the layout of the document.

Example

style.css

outline: 1px solid black;

}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<p>

</p>

</body>
</html>

FontAwesome provide a collection of scalable vector icons that you can use by adding their CSS and using specific classes.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</body>
</html>

You can choose the best method that fits your project requirements and preferences.

z-index is a CSS property that specifies the stacking order of positioned elements.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

span{

font-size: 50px;

color: white;

margin-left: 240px;

}

margin-left: 100px;

color: white;

font-size: 20px;

}

</style>

</head>

<body>

<span>HAMUJ</span>

<p>Muna alfahari da kamfaninmu, ku tuntubemu domin aiyuka</p>

</body>

</html>

Overflow property: is used to control what happens when content overflows its containing box.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Shafin farko</title>

</head>

div{

height: 300px;

overflow: scroll;

}

</style>

<body>

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<h1>Biyar</h1>

</div>

</body>

</html>

text-align property: is commonly used to align text within an element.

Example:

<!DOCTYPE html>

<head>

<title>Schools Network</title>

</head>

<body>

h1{

text-align: center;

}

div{

font-size: 30px;

text-align: center;

}

</style>

<h1>While loop</h1>

<div>

var nauraMaiKwakwalwa = ["HP", "Dell", "Acer"];

var sakamako = "";

var i = 0;

while (i < nauraMaiKwakwalwa.length) {

sakamako += nauraMaiKwakwalwa[i] + "<br>";

i++;

}

document.getElementById("demo").innerHTML = sakamako;

</script>

</div>

</body>

</html>

position property: is used to control the positioning of an element on a web page.

static: This is the default value.

relative: The element is positioned relative to its normal position.

absolute: The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor.

fixed: The element is removed from the normal document flow and positioned relative to the browser window.

sticky: The element is treated as relative positioned until it crosses a specified point while scrolling, after which it is treated as fixed positione

<!DOCTYPE html>

<html>

<head>

<style>

.p{

position: fixed;

}

</style>

</head>

<body>

<h1 class="p">Akoda yaushe inanan!</h1>

<div>

<h1>Misali na 'Daya</h1>

</div>

</body>

</html>

float property: is used to specify whether an element should be floated to the left or right of its container.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

img {

float: left;

width: 200px;

height: 200px;

margin-right: 16px;

}

h1{

text-align: center;

}

</style>

</head>

<body>

<h1>Mazaunin hagu</h1>

<span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</span>

</body>

</html>

Advantages of CSS in HTML form:

- Responsive design

- Easy maintenance

- Accesscibility

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}

label {
display: block;
margin-bottom: 8px;
}

input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}

button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Submit</button>
</form>

</body>
</html>

The CSS stand for Cascading Style Sheets

Test your skills

Result