Créer un site Web est un excellent moyen de vous exprimer. Bien qu'il existe de nombreux outils de création de sites Web, l'écrire vous-même est une façon amusante d'en savoir plus sur le fonctionnement des sites Web dans les coulisses. Un bon projet pour débutant consiste à créer un site Web et à ajouter une image d'arrière-plan avec CSS. Ce projet vous permettra d'être opérationnel avec HTML et CSS.
Qu'est-ce que CSS?
CSS signifie feuille de style en cascade. C'est un langage de programmation qui vous permet de styliser les langages de balisage. Un tel langage de balisage est HTML ou Hyper-Text Markup Language. Le HTML est utilisé pour créer des sites Web. Bien que vous puissiez contrôler une partie du style du site Web à l'aide de HTML, CSS offre beaucoup plus d'options de contrôle et de conception.
Créer un site Web de base avec HTML
Puisque CSS n'est qu'un langage de style, pour l'utiliser, nous avons d'abord besoin de quelque chose à styliser. Un site Web très basique nous suffira pour commencer à jouer avec CSS. Notre page affichera "Hello World".
Bonjour le monde
Si vous n'êtes pas familier avec le HTML, passons rapidement en revue ce que font tous les éléments. Comme mentionné, HTML est un langage de balisage, ce qui signifie qu'il utilise des balises pour marquer ce qu'est le texte. Chaque fois que vous voyez un mot entouré de <> c'est une balise. Il existe deux types de balises, une balise qui marque le début d'une section en utilisant <> et une qui marque la fin d'une section en utilisant
Dans notre exemple, nous avons quatre balises. Le html La balise indique quels éléments font partie du site Web. Le diriger La balise contient les informations d'en-tête qui ne sont pas affichées sur la page mais qui sont nécessaires pour créer la page. Tous les éléments affichés se trouvent entre les corps Mots clés. Nous n'avons qu'un seul élément affiché, le p étiqueter. Il indique au navigateur Web que le texte est un paragraphe.
En rapport: 10 exemples de code CSS simples que vous pouvez apprendre en 10 minutes
Vous voulez en savoir plus sur l'utilisation de CSS? Essayez ces exemples de code CSS de base pour commencer, puis appliquez-les à vos propres pages Web.
Ajouter du CSS au HTML
Maintenant que nous avons une page simple, nous pouvons personnaliser le style avec CSS. Notre page est assez simple en ce moment, et nous ne pouvons pas faire grand-chose, mais commençons par faire ressortir notre paragraphe afin de pouvoir le distinguer de l'arrière-plan en ajoutant une bordure.
Bonjour le monde
Maintenant, notre paragraphe sera entouré d'une bordure noire. L'ajout d'une description de style en CSS à notre balise de paragraphe a indiqué au site Web comment styliser le paragraphe. Nous pouvons ajouter plus de descriptions. Augmentons l'espace blanc, ou remplissage, autour de notre paragraphe et centrons notre texte.
Bonjour le monde
Notre site Web a une meilleure apparence, mais notre code HTML commence à être désordonné avec toutes ces descriptions dans la balise de paragraphe. Nous pouvons déplacer ces informations vers notre en-tête. Notre en-tête contient les informations dont nous avons besoin pour afficher correctement le site Web.
Bonjour le monde
Maintenant, notre HTML est plus facile à lire. Vous remarquerez que nous avons dû changer certaines choses. La balise de style indique les informations de style du navigateur Web, mais également ce qu'il faut styliser. Dans notre exemple, nous avons utilisé deux façons différentes de lui dire quoi styliser. Le p dans la balise de style indique au navigateur Web d'appliquer ce style à toutes les balises de paragraphe. Le #ourParagraph la section lui dit de ne styliser que les éléments avec l'identifiant notreParagraphe. Remarquerez que identifiant des informations ont été ajoutées à la balise p dans notre corps.
Importer un fichier CSS sur votre site Web
L'ajout des informations de style à l'en-tête rend notre code beaucoup plus facile à lire. Cependant, si nous voulons styliser de nombreuses pages différentes de la même manière, nous devons ajouter ce texte en haut de chaque page. Cela peut ne pas sembler beaucoup de travail, vous pouvez le copier et le coller après tout, mais cela crée beaucoup de travail si vous souhaitez modifier un élément plus tard.
Au lieu de cela, nous allons conserver les informations CSS dans un fichier séparé et importer le fichier pour styliser la page. Copiez et collez les informations entre les balises de style dans un nouveau fichier CSS ourCSSfile.css.
p {
text-align: centre
}
#ourParagraph {
style de bordure: solide;
rembourrage: 30px;
}Ensuite, importez le fichier dans le fichier HTML.
Bonjour le monde
Ajout d'une image d'arrière-plan avec CSS
Maintenant que vous avez une base solide en HTML et CSS, l'ajout d'une image d'arrière-plan sera un jeu d'enfant. Tout d'abord, identifiez l'élément auquel vous souhaitez donner une image d'arrière-plan. Dans notre exemple, nous ajouterons un arrière-plan à la page entière. Cela signifie que nous voulons changer le style du corps. N'oubliez pas que les balises body contiennent tous les éléments visibles.
corps{
image de fond: url ("sky.jpg");
}
p {
text-align: centre
}
#ourParagraph {
style de bordure: solide;
rembourrage: 30px;
}Pour changer le style du corps en CSS, utilisez d'abord le corps mot-clé. Ensuite, ajoutez des accolades comme nous l'avons fait avant {}. Toutes les informations de style du corps doivent se trouver entre les accolades. L'attribut de style que nous voulons modifier est image de fond. Il existe de nombreux attributs de style. Ne vous attendez pas à tous les mémoriser. Ajouter un signet Aide-mémoire sur les propriétés CSS avec des attributs dont vous voulez vous souvenir.
En rapport: 8 effets HTML sympas que tout le monde peut ajouter à son site Web
Après l'attribut, utilisez un signe deux-points pour indiquer comment vous allez modifier l'attribut. Pour importer une image, utilisez URL (). cela indique que vous utilisez un lien pour pointer vers l'image. Placez l'emplacement du fichier entre crochets entre guillemets. Enfin, terminez la ligne par un point-virgule. Bien que l'espace blanc n'ait pas de signification en CSS, utilisez l'indentation pour rendre le CSS plus facile à lire.
Notre exemple ressemble à ceci:
Si votre image ne s'affiche pas correctement en raison de la taille de l'image, vous pouvez modifier l'image directement. Cependant, il existe des attributs de style d'arrière-plan dans CSS que vous pouvez utiliser pour modifier l'arrière-plan. Les images plus petites que l'arrière-plan seront automatiquement répétées en arrière-plan. Pour désactiver cela, ajoutez Répétition du fond: pas de répétition; à votre élément.
Il existe également deux façons de faire en sorte qu'une image recouvre tout l'arrière-plan. Tout d'abord, vous pouvez définir la taille de l'arrière-plan à la taille de l'écran avec taille de fond: 100% 100%;, mais cela va étirer l'image et peut trop déformer l'image. Si vous ne souhaitez pas que les proportions de l'image soient modifiées, vous pouvez également définir la taille de l'arrière-plan sur couvrir. La couverture fera que l'image d'arrière-plan couvrira l'arrière-plan, mais ne déformera pas l'image.
Changer la couleur d'arrière-plan
Changeons une dernière chose. Maintenant que nous avons un arrière-plan, notre paragraphe est difficile à lire. Rendons son arrière-plan blanc. Le processus est similaire. L'élément que nous voulons modifier est #ourParagraph. Le # indique que "ourParagraph" est un nom d'identifiant. Ensuite, nous voulons définir le Couleur de l'arrière plan attribuer au blanc.
corps{
image de fond: url ("sky.jpg");
}
p {
text-align: centre
}
#ourParagraph {
couleur de fond: blanc;
style de bordure: solide;
rembourrage: 30px;
}Bien mieux.
Continuer à concevoir votre site Web avec CSS
Maintenant que vous savez comment changer le style des différents éléments HTML, le ciel est la limite! La méthode de base pour modifier les attributs de style est la même. Identifiez l'élément que vous souhaitez modifier et décrivez comment modifier l'attribut. La meilleure façon d'en savoir plus est de jouer avec différents attributs. Mettez-vous au défi de changer la couleur de votre texte ensuite.
Vous voulez apprendre le HTML pour coder vos propres sites Web et applications? Utilisez ces exemples de pages Web et le code source pour vous apprendre le HTML et le CSS.
- Programmation
- HTML
- Création de sites web
- CSS
J. Seaton est un rédacteur scientifique spécialisé dans la décomposition de sujets complexes. Elle détient un doctorat de l'Université de la Saskatchewan; sa recherche s'est concentrée sur l'utilisation de l'apprentissage par le jeu pour accroître l'engagement des étudiants en ligne. Quand elle ne travaille pas, vous la trouverez avec ses lectures, ses jeux vidéo ou son jardinage.
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives!
Un pas de plus…!
Veuillez confirmer votre adresse e-mail dans l'e-mail que nous venons de vous envoyer.
