My First CSS Example

    This is a paragraph.

    Hello World!

    These paragraphs are styled with CSS.

    Using individual margin properties

    This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.

    CSS Padding

    This element has a padding of 70px.

    The padding shorthand property - 4 values

    This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.

    Heading 1 (center)

    Heading 2 (left)

    Heading 3 (right)

    The three headings above are aligned center, left and right.

    Example text-align: justify

    The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).

    In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

    Hello World

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    The border-style Property

    This property specifies what kind of border to display:

    A dotted border.

    A dashed border.

    A solid border.

    A double border.

    A groove border.

    A ridge border.

    An inset border.

    An outset border.

    No border.

    A hidden border.

    A mixed border.

    The border-width Property

    This property specifies the width of the four borders:

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Some text.

    Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.

    The border-color Property

    This property specifies the color of the four borders:

    A solid red border

    A solid green border

    A dotted blue border

    Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

    Individual Border Sides

    2 different border styles.

    The border-radius Property

    This property is used to add rounded borders to an element:

    Normal border

    Round border

    Rounder border

    Roundest border

    Text-shadow effect!

    Text-shadow effect!

    Text-shadow effect!

    Styling a link depending on state

    szkolna stron www

    Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

    Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

    szkolna strona zsp3

    strona szkoły