CSS stands for Cascading Style Sheets and in simple terms, it can be defined as the way to give style and colors to your content or webpage. Using CSS, you can play with the text, colors and frames/boxes by manipulating it.
CSS is commonly used with HTML. Let’s have a look, how it is used.
How To Style HTML With CSS?
There are three ways of styling HTML elements. These are as follows:
- Inline: A style attribute is used within HTML elements.
- Internal: <style> element is used within the HTML <head> section.
- External: This is done using more than one external CSS file.
Usually, developers create a separate CSS file to add styling within HTML. It is because, it gives an ease to understand and make changes (if required) for later.
Inline Styling (Inline CSS)
A unique style is given within a HTML element using inline styling. As discussed above, style attribute is used.
Syntax
<p style=”color:red;”>Technology Diving will appear in red.</p>
Output
Technology Diving will appear in red.
The font of the above text will appear red.
Internal Styling (Internal CSS)
Internal styling is specifically used for defining the style for a single HTML page.
<style> element is used within the <head> section of an HTML page. And, this is how the internal styling works.
In simple terms, CSS is used within the HTML code instead to creating a CSS file separately.
Syntax
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:blue;}
h1 {color:red;}
p {color:black;}
</style>
</head>
<body>
<h1>Welcome to Technology Diving</h1>
<p>This is an example.</p>
</body>
</html>
External Styling (External CSS)
When an external styling sheet is created and used for multiple HTML pages, then it is said to be an external styling.
This styling is commonly used by the developers as it is easy to make changes within single styling file for modifying the entire website.
The external styling file created is added using the link within the <head> section.
Syntax
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”stylefile.css”>
</head>
<body>
<h1>Welcome to Technology Diving</h1>
<p>This is an example.</p>
</body>
</html>
FOR stylefile.css
body {background-color:blue;}
h1 {color:red;}
p {color:black;}
Please Note: Any text editor can be used to write an external style sheet. It is important to note that the file cannot contain any HTML tags. And, it should be saved only with .css extension.
CSS Fonts
Different CSS properties like color, font-family and font-size are used for defining the CSS font styles.
color: Defines the text of the color for HTML page
font-family: Defines the font to be used for HTML page
font-size: Defines the text size to be used for HTML element
Syntax
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:red;
font-family:calibri;
font-size:200%;
}
p {
color:blue;
font-family:ubuntu;
font-size:150%;
}
</style>
</head>
<body>
<h1>Welcome to Technology Diving</h1>
<p>This is an example.</p>
</body>
</html>
CSS Box Model
Every HTML element has a box around it. But, it is not necessary that a user can see it every time on a webpage.
border property is used for defining the visible border around any HTML element.
Syntax
p {
border:2px solid red;
}
Every box surrounding the HTML element has some padding space between each other. So, in order to define that spacing padding property is used.
Syntax
p {
border: 2px solid red;
padding: 15px;
}
Similarly, in order to define the spacing outside the border, margin property is used.
Syntax
p {
border: 2px solid red;
padding: 15px;
margin: 20px;
}
Please Note: px refers to the pixels.
id Attribute
All the above stated CSS properties are used to style the HTML elements in a general way.
In case, an element is supposed to be defined with a special style, an id attribute is used.
Syntax
<p id=”special”>This will be special.</p>
Here, special is an id attribute used to define a style.
And, this will be done as follows:
#special {
color:red;
}
class Attribute
Just like id attribute, class attribute is used for defining the special type of elements within the webpage.
Syntax
<p class=”special”>This will be special.</p>
Here, special is a class attribute used to define a style.
And, this will be done as follows:
p.special {
color:red;
}
Please Note: ‘id’ attribute is always used for a single element. ‘class’ attribute is used for group of elements.
Let us do a quick revision
style: Used for inline styling
<style>: Used to define the internal CSS
<link>: Used for defining the external CSS file
<head>: Used for defining the CSS elements like <style> and <link> in between
color: Used for defining the text color
font-family: Used for choosing the font
font-size: Used for defining the size of the text
border: Used for adding the visible border
padding: Used for adding the space inside the border
margin: Used for adding the space outside the border
