This project is a C++-based HTML and CSS parser and renderer, developed as a course project. It parses a static HTML file and applies styles defined in a CSS file. The output is rendered in a graphical window using SDL2 and SDL_ttf libraries, simulating a basic browser rendering engine.
This project supports parsing and rendering of the following:
<html>,<head>,<body><h1>,<h2>(Headings)<div>(Blocks/Sections)<p>(Paragraphs)
color,background-colormargin,paddingfont-sizehovereffects:- Text color change
- Background color change
This parser and renderer can handle:
- Nested HTML structure
- Class-based CSS styling (e.g.,
.child1,.parent1, etc.) - Inline layout simulation
- Hover effect simulation
- Simplified box model (margin + padding)
- Consistent color rendering using SDL
git clone https://github.com/your-username/cpp-html-css-renderer.git
cd cpp-html-css-renderer- Open the
.slnfile in Visual Studio. - Set the project as startup.
- Configure Environment Variables for SDL:
- Add paths to
SDL2andSDL_ttfheaders and libraries in:- Project Properties > VC++ Directories
- Project Properties > Linker > Additional Dependencies
- Add paths to
- Build and Run.
Make sure the sample HTML (
index.html) and CSS (style.css) files are in the correct directory.
| Property | Supported |
|---|---|
margin |
✅ |
padding |
✅ |
color |
✅ |
background-color |
✅ |
font-size |
✅ |
:hover effects |
✅ |
- Add support for more HTML tags like
<ul>,<li>,<a>,<img> - Advanced CSS features like
border,display,flex, etc. - JavaScript support for basic interactivity
- Improved rendering engine and layout management
- Understand parsing of structured text (HTML & CSS)
- Explore how rendering engines interpret code
- Develop low-level graphical rendering using C++
- Improve code organization and architecture for interpreters
This project is intended for educational purposes only. All content is © 2025.
Feel free to fork and expand the renderer to support more tags, styling rules, and interactions!