HTML CSS
Cascading Style Sheets is a stand-in for CSS.
CSS greatly reduces labor. It is capable of simultaneously managing the design of several web pages.
CSS = Styles and Colors
What is CSS?
Cascading Style Sheets (CSS) are used to format a webpage’s layout.
You can use CSS to control a wide range of aspects, including color, font, text size, spacing between elements, element positioning, and layout, background pictures and colors, device and screen size-specific displays, and much more!
Using CSS
There are three methods to add CSS to HTML documents:
- Inline: via utilizing HTML elements’ style attributes
- Internal: by using a <style> element in the <head> section
- External: by linking to an external CSS file with a <link> element
Adding CSS is most commonly accomplished by storing the styles in external CSS files. To make things easier to demonstrate and for you to try yourself, we will use inline and internal styles in this article.
Inline CSS
To give a single HTML element a distinct style, using an inline CSS.
An HTML element’s <style> attribute is used by an inline CSS.
The <h1>element’s text color is set to blue in the example below, whereas the <p> element’s text color is set to red.
Example
<h1 style="color:blue;">A Blue Title</h1>
<p style="color:red;">A red sentence.</p>
Internal CSS
A single HTML page’s style is defined by an internal CSS.
An HTML page’s <head> section contains a <style> element that defines an internal CSS.
The text color of every <h1> element on that page is set to blue in the example below, and every <p> element is set to red. Moreover, the background color of the page will be “powderblue”:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a sentence.</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
External CSS
For many HTML pages, the style is defined by an external style sheet.
In the <head> element of every HTML page, include a link to an external style sheet to be used:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a title</h1>
<p>This is a sentence.</p>
</body>
</html>
Any text editor can be used to create the external style sheet. The file needs to be saved with a.css extension and cannot have any HTML code in it.
This is the appearance of the “styles.css” file:
"styles.css":
body {
background-color: pink;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a sentence.</p>
</body>
</html>
CSS Border
An HTML element’s border can be defined using the CSS border attribute.
A border can be defined for almost any HTML element.
Example
Use of CSS border property:
p {
border: 2px solid red;
}
CSS Padding
A padding (space) between the text and the border is defined by the CSS padding property.
Example
Use of CSS border and padding properties:
p {
border: 2px solid red;
padding: 30px;
}
CSS Margin
A margin, or space, outside the border is defined by the CSS margin attribute.
Example
Use of CSS border and margin properties:
p {
border: 2px solid red;
margin: 50px;
}
Link to External CSS
References to external style sheets can be made using either a path that points to the current web page or the entire URL.
Example
This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.codingask.com/html/styles.css">
Example
This example links to a style sheet located in the html folder on the current website:
<link rel="stylesheet" href="/html/styles.css">
Example
This example links to a style sheet located in the same folder as the current page:
<link rel="stylesheet" href="styles.css">
