Menu
Coddy logo textTech
JETZT LERNEN
flag De iconDeutschdown icon

Formular-Container

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 51 von 76.

challenge icon

Aufgabe

Einfach

In dieser Lektion werden wir das Formular strukturierter und optisch ansprechender gestalten.

Folge den unten stehenden Schritten:

  1. Wende Stile auf den form container an, um ihn hervorzuheben. Schreibe eine CSS-Regel, die das Element mit der Klasse login-form anspricht.
    1. Lege eine Hintergrundfarbe fest (weiß oder eine andere Farbe, die gut aussieht).
    2. Füge padding hinzu, damit der Inhalt innen Platz hat.
    3. Mache die Ecken abgerundet.
    4. Wende einen box-shadow an, um einen weichen Schwebeeffekt zu erzeugen.
    5. Füge einen border um das Formular hinzu (wähle eine beliebige Farbe und Dicke).
  2. Zentriere den Text innerhalb des Formulars mit der Eigenschaft text-align .

Probier es selbst

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>

Alle Lektionen in Styling with CSS

1Einführung

Was ist CSS?CSS-SyntaxCSS-KommentareDas Head-TagDas Title-Tag

4Text-Grundlagen

TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #2

7Box-Modell Teil 1

Was ist das Box-Modell?PaddingMarginsBordersBreite und HöheWiederholungs-Challenge

10Login-Formular

BodyFormular-ContainerProjekt-LektionEingabefeldProjekt-LektionButtonProjekt-Lektion

13Tonga Webseite

NavigationsmenüWillkommens-HeaderProjekt-LektionÜber-uns-BereichProjekt-LektionKontakt-BereichProjekt-LektionViewport-TagProjekt-LektionMedia QueryProjekt-Lektion

2CSS hinzufügen

Inline-CSSInternes CSSExternes CSSGrundlagen-Styling-Challenge

5Farben und Hintergründe

HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #1

8Box-Modell Teil 2

Box-SizingBorder-RadiusOverflowBox-ShadowRecap-Challenge

11Layout-Techniken

Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge

14Abschluss-Herausforderungen

Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung

3Grundlegende Selektoren

Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung

6Café-Menü

Typografie-GrundlagenText-StylingProjekt-LektionFarben und HintergründeProjekt-Lektion

9Flexbox

Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung

12Grundlagen des Responsive Designs

Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder