External CSS separates content and design, enhancing code reusability, maintainability, and scalability across projects.
What are CSS rules and their types?
Key takeaways:
CSS rules are foundational to web design, defining how elements are styled and displayed on a web page.
A CSS rule includes a selector, declaration block, and declarations where properties and values are specified.
CSS types are categorized into inline, internal, and external stylesheets, offering flexibility in implementation based on project needs.
CSS rules are the foundational blocks that determine how HTML elements are styled on a web page. Each rule comprises a selector and a declaration block, which together specify the styles to be applied to selected elements.
CSS rulesets
A CSS ruleset (or rules) is a collection of one or more CSS rules that define the styles for specific HTML elements. Each ruleset consists of three main components:
Selector: Identifies the HTML element(s) to be styled.
Declaration Block: Enclosed in curly braces
{}, it contains one or more declarations.Declarations: Each declaration includes a property and a value, separated by a colon
:and terminated with a semicolon;.
An example CSS ruleset looks something like this:
CSS ruleset structure
In this example, we have the following:
Selector:
h1targets all<h1>elements.Declaration block:
{ background-color: red; color: white; }Declarations:
color: white;sets the text color to white.background-color: red;sets the background color to red.
Note: Selectors can target elements based on their tag name (e.g.,
h1), class (e.g.,.header), id (e.g.,#btn), or other attributes. Learn more about CSS selectors with this Answer.
Types of CSS
There are three types of CSS: inline, internal, and external. We will discuss each one in detail below.
1. Inline CSS
Inline CSS applies styles directly within an HTML element using the style attribute. Inline CSS is quick and easy for single-element styling and ideal for testing or small adjustments. However, it is difficult to maintain in larger projects, and it overrides other styles, which can lead to specificity conflicts. No external file is required for inline styling.
Let’s look at an example of using inline CSS below.
Explanation
Line 9: In the code snippet above, we have used the
<style>attribute that contains the CSS properties applied directly to thepelement. The properties are:color: blue;: Sets the text color of the paragraph to blue.font-size: 16px;: Sets the font size of the paragraph text to 16 pixels.
Line 10: We have used inline CSS for the
h1element similar to thepelement.
Practice inline CSS by trying out this project, Build a Custom Form Maker with MERN Stack, where we create a full stack image sharing application focusing on styling the application.
2. Internal CSS
Internal CSS is placed within a <style> block inside the <head> section of the HTML document. Internal CSS consolidates styles for a single page in the same HTML page and is useful for unique page-specific designs. However, as understandable, internal CSS is not reusable across multiple pages, and having separate styles for each page increases the size of HTML documents.
Let’s look at an example of using internal CSS below.
Explanation
Lines 4–21: The
<head>section contains metadata and styles for the HTML document.Lines 6–20: The
<style>block defines CSS rules applied to the page. We target thep, and theh1tags within this block.
3. External CSS
With external CSS, we add all of our styling parts (CSS) in a CSS file. It links a .css file to the HTML document using the <link> tag. External CSS maintains styles for the entire application and serves as a centralized state for providing styles. On the other hand, the dependence on external file loading may increase initial page load time if improperly optimized.
Let’s look at an example of using external CSS below.
Explanation
We define our styles in the
styles.cssfile.In the
index.htmlfile, on line 6, the<link>tag links the HTML document to an external stylesheet in thestyles.cssfile.rel="stylesheet": Indicates that the linked file is a stylesheet.href="/styles.css": Specifies the file path to the external CSS file namedstyles.css.
Want to get hands-on practice with external CSS in a real-world application? Try out this project, Build a Microblogging App Using PHP, HTML, JavaScript, and CSS, where we create a microblogging platform with search and admin features.
Conclusively, CSS rules are the building blocks of web design. By understanding the CSS ruleset and the types of CSS, we can create dynamic, responsive, and visually appealing web pages. Effective CSS usage not only improves user experience but also enhances a website’s SEO.
Frequently asked questions
Haven’t found what you were looking for? Contact Us