CSS By Example

Go back...

Customization (CSS)

In order to understand customization using CSS, you firstly have to understand how to works.
As you know, HTML consists from tags, such as headings, paragraph etc. In order to define rules for a certain tag, you simply add tag name into CSS file, curly braces and rules inside. Check out this example:

I'm a barbie girl.

 
								p {
                                        color: red;
								}

Alternatively, you can use classes and IDs to assign modifications to a selected number of tags. IDs are meant to be used once, while classes can be used as many times as you wish. One element can have multiple classes. In CSS, IDs are assigned with hashtag (#) and classes with a dot (.), both must be put before the name of modification. For example:

Life in plastic

It's fantastic!

 
								HTML:
								<h2 class="red-class">Life in plastic</h2>
								<p class="red-class">It's fantastic!</p>

								CSS:
								.red-class {
									    color: red;
								}

In order to link CSS file (usually it is named style.css) with HTML, you have to use a simple code snippet. It must be put into the <head> part of HTML.

<link rel="stylesheet" href="./style.css" />

If you don't want to create a new file for your CSS, it's possible to write CSS code into HTML file. The internal style is defined inside the <style> element, inside the head section.

<head>
<style>
body {
    background-color: red;
}
</head>
</style>

An inline CSS is used to apply a unique style to a single HTML element.

<h1 style="color:pink;">A PINK Heading</h1>

Divs

Div or divider is a HTML element used as a "container" for better CSS styling. It has no effect on the content or layout until styled in some way using CSS.

<html>
<head>
    <style>
        .myDiv {
            border: 5px outset red;
            background-color: lightblue;
            text-align: center;
          }
    </style>
</head>
<body>
    <div class="myDiv">
        <h2>This is a heading in a div element</h2>
        <p>This is some text in a div element.</p>
    </div>
</body>
</html>

Span is just like Div, but for text.

I love PINK.

 
                                    HTML:
                                    <p>I love <span id="pinkId">PINK</span>.</p>
								#pinkId {
									    color: #ff52a5;
								}

Text formatting

The color property is used to set the color of the text.
To set background for text we use background-color property.
The color is specified by:

The text-align property is used to set the horizontal alignment of a text.
The letter-spacing property is used to specify the space between the characters in a text.

Barbie has a great day everyday!

 
								h1 {
									    color: #FF52A5FF;
                                        text-align: right;
                                        background-color: yellow;
                                        letter-spacing: 5px;
								}

In CSS, we use the font-family property to specify the font of a text.
The font-size property sets the size of the text.
The font-weight property specifies the weight of a font.

Sparkles!

 
								p {
                                        font-family: monospace;
                                        font-size: 30px;
                                        font-weight: bold;
                                    }

We cab also use all font properties in one:

Every night is girls night.

 
								p {
                                        font: 20px Arial, sans-serif;
								}

Code examples:

You can customize your text
however you want!

 

									.text-green-ul {
										font-family: Comic Sans MS;
										font-size: 18px;
										color: green;
										text-decoration: underline;
									}
								
								.image-as-lemon {
								width: 240px;
								height: auto;
								border: 2px solid black;
								border-radius: 50% 0 50% 0;
								}