Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by erwinson mesa
erwinson mesa
Courses Plus Student 870 Points

Where Start Styling?

i've learning web design course and css basic course. but I still confused where to start styling.

this is my web structure :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>Akademi Flobamora</title>
    </head>
    <body>
        <header>
            <span class="title">Pusat Pendidikan Dan Latihan Pelajar</span>
            <h1>Akademi Flobamora</h1>
        </header>

        <div>
            <p>
                Akademi Flobamora merupakan Pusat Pendidikan Dan Latihan Pelajar yang didirikan oleh PSSI dan Disdikpora sebagai wadah untuk membentuk atlet dan pelajar kelas dunia. Akademi Flobamora memberi pembinaan berjenjang sebagai proyek untuk mencapai prestasi di masa depan.
            </p>
            <a href="#">Selengkapnya</a>
            <h2>Pembinaan Berjenjang</h2>
            <p>
                Akademi Flobamora melakukan pembinaan secara berjenjang yang mengacu pada standarisasi pembinaan akademi internasional. Pembinaan tersebut meliputi <a href="#grassroot">Grassroot</a>, <a href="#youth">Youth</a>, dan <a href="#senior">Senior</a>.
            </p>
            <a href="#">Selengkapnya</a>
        </div>

        <div>
            <h3>Syarat Masuk</h3>
            <p>Semua pelajar dan atlet yang memiliki potensi mempunyai peluang untuk menjadi bagian dari Akademi Flobamora, asal memenuhi syarat-syarat berikut: </p>
            <ol>
                <li>Memenuhi standar umur untuk setiap jenjang usia</li>
                <li>Memiliki nilai rapot yang minimal memenuhi standar KKM</li>
                <li>Lolos seleksi yang diadakan oleh Akademi Flobamora</li>
                <li>Bersedia tinggal, bersekolah, dan dibina di Akademi Flobamora</li>
            </ol>
            <h3>Fasilitas</h3>
            <p>
                Untuk menunjang prestasi pelajar dan atlet, Akasemi Flobamora secara maksimal memberikan fasilitas yang terbaik berupa: 
            </p>
            <ul>
                <li>Lapangan indoor dan outdoor berstandar internasional</li>
                <li>Pusat kebugaran</li>
                <li>Kelas indoor dan outdoor</li>
                <li>Asrama luas dengan fasilitas lengkap</li>
                <li><a href="#fasilitas">dan berbagai fasilitas lainnya</a></li>
            </ul>
        </div>

        <footer>
            <p>&copy; <a href="index.html">Akademi Flobamora</a></p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
    </body>
</html>

so where should i strart styling? should i styling base style like background and typography first? or i should styling the layout first? and when styling layout, should i completing style for child layour first or root layout first? Thanks :)

1 Answer

geoffrey
geoffrey
28,736 Points

To my knowledge there is no specific rule for that. As far as you succeed to create the page you want, but I often start by setting the "general" rules, on the body tag as an example. Then I take care of the layout of the page. I begin to style my header and etc... I just position everything as It should be positionned, and finally I take care of all the details such as line-height on paragraphs, things like that.

erwinson mesa
erwinson mesa
Courses Plus Student 870 Points

okay, thanks for your answer. its so helpful for me...