Web Dev: Page Layout and Complex Style Rules
Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Web Dev: Page Layout and Complex Style Rules
This course is part of Web Development with HTML5, CSS, and JavaScript Specialization
Instructor: Bill Rosenthal
Included with
What you'll learn
Manage the CSS box model, element dimensions, and universal box sizing to control layering, overflow behavior, and z-index positioning.
Implement advanced selectors, structural pseudo-classes, and user interface states to dynamically format link styles and layout hierarchies.
Build intricate responsive web layouts utilizing multi-column properties, CSS grid systems, and flexible box layout modules.
Data files for this course are provided in the first course of this specialization, "Web Dev: Environment Setup and Basic Page Creation".
Skills you'll gain
Details to know
January 2026
1 assignment
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate
There are 4 modules in this course
In this course, you'll continue developing your web-development skills by formatting element edges and corners, controlling an element's height and width, controlling an element's position and layering, and normalizing and resetting browser CSS defaults. You'll also use advanced selectors, manager user-interface states, make structure more apparent to users, and use CSS pseudo-element selectors. Then, you'll use CSS to create newspaper-style columns, grid layouts, and flexible box layouts.
This is the third course in a multi-course Specialization. All of the courses in this Specialization require that you run a XAMPP web server on localhost. The course setup instructions provided in the first course go into more detail about the hardware and software requirements.
Much of your effort in creating HTML is about placing content inside of elements. But when it comes to matters of layout, CSS gives you a lot to consider regarding what happens around the outside of an element—the edges and spacing that fence your content in. CSS gives you complete control over the spacing inside and outside the edges, the color and lines (if any) used to draw the edges. You also can control the overall size, position, and layering of elements within a web page.
What's included
1 reading6 plugins
1 reading•Total 5 minutes
- ⚠️READ THIS FIRST⚠️•5 minutes
6 plugins•Total 150 minutes
- Lesson Introduction•5 minutes
- Format Element Edges and Corners•35 minutes
- Control an Element's Height and Width•35 minutes
- Control an Element's Position and Layering•35 minutes
- Normalize and Reset Browser CSS Defaults•35 minutes
- Lesson Summary•5 minutes
CSS rules provide a powerful way to format many HTML pages from a single source, without having to spend significant time editing every page. They can make your website more consistent, and they can significantly reduce the time needed to format an entire site. Their power comes primarily from selectors, and CSS provides numerous types of selectors that will make your website formatting tasks even more efficient.
What's included
6 plugins
6 plugins•Total 150 minutes
- Lesson Introduction•5 minutes
- Use Advanced Selectors•35 minutes
- Manage User Interface States•35 minutes
- Make Structure Apparent to Users•35 minutes
- Use CSS Pseudo-Element Selectors•35 minutes
- Lesson Summary•5 minutes
CSS provides numerous options for laying out elements in complex column-and-row layouts that enable you to present information so it is easy to read, arranged for easy comparison, and adaptable to different screen layouts
What's included
5 plugins
5 plugins•Total 115 minutes
- Lesson Introduction•5 minutes
- Use CSS to Create Newspaper Style Columns•35 minutes
- Use CSS to Create Grid Layouts•35 minutes
- Use CSS to Create Flexible Box Layouts•35 minutes
- Lesson Summary•5 minutes
You'll wrap things up and then validate what you've learned in this course by taking an assessment.
What's included
1 reading1 assignment
1 reading•Total 5 minutes
- Course Summary•5 minutes
1 assignment•Total 15 minutes
- Course Assessment•15 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Offered by
Explore more from Mobile and Web Development
- Status: Free TrialU
University of California, Davis
Course
- Status: Free TrialL
Logical Operations
Course
- Status: Free Trial
Course
- Status: Free Trial
Course
Why people choose Coursera for their career
Frequently asked questions
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.
More questions
Financial aid available,