Connecting Styles
"You are the CSS for my HTML!" — one day a developer said to a loved one.
In simple terms: "You make my life bright and interesting."
That’s exactly the role of CSS in website creation. CSS is used to build attractive and user-friendly websites. Developers who can skillfully work with styles are highly valued by employers.
What is CSS?
CSS (Cascading Style Sheets) is a language used to describe and change the appearance of elements.
- HTML defines the structure and meaning of content
- CSS styles and positions HTML elements
Syntax
A CSS block is called a rule. It consists of a selector and declarations inside curly braces.
- Selector — defines which elements will be styled
- Declaration — property and value pair
- Property — what you want to change
- Value — how you want to change it
selector {
property: value;
}
Ways to Add CSS
There are three ways to add CSS to an HTML document:
- Inline styles
- Internal stylesheet
- External stylesheet
Inline Styles
Inline styles are added directly inside HTML tags using the style attribute.
<p style="color: tomato;">This text is red</p>
They are hard to maintain and reuse.
Internal Stylesheet
CSS is written inside a <style> tag in the <head>.
<style>
p {
color: tomato;
}
</style>
This affects the whole page but is not reusable across multiple pages.
External Stylesheet
The best method. CSS is written in a separate file and linked to HTML.
<link rel="stylesheet" href="./css/styles.css">
This method is scalable, reusable, and easy to maintain.