CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. (www.w3.org)
The CSS is used to store the style of your web page. That can help you to set the style of your web view.
In this tutorial, we'll try to learn how to style the HTML elements by using CSS3. CSS3 is the third generation of the CSS specification recommended by the W3C.
How to add CSS?
We can use a style sheet to style the HTML elements. There are three ways of inserting a style sheet into the HTML document:
- External CSS
- Internal CSS
- Inline CSS
How to add CSS? See the example below.
External CSS :
Each HTML page must include a reference of the external style sheet. Place inside the <link> element contained in the <head> section of an HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Internal CSS :
If you have a unique style, use an internal CSS that is only used in one single HTML page. Place the internal CSS inside the <style> element within the <head> section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-color: aqua;
}
</style>
</head>
<body>
</body>
</html>Inline CSS :
To use inline CSS, add a style attribute to the element. An inline CSS is only used in one HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body style="background-color: aqua;">
</body>
</html>That's just a little definition and example of CSS use. Now, we'll start to style an HTML element by using CSS. In this tutorial, we'll use the external CSS. An external CSS can make your page load faster.
CSS Colors
It's not too hard to change the colors of the HTML element within the CSS3 use. We could use the color names, or RGB, HEX, HSL, RGBA, HSLA values.
Be sure you know about the color code. If you want to learn more about the color code, you can learn it in the HTML 5 Tutorial: Color Codes.
We can set the background color, text color, or border color of the HTML elements by using CSS.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita rerum nostrum, ratione sunt praesentium,
numquam magnam alias eius iusto quam voluptate laudantium consequuntur repudiandae quasi autem quis et.
Ratione
assumenda nisi cum optio voluptate sint ullam soluta distinctio. Nulla dolorum illum obcaecati rem
similique,
asperiores itaque dolore quod possimus modi.</p>
</section>
</body>
</html>- CSS
section {
border: 2px solid tomato;
}
h1 {
background-color: #e7e7e7;
}
p {
color: dodgerblue;
}
result :
CSS Borders
The CSS allows you to add an element. By using the CSS borders, you can specify the style, width, and color for an element's border.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="borders">Border on all sides</p>
<p class="border-bottom">Red Border on bottom sides</p>
<p class="border-left">Blue Border on left sides</p>
<p class="rounded">Rounded Borders</p>
</body>
</html>- CSS
p.borders {
border: 1px solid #000000;
}
p.border-bottom {
border-bottom: 1px solid red;
}
p.border-left {
border-left: 2px solid blue;
background-color: lightgray;
}
p.rounded {
border: 1px solid lightseagreen;
border-radius: 5px;
}result :
The CSS has a border-style property to specify the border to display.
Here's the value allowed by the CSS3 :
- solid - solid border
- dotted - dotted border
- dashed - dashed border
- double - double border
- groove - 3D grooved border.
- ridge - 3D ridged border.
- inset - 3D inset border.
- outset -3D outset border.
- none - no border
- hidden - hidden border
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="solid">Solid Border</p>
<p class="dotted">Dotted Border</p>
<p class="dashed">Dashed Border</p>
<p class="double">Double Border</p>
<p class="groove">Groove Border</p>
<p class="ridge">Ridge Border</p>
<p class="inset">Inset Border</p>
<p class="outset">Outset Border</p>
<p class="none">None Border</p>
<p class="hidden">Hidden Border</p>
</body>
</html>- CSS
p.solid {border-style: solid;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}result :
CSS Fonts
The font is probably the most basic property of the styling of an HTML element. In CSS, you can set the font family, font style, or font size.
The font family of a text is set with the font-family property.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="monospace">This is monospace font</p>
</body>
</html>- CSS
p.monospace {font-family: "Lucida Console", Courier, monospace;}result :
You can specify the style of the font by using the font-style property.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="monospace-italic">This is an italic monospace font.</p>
</body>
</html>- CSS
p.monospace-italic {
font-family: "Lucida Console", Courier, monospace;
font-style: italic;
}You can specify the font-size and the font-weight
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="monospace thick">The font-weight example.</p>
<p class="monospace size-32">The font-size example.</p>
</body>
</html>- CSS
p.monospace {font-family: "Lucida Console", Courier, monospace;}
p.thick {font-weight: 600;}
p.size-32 {font-size: 32px;}result :
CSS Margins and Padding
You have full control to set the margins and padding of an element.
Use the margin properties to create a space around an element.
Use the padding to create a space around the content of an element.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="borders m-individual-sides">Margin example (Individual Sides)</p>
<p class="borders p-individual-sides">Padding example (Individual Sides)</p>
<p class="borders m-shorthand">Margin example - Shorthand Property (top: 80px, right: 100px, bottom: 150px, left:
100px)</p>
<p class="borders p-shorthand">Padding example - Shorthand Property (top: 80px, right: 100px, bottom: 50px, left:
100px)</p>
</body>
</html>- CSS
/* CSS Margins */
p.m-individual-sides {
margin-top: 80px;
margin-right: 100px;
margin-bottom: 150px;
margin-left: 100px;
}
p.m-shorthand {
background-color: lightgray;
margin: 80px 100px 150px 100px;
}
/* CSS Padding */
p.p-individual-sides {
padding-top: 80px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 100px;
}
p.p-shorthand {
background-color: lightgray;
padding: 80px 100px 50px 100px;
}result :
Here's another example of shorthand properties :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- two values -->
<p class="borders m-two-values">Margin example - two values (top and bottom margins are 25px, right and left margins
are 50px)</p>
<p class="borders p-two-values">Padding example - two values (top and bottom padding are 25px, right and left
padding are 50px)</p>
<!-- one values -->
<p class="borders m-one-values">Margin example - one values (all four margins are 50px)</p>
<p class="borders p-one-values">Padding example - one values (all four padding are 50px)</p>
</body>
</html>- CSS
/* CSS Margins */
p.m-two-values {
color: #000000;
background-color: tomato;
margin: 25px 50px;
}
p.m-one-values {
color: #000000;
background-color: tomato;
margin: 50px;
}
/* CSS Padding */
p.p-two-values {
color: #000000;
background-color: tomato;
padding: 25px 50px;
}
p.p-one-values {
color: #000000;
background-color: tomato;
padding: 50px;
}result :
CSS Height and Width
Another of the most CSS properties for styling the HTML elements is are height and width properties.
The height and width properties are used to set the height and width of an element.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- CSS Height and Width -->
<p class="borders w-100">This element has width 100%</p>
<p class="borders hw-example">This element has a height of 100 pixels and a width of 500 pixels.</p>
</body>
</html>- CSS
p.w-100 {
color: #000000;
width: 100%;
}
p.hw-example {
color: #000000;
background-color: aliceblue;
width: 500px;
height: 100px;
}result :
You also set the max-width of an element by using the max-width property.
Example :
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- max width property -->
<p class="borders mw-200">This element has a height of 100 pixels and a max-width of 200 pixels.</p>
</body>
</html>- CSS
p.mw-200 {
color: #000000;
background-color: aliceblue;
max-width: 200px;
height: 100px;
}result:
The height and width properties have some values that allow for use.
Here are the values that can be used in the CSS height and width properties:
- auto - This is the default. The browser calculates the height and width
- length - Defines the height/width in px, cm, etc.
- % - Defines the height/width in percent of the containing block
- initial - Sets the height/width to its default value
- inherit - The height/width will be inherited from its parent value
All of that you read is just a basis for the CSS3 used to style the HTML elements. You can find another CSS3 tutorial in the next chapter. You can find the full source code of these examples on our GitHub.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!