HTML and CSS Styling Essentials
HTML & CSS: Styling Essentials
CSS (Cascading Style Sheets) controls color, typography, spacing, and layout.
Master the basics to transform plain markup into polished designs.
How CSS works
- CSS is a set of rules applied to HTML elements.
- Each rule consists of a selector and a set of declarations.
- The browser reads stylesheets top to bottom and resolves conflicts using the cascade.
Note: A selector names the HTML element you want to style, and the cascade is the decision process the browser uses when two rules try to style the same element.
Rule anatomy
section.hero {
background: #0f172a;
color: #fff;
padding: 80px 24px;
}
Review: CSS Syntax.
Ways to include CSS
- External stylesheet:
<link rel="stylesheet" href="css/styles.css">(recommended). - Internal stylesheet:
<style>inside the<head>. - Inline styles:
style="..."on an element (use sparingly).
If you want to read more about how to add CSS or get an in-depth understanding, go to How to Add CSS in the CSS tutorial.
Common selectors
Selectors target elements by type, class, id, or relationship.
Explore the dedicated chapter next.
- Type selector:
p { ... } - Class selector:
.card { ... } - ID selector:
#hero { ... } - Attribute selector:
input[type="email"] { ... }
Note: Type selectors match element names, classes group many elements, and IDs target a single unique element.
If you want to read more about CSS Selectors or get an in-depth understanding, go to CSS Selectors in the CSS tutorial.
Declarations and values
Each declaration has a property name and value, ending with a semicolon.
Declarations
body {
font-family: "Inter", sans-serif;
line-height: 1.7;
background-color: #f4f6fb;
}
Check CSS Reference for property/value definitions.
The cascade and inheritance
- Later rules override earlier ones when specificity is equal.
- Inline styles override internal/external styles.
- Some properties inherit from parent elements (e.g.,
color,font-family). - Use
!importantonly as a last resort.
Note: Specificity is a scoring system: IDs are stronger than classes, and classes are stronger than element names.
More details: CSS How To, CSS Specificity.
Working with color
Specify colors via keywords, hex, RGB, or HSL.
Color formats
.hero { background: #04AA6D; }
.card { background: rgb(255, 255, 255); }
.highlight { background: hsl(205, 90%, 60%); }
Note: Hex values start with #, rgb() uses red/green/blue numbers, and hsl() uses hue, saturation, and lightness.
Explore: CSS Colors.
Typography basics
- Fonts:
font-family. - Size:
font-size(px, rem, em). - Weight:
font-weight(400 = normal, 700 = bold). - Line height, letter spacing, text alignment.
Note: Pixels are fixed dots, rem sizes relative to the root font size, and em sizes relative to the parent element.
If you want to read more or get an in-depth understanding, see CSS Fonts and CSS Text in the CSS tutorial.
Spacing essentials
Use margin (outside) and padding (inside) to control space, along with border.
Note: Margins push elements away from neighbors; padding creates space between the border and the content inside.
Spacing
.card {
margin-bottom: 24px;
padding: 24px;
border-radius: 12px;
}
Learn more in the upcoming Box Model chapter.
Display and layout
The display property determines how elements flow.
block,inline,inline-blockfoundations.flexandgridfor modern layouts (covered later).
Note: Block elements take the full row, inline elements sit inside text, and inline-block combines both behaviors.
If you want to read more about Display & Visibility or get an in-depth understanding, go to Display & Visibility in the CSS tutorial.
Try it Yourself
Experiment with the example below to see how different css properties affect layout.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1>Styling Essentials</h1>
<p>CSS transforms HTML into beautiful interfaces.</p>
</header>
<main>
<article class="card">
<h2>Typography</h2>
<p>Adjust fonts, weights, and spacing.</p>
</article>
<article class="card">
<h2>Colors</h2>
<p>Create consistent palettes with hex or HSL.</p>
</article>
</main>
</body>
</html>
body {
font-family:"Source Sans Pro",sans-serif;
margin:0;
background:#f0f4ff;
color:#0f172a;
}
header {
background:#6366f1;
color:#fff;
padding:60px 24px;
text-align:center;
}
main {
max-width:720px;
margin:0 auto;
padding:40px 24px;
}
.card {
background:#fff;
border-radius:16px;
padding:24px;
margin-bottom:24px;
box-shadow:0 15px 35px rgba(15,23,42,0.12);
}
.card h2 {
margin-top:0;
}
