What is CSS? A Beginner’s Guide to Styling Websites That Stand Out
What is CSS?
The language we use to style a web page is called CSS.
Cascading Style Sheets are referred to as CSS.
CSS specifies how HTML elements should appear on a screen, paper, or in other media.
A lot of work is saved via CSS. It has the ability to simultaneously manage the layout of several web pages.
CSS files contain external stylesheets.
What Makes CSS Useful?
Your web pages' styles, including its layout, design, and display variations for various screen sizes and devices, are defined using CSS.
CSS Reduces Work Significantly!
Typically, an external.css file contains the CSS definitions.
An external stylesheet file allows you to modify a single file to alter the appearance of a complete website!
============
What is CSS? A Beginner’s Guide to Styling Websites That Stand Out
CSS Syntax
A CSS rule is made up of a declaration block and a selector:
CSS chooser
You can style an HTML element by using the selector.
Semicolons are used to separate one or more declarations within the declaration block.
Each declaration contains a value and the name of a CSS property, separated by a colon.
Declaration blocks are encircled by curly braces, and several CSS declarations are separated by semicolons.
An illustration
In this example, the text will be red and all <p> elements will be centered:
p {
color: red;
text-align: center;
}
Explained Example:
In CSS, p is a selector that refers to the HTML element you wish to style: <p>.
One property is color, and its value is red; another property is text-align, and its value is center.
=========
CSS Selectors You can "find" (or choose) the HTML elements you wish to style using CSS selectors.
What is CSS? A Beginner’s Guide to Styling Websites That Stand Out
CSS selectors fall into five categories:
Simple selectors (choose elements according to class, id, and name)
Combinator selectors (choose components according to a particular relationship between them)
Select elements according to a specific state using pseudo-class selectors.
Selectors for pseudo-elements (select and style a portion of an element)
Selecting items according to an attribute or attribute value is known as an attribute selector.
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p {
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Complete Exxample :
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
==============
What is CSS? A Beginner’s Guide to Styling Websites That Stand Out
The CSS Universal Selector
Example:
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
============
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
Example:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Full code:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
======
How to Include CSS
A browser will format an HTML document based on the information found in a style sheet after it has read it.
A style sheet can be inserted in three different ways:
Linking to an external.css file is known as external CSS.
Use the <style> element in the head section for internal CSS.
Use the style attribute on HTML elements when using inline CSS.
External CSS
An external style sheet allows you to modify just one file to alter the appearance of a full website!
The <link> element in the head section of every HTML page must contain a reference to the external style sheet file.
This is an HTML code file, you can link an external file called "mystyle.css" file using Link
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
======
This is an external css file that is linked in the HTML code file.
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
==============
What is CSS (Cascading Style Sheets),
how to write CSS code for beginners,
CSS website design rules,
CSS best practices and performance,
improve website traffic with CSS,