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 about How to style the HTML elements by using the 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 styling 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 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 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 the CSS. In this tutorial, we'll use the external CSS. An external CSS can make your page load faster.
CSS Colors
There'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 have known 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 the 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 border. By using the CSS borders, you can specify the style, width, and color for an element 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 that 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 basics property of the styling 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 most CSS properties use for styling the HTML elements are height and width property.
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 allowed to use.
Here are the values that can be used in CSS height and width property :
- 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 basic of the CSS3 use to styling the HTML elements. You can find another of the CSS3 tutorial in the next chapter. You can find the full source code of these examples on our GitHub.
That just the basic. 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
Thank's!
