Scribd
Upload
14 views

Tutorial_css

Uploaded by

ishak.gg.dz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Tutorial_css

Uploaded by

ishak.gg.dz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Tutorial css.

md 3/4/2023

title: TutorialGetting Started with CSS3


author: Asmaa BENGUEDDACH
date: February 25, 2023

Learn CSS3: Fundamentals

Project Name: Build online purchase form


1. Build using HTML5 a form as shown in this preview:

Step 1: votre identité


Nom:
Email:
Téléphone:

Step 2: Adresse de livraison

Adresse:
Code postal:
Pays:

Step 3: Informations CB
visa amex master
N° de carte:
Code:
Propriétaire:

Valider

2. Replace each label in the 3rd fieldset by a label image, so we have to add 3 images.

Example: <label for="visa"><img src="imag/visa.png" alt="visa"></label>

3. Create new File style.css in your workspace.


4. Link your HTML file with the stylesheet as follow: <link rel="stylesheet"
href="style.css">

Note: rel indicate the type of file in our case is "stylesheet", the second attribute href indicate
the path to the css file.

5. Put the bellow instruction [#4] in head section, as the following:

1/7
Tutorial css.md 3/4/2023

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paiement</title>
<link rel="stylesheet" href="style.css">
</head>

6. Add dodgerblue as background color of the form, color the text with aliceblue.

7. Make all the labels inside the form as bold.

8. We would like to add a radius with 5%.

9. Define the padding as 1%, we keep the same value for the margin.

10. Now, we can move on to the fieldset components: the border line is colored to aqua , as radius
value keep it to 10%, add space of 2% in the bottom of each fieldset.

11. Now add css rules for the submit button as indicated in this preview:

Solution:

button {
display: block;
width: 20%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #0a0a23;
border: 2px solid #fd0a0a23;
color: #f5f6f7;
box-shadow: 2px 2px 5px grey;
}

Create a Dark/Light Mode


To create a dark mode in a web page, you can use CSS to apply different styles to your web page
based on a user's preference. First, you need to create two sets of styles: one for the light mode and
one for the dark mode. You can do this by defining CSS classes for each mode:
2/7
Tutorial css.md 3/4/2023

1. Create new file indark.html with the same content of index.html


2. Create new file style2.css
3. Rename style.css to style1.css
4. Change the <link> tag in each html file with the right stylesheet file.
5. Combine <a> and img Tags to switch between the two modes.
Exemple: <a href="indark.html"><img src="name.jpg" alt="label"></a>

Here the preview for the light mode:

Here the preview for the light mode:

3/7
Tutorial css.md 3/4/2023

Create a responsive Mode


To create a responsive web page using HTML and CSS, you can follow these general steps:

Use HTML5 to structure your content, including semantic elements such as <header>, <nav>,
<main>, <section>, <article>, and <footer>.

Use CSS to style your content and layout. Use relative units such as percentages and ems for sizing
and positioning, rather than fixed units like pixels.

Use media queries to apply different styles based on the device width. This allows you to create
different layouts for different screen sizes. For example, you might have a two-column layout on
desktop screens, but switch to a single column on mobile screens.

Here's an example of how to use media queries to create a responsive layout:

\newpage

Example

Box 1 Box 2
4/7
Tutorial css.md 3/4/2023

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis lacinia nulla eu felis adipiscing elit. Duis lacinia nulla eu felis
aliquet hendrerit. Nam aliquam turpis aliquet hendrerit. Nam aliquam turpis
velit, sit amet ultrices quam finibus nec. velit, sit amet ultrices quam finibus nec.

Main content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nulla eu felis aliquet
hendrerit. Nam aliquam turpis velit, sit amet ultrices quam finibus nec.

Copyright © 2023

In this example, the default styles set the font size, line height, margins, and padding for the body
element. The .container class sets a maximum width of 960 pixels and centers the content using
auto margins. The .box class sets a

Here the solution

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Page</title>
<style>
/* Default styles */
body {
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;

5/7
Tutorial css.md 3/4/2023

}
.box {
float: left;
width: 50%;
padding: 20px;
box-sizing: border-box;
}
.box img {
max-width: 100%;
height: auto;
}

/* Media queries */
@media screen and (max-width: 768px) {
.box {
float: none;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.container {
max-width: 100%;
padding: 0 10px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Web Page</h1>
</header>
<div class="container">
<section>
<div class="box">
<h2>Box 1</h2>
<img src="https://placeimg.com/640/480/animals" alt="Animal image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nulla
eu felis aliquet hendrerit. Nam aliquam turpis velit, sit amet ultrices quam finibus
nec.</p>
</div>
<div class="box">
<h2>Box 2</h2>
<img src="https://placeimg.com/640/480/nature" alt="Nature image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nulla
eu felis aliquet hendrerit. Nam aliquam turpis velit, sit amet ultrices quam finibus
nec.</p>
</div>
</section>
<article>
<h2>Main content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nulla eu
felis aliquet hendrerit. Nam aliquam turpis velit, sit amet ultrices quam finibus nec.
</p>
</article>
6/7
Tutorial css.md 3/4/2023

</div>
<footer>
<p>Copyright © 2023</p>
</footer>
</body>
</html>

Exercise: Create a Responsive Web mode for your project.

Note: download the project code source named form-css-flex and compare with your solution.

7/7

You might also like