diff --git a/Cargo.lock b/Cargo.lock
index 343c438..6f76422 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -96,6 +96,7 @@ version = "0.1.0"
 dependencies = [
  "we-css",
  "we-dom",
+ "we-html",
 ]
 
 [[package]]
diff --git a/crates/browser/src/main.rs b/crates/browser/src/main.rs
index 48e7920..018b972 100644
--- a/crates/browser/src/main.rs
+++ b/crates/browser/src/main.rs
@@ -5,18 +5,26 @@ use we_layout::layout;
 use we_platform::appkit;
 use we_platform::cg::BitmapContext;
 use we_render::Renderer;
+use we_style::computed::{extract_stylesheets, resolve_styles};
 use we_text::font::{self, Font};
 
 /// Default HTML page shown when no file argument is provided.
 const DEFAULT_HTML: &str = r#"<!DOCTYPE html>
 <html>
-<head><title>we browser</title></head>
+<head>
+<title>we browser</title>
+<style>
+h1 { color: blue; }
+h2 { color: green; }
+p { color: #333333; }
+</style>
+</head>
 <body>
 <h1>Hello from we!</h1>
 <p>This is a from-scratch web browser engine written in pure Rust.</p>
 <p>Zero external crate dependencies. Every subsystem is implemented in Rust.</p>
 <h2>Features</h2>
-<p>HTML5 tokenizer, DOM tree, block layout, and software rendering.</p>
+<p>HTML5 tokenizer, DOM tree, block layout, CSS cascade, and software rendering.</p>
 </body>
 </html>"#;
 
@@ -33,7 +41,7 @@ thread_local! {
     static STATE: RefCell<Option<BrowserState>> = const { RefCell::new(None) };
 }
 
-/// Re-run the full pipeline: parse → layout → render → copy to bitmap.
+/// Re-run the full pipeline: parse → extract CSS → resolve styles → layout → render → copy to bitmap.
 fn render_page(html: &str, font: &Font, bitmap: &mut BitmapContext) {
     let width = bitmap.width() as u32;
     let height = bitmap.height() as u32;
@@ -41,7 +49,14 @@ fn render_page(html: &str, font: &Font, bitmap: &mut BitmapContext) {
         return;
     }
 
+    // Parse HTML into DOM.
     let doc = parse_html(html);
+
+    // Extract CSS from <style> elements and resolve computed styles.
+    let stylesheets = extract_stylesheets(&doc);
+    let _styled = resolve_styles(&doc, &stylesheets);
+
+    // Layout using DOM (style-driven layout is a separate integration step).
     let tree = layout(&doc, width as f32, height as f32, font);
 
     let mut renderer = Renderer::new(width, height);
diff --git a/crates/style/Cargo.toml b/crates/style/Cargo.toml
index 8328f95..55133de 100644
--- a/crates/style/Cargo.toml
+++ b/crates/style/Cargo.toml
@@ -10,3 +10,6 @@ path = "src/lib.rs"
 [dependencies]
 we-dom = { path = "../dom" }
 we-css = { path = "../css" }
+
+[dev-dependencies]
+we-html = { path = "../html" }
diff --git a/crates/style/src/computed.rs b/crates/style/src/computed.rs
index 494be34..eba5c12 100644
--- a/crates/style/src/computed.rs
+++ b/crates/style/src/computed.rs
@@ -892,6 +892,38 @@ pub struct StyledNode {
     pub children: Vec<StyledNode>,
 }
 
+/// Extract CSS stylesheets from `<style>` elements in the document.
+///
+/// Walks the DOM tree, finds all `<style>` elements, extracts their text
+/// content, and parses each as a CSS stylesheet. Returns stylesheets in
+/// document order.
+pub fn extract_stylesheets(doc: &Document) -> Vec<Stylesheet> {
+    let mut stylesheets = Vec::new();
+    collect_style_elements(doc, doc.root(), &mut stylesheets);
+    stylesheets
+}
+
+fn collect_style_elements(doc: &Document, node: NodeId, stylesheets: &mut Vec<Stylesheet>) {
+    match doc.node_data(node) {
+        NodeData::Element { tag_name, .. } if tag_name == "style" => {
+            let mut css_text = String::new();
+            for child in doc.children(node) {
+                if let NodeData::Text { data } = doc.node_data(child) {
+                    css_text.push_str(data);
+                }
+            }
+            if !css_text.is_empty() {
+                stylesheets.push(we_css::parser::Parser::parse(&css_text));
+            }
+        }
+        _ => {
+            for child in doc.children(node) {
+                collect_style_elements(doc, child, stylesheets);
+            }
+        }
+    }
+}
+
 /// Resolve styles for an entire document tree.
 ///
 /// `stylesheets` is a list of author stylesheets (the UA stylesheet is
@@ -1767,4 +1799,184 @@ mod tests {
         assert_eq!(div_node.style.visibility, Visibility::Hidden);
         assert_eq!(p_node.style.visibility, Visibility::Hidden);
     }
+
+    // -----------------------------------------------------------------------
+    // extract_stylesheets
+    // -----------------------------------------------------------------------
+
+    #[test]
+    fn extract_single_style_element() {
+        let (mut doc, _, html, _) = make_doc_with_body();
+        let head = doc.create_element("head");
+        let style = doc.create_element("style");
+        let css_text = doc.create_text("p { color: red; }");
+        doc.append_child(html, head);
+        doc.append_child(head, style);
+        doc.append_child(style, css_text);
+
+        let sheets = extract_stylesheets(&doc);
+        assert_eq!(sheets.len(), 1);
+        assert!(!sheets[0].rules.is_empty());
+    }
+
+    #[test]
+    fn extract_multiple_style_elements() {
+        let (mut doc, _, html, _) = make_doc_with_body();
+        let head = doc.create_element("head");
+        doc.append_child(html, head);
+
+        let style1 = doc.create_element("style");
+        let css1 = doc.create_text("p { color: red; }");
+        doc.append_child(head, style1);
+        doc.append_child(style1, css1);
+
+        let style2 = doc.create_element("style");
+        let css2 = doc.create_text("div { margin: 10px; }");
+        doc.append_child(head, style2);
+        doc.append_child(style2, css2);
+
+        let sheets = extract_stylesheets(&doc);
+        assert_eq!(sheets.len(), 2);
+    }
+
+    #[test]
+    fn extract_no_style_elements() {
+        let (doc, _, _, _) = make_doc_with_body();
+        let sheets = extract_stylesheets(&doc);
+        assert!(sheets.is_empty());
+    }
+
+    #[test]
+    fn extract_empty_style_element() {
+        let (mut doc, _, html, _) = make_doc_with_body();
+        let head = doc.create_element("head");
+        let style = doc.create_element("style");
+        doc.append_child(html, head);
+        doc.append_child(head, style);
+        // No text child — empty style element.
+
+        let sheets = extract_stylesheets(&doc);
+        assert!(sheets.is_empty());
+    }
+
+    #[test]
+    fn extract_style_in_body() {
+        let (mut doc, _, _, body) = make_doc_with_body();
+        // Style elements in body should also be extracted.
+        let style = doc.create_element("style");
+        let css_text = doc.create_text("h1 { font-size: 2em; }");
+        doc.append_child(body, style);
+        doc.append_child(style, css_text);
+
+        let sheets = extract_stylesheets(&doc);
+        assert_eq!(sheets.len(), 1);
+    }
+
+    #[test]
+    fn extract_and_resolve_styles_from_dom() {
+        // Build a DOM with <style> and verify resolved styles.
+        let (mut doc, _, html, body) = make_doc_with_body();
+        let head = doc.create_element("head");
+        let style = doc.create_element("style");
+        let css_text = doc.create_text("p { color: red; font-size: 24px; }");
+        doc.append_child(html, head);
+        doc.append_child(head, style);
+        doc.append_child(style, css_text);
+
+        let p = doc.create_element("p");
+        let text = doc.create_text("hello");
+        doc.append_child(body, p);
+        doc.append_child(p, text);
+
+        let sheets = extract_stylesheets(&doc);
+        let styled = resolve_styles(&doc, &sheets).unwrap();
+        let body_node = &styled.children[0];
+        let p_node = &body_node.children[0];
+
+        assert_eq!(p_node.style.color, Color::rgb(255, 0, 0));
+        assert_eq!(p_node.style.font_size, 24.0);
+    }
+
+    #[test]
+    fn style_attribute_works_with_extract() {
+        // Inline style attributes should work even without <style> elements.
+        let (mut doc, _, _, body) = make_doc_with_body();
+        let div = doc.create_element("div");
+        doc.set_attribute(div, "style", "color: green; margin-top: 20px;");
+        let text = doc.create_text("styled");
+        doc.append_child(body, div);
+        doc.append_child(div, text);
+
+        let sheets = extract_stylesheets(&doc);
+        assert!(sheets.is_empty());
+
+        let styled = resolve_styles(&doc, &sheets).unwrap();
+        let body_node = &styled.children[0];
+        let div_node = &body_node.children[0];
+
+        assert_eq!(div_node.style.color, Color::rgb(0, 128, 0));
+        assert_eq!(div_node.style.margin_top, LengthOrAuto::Length(20.0));
+    }
+
+    #[test]
+    fn style_element_and_inline_style_combined() {
+        let (mut doc, _, html, body) = make_doc_with_body();
+        let head = doc.create_element("head");
+        let style = doc.create_element("style");
+        let css_text = doc.create_text("p { color: red; font-size: 20px; }");
+        doc.append_child(html, head);
+        doc.append_child(head, style);
+        doc.append_child(style, css_text);
+
+        let p = doc.create_element("p");
+        // Inline style overrides stylesheet for color.
+        doc.set_attribute(p, "style", "color: blue;");
+        let text = doc.create_text("hello");
+        doc.append_child(body, p);
+        doc.append_child(p, text);
+
+        let sheets = extract_stylesheets(&doc);
+        let styled = resolve_styles(&doc, &sheets).unwrap();
+        let body_node = &styled.children[0];
+        let p_node = &body_node.children[0];
+
+        // Inline style wins for color.
+        assert_eq!(p_node.style.color, Color::rgb(0, 0, 255));
+        // Font-size comes from stylesheet.
+        assert_eq!(p_node.style.font_size, 20.0);
+    }
+
+    #[test]
+    fn multiple_style_elements_cascade_correctly() {
+        let (mut doc, _, html, body) = make_doc_with_body();
+        let head = doc.create_element("head");
+        doc.append_child(html, head);
+
+        // First stylesheet sets color to red.
+        let style1 = doc.create_element("style");
+        let css1 = doc.create_text("p { color: red; }");
+        doc.append_child(head, style1);
+        doc.append_child(style1, css1);
+
+        // Second stylesheet sets color to blue (later wins in cascade).
+        let style2 = doc.create_element("style");
+        let css2 = doc.create_text("p { color: blue; }");
+        doc.append_child(head, style2);
+        doc.append_child(style2, css2);
+
+        let p = doc.create_element("p");
+        let text = doc.create_text("hello");
+        doc.append_child(body, p);
+        doc.append_child(p, text);
+
+        let sheets = extract_stylesheets(&doc);
+        assert_eq!(sheets.len(), 2);
+
+        let styled = resolve_styles(&doc, &sheets).unwrap();
+        let body_node = &styled.children[0];
+        let p_node = &body_node.children[0];
+
+        // Later stylesheet wins.
+        assert_eq!(p_node.style.color, Color::rgb(0, 0, 255));
+    }
 }
diff --git a/crates/style/tests/style_extraction.rs b/crates/style/tests/style_extraction.rs
new file mode 100644
index 0000000..41d450e
--- /dev/null
+++ b/crates/style/tests/style_extraction.rs
@@ -0,0 +1,162 @@
+//! Integration tests: HTML string → DOM → extract CSS → resolve styles.
+
+use we_css::values::Color;
+use we_style::computed::{extract_stylesheets, resolve_styles, Display, FontWeight, LengthOrAuto};
+
+#[test]
+fn html_with_style_element() {
+    let html = r#"<!DOCTYPE html>
+<html>
+<head>
+<style>
+p { color: red; font-size: 24px; }
+h1 { color: blue; }
+</style>
+</head>
+<body>
+<h1>Title</h1>
+<p>Paragraph</p>
+</body>
+</html>"#;
+
+    let doc = we_html::parse_html(html);
+    let sheets = extract_stylesheets(&doc);
+    assert_eq!(sheets.len(), 1);
+
+    let styled = resolve_styles(&doc, &sheets).unwrap();
+    // styled root is <html>
+    // Find body (first visible child)
+    let body = &styled.children[0];
+
+    // Find h1 and p
+    let h1 = &body.children[0];
+    let p = &body.children[1];
+
+    assert_eq!(h1.style.color, Color::rgb(0, 0, 255)); // blue
+    assert_eq!(p.style.color, Color::rgb(255, 0, 0)); // red
+    assert_eq!(p.style.font_size, 24.0);
+}
+
+#[test]
+fn html_with_multiple_style_elements() {
+    let html = r#"<!DOCTYPE html>
+<html>
+<head>
+<style>p { color: red; }</style>
+<style>p { color: green; }</style>
+</head>
+<body><p>text</p></body>
+</html>"#;
+
+    let doc = we_html::parse_html(html);
+    let sheets = extract_stylesheets(&doc);
+    assert_eq!(sheets.len(), 2);
+
+    let styled = resolve_styles(&doc, &sheets).unwrap();
+    let body = &styled.children[0];
+    let p = &body.children[0];
+
+    // Later stylesheet wins.
+    assert_eq!(p.style.color, Color::rgb(0, 128, 0));
+}
+
+#[test]
+fn html_with_inline_style_attribute() {
+    let html = r#"<!DOCTYPE html>
+<html>
+<head>
+<style>p { color: red; }</style>
+</head>
+<body>
+<p style="color: blue;">text</p>
+</body>
+</html>"#;
+
+    let doc = we_html::parse_html(html);
+    let sheets = extract_stylesheets(&doc);
+
+    let styled = resolve_styles(&doc, &sheets).unwrap();
+    let body = &styled.children[0];
+    let p = &body.children[0];
+
+    // Inline style overrides stylesheet.
+    assert_eq!(p.style.color, Color::rgb(0, 0, 255));
+}
+
+#[test]
+fn html_no_style_uses_ua_defaults() {
+    let html = r#"<!DOCTYPE html>
+<html>
+<body>
+<h1>Title</h1>
+<p>Text</p>
+</body>
+</html>"#;
+
+    let doc = we_html::parse_html(html);
+    let sheets = extract_stylesheets(&doc);
+    assert!(sheets.is_empty());
+
+    let styled = resolve_styles(&doc, &sheets).unwrap();
+    let body = &styled.children[0];
+
+    // Body should have 8px margin from UA stylesheet.
+    assert_eq!(body.style.margin_top, LengthOrAuto::Length(8.0));
+
+    // h1 should be block with bold and 2em font-size.
+    let h1 = &body.children[0];
+    assert_eq!(h1.style.display, Display::Block);
+    assert_eq!(h1.style.font_weight, FontWeight(700.0));
+    assert_eq!(h1.style.font_size, 32.0); // 2em * 16px
+}
+
+#[test]
+fn style_element_display_none_in_styled_tree() {
+    let html = r#"<!DOCTYPE html>
+<html>
+<head>
+<style>p { color: red; }</style>
+</head>
+<body><p>text</p></body>
+</html>"#;
+
+    let doc = we_html::parse_html(html);
+    let sheets = extract_stylesheets(&doc);
+    let styled = resolve_styles(&doc, &sheets).unwrap();
+
+    // The <head> and <style> elements should be removed (display: none).
+    // Only body should remain as a child of html.
+    assert_eq!(styled.children.len(), 1);
+    // That child is body.
+    assert_eq!(styled.children[0].style.display, Display::Block);
+}
+
+#[test]
+fn class_selector_in_style_element() {
+    let html = r#"<!DOCTYPE html>
+<html>
+<head>
+<style>
+.highlight { color: red; background-color: yellow; }
+</style>
+</head>
+<body>
+<p class="highlight">Important</p>
+<p>Normal</p>
+</body>
+</html>"#;
+
+    let doc = we_html::parse_html(html);
+    let sheets = extract_stylesheets(&doc);
+    let styled = resolve_styles(&doc, &sheets).unwrap();
+    let body = &styled.children[0];
+
+    let highlight_p = &body.children[0];
+    let normal_p = &body.children[1];
+
+    assert_eq!(highlight_p.style.color, Color::rgb(255, 0, 0));
+    assert_eq!(highlight_p.style.background_color, Color::rgb(255, 255, 0));
+
+    // Normal p inherits default color (black).
+    assert_eq!(normal_p.style.color, Color::rgb(0, 0, 0));
+}
