Zoals hieronder te zien is, kan er een rand rond elke tekst worden gemaakt met behulp van HTML en CSS op uw webpagina. In het onderstaande voorbeeld hebben we een paragraaf () omringd met een rode rand.
Eerste voorbeeld met tekst omgeven door een rode rand.
Dit voorbeeld heeft ook meerdere regels.
Om het bovenstaande voorbeeld te maken, werd de onderstaande code gebruikt.
Eerste voorbeeld met tekst omgeven door een rode rand.
Dit voorbeeld heeft ook meerdere regels.
In de bovenstaande code definieert de stijl de randafmetingen (px kort voor pixel), stijltype en randkleur. De stijl van de rand is hoe de rand op het scherm wordt weergegeven. Andere typen randstijlen zijn gestippeld, gestippeld, dubbel, gegroefd, nok, inzet en beginpunt. De randkleur bepaalt de kleur die u voor de rand wilt gebruiken. In het bovenstaande voorbeeld is de kleurcode # FF0000 gebruikt, wat de kleurcode voor rood is.
Stijl definiëren met behulp van CSS
Het uiterlijk van elementen op een webpagina kan ook worden gedefinieerd met inline CSS. Inline CSS wordt gedefinieerd in uw HTML-document, in het element. Of u kunt de CSS in een extern bestand definiëren met de extensie .css . Vervolgens kunt u vanuit elk HTML-document naar dit bestand linken, en elementen in dat document hebben toegang tot de CSS-stijlen. Met de onderstaande CSS-code wordt bijvoorbeeld een nieuwe klasse met de naam 'borderexample' gemaakt die op elke andere HTML-tag kan worden toegepast.
.borderexample {border-style: solid; border-color: # 287EC7; }
Als u de bovenstaande code wilt gebruiken en deze randstijl wilt toepassen op een HTML-alinea, kunt u iets typen dat lijkt op het onderstaande voorbeeld.
Hier is een voorbeeld van een rand gemaakt met behulp van CSS