所有动态

CSS Study Plan Introduction The CSS study plan helps you teach your students CSS step-by-step. Creating a study plan for CSS is easy. You can use a pre-built study plan or customize it. Students have different skill levels. The study plans can be customized to ensure that everyone is challenged. Save time with pre-built teacher materials and study plans. Easily organize your class with a timeline from the introduction of CSS to the final exam. W3Schools Academy This study plan is a feature of W3Schools Academy. W3Schools Academy is a platform that has everything you need to teach coding, all in one place. It offers you as a teacher a toolbox of features that helps you succeed with teaching in your classroom. You need to have an active subscription to access the study plan feature. There are two different subscription tiers: Essentials ($1.99 / month per student) Full Access ($5.99 / month per student) Calculate your price and order here. Learn More » Academy also offer other features such as: Managing your classroom Tracking of student progress and reports Labs, assignments, and code challenges (prebuilt challenges or create your own ones) Auto-grading Teaching materials Certification exams Get a free demo » Teacher Materials W3Schools has everything you need to teach CSS. The CSS training materials is available for you to include and use in your study plan: W3Schools CSS Tutorial CSS Exercises CSS Quiz CSS Challenges (Coding challenges) CSS Certification Exam (End of Pathway Exam) CSS Syllabus With the CSS Syllabus, your students will start with the basics, like styling text and changing colors, and move to more advanced topics, like creating layouts with Flexbox, Grid, and responsive design. Each chapter has examples, try-it-yourself sections, exercises, and quizzes to make learning easy, interactive, and fun. Read more about CSS Syllabus. Study Plan Overview The study plan features are made to help teachers and students. They make learning easy, flexible, and fun. These features work for different types of classes, learning styles and student level. Learning Paths You can add ready-made learning paths. The learning paths are by default ordered by our recommended order. You can change the order. You can add custom activities with text, links, or multi-media files. Drag and drop or click to make changes to the path. Interactive Content Tutorials Try-its (test code snippets) Exercises Quiz Challenges Labs Timeline and Pace You can set a timeline of your study plan (e.g., 4-week, 8-week, 12-week, 24-week plans). You can decide the learning pace for your class. Different study plans can be assigned to different students in the same class. The flexibility can help to make sure that everyone is challenged. Track Student Progress There are tools to track student progress. The analytic tools include: chapter progress, exercises results, quiz results, exam results, and much more. The challenges can be auto-graded or manually graded. The results are available to you as a teacher. End of Pathway Exam The CSS study plan aligns with the CSS Certification Exam. The exam can be taken at the end of the study plan, at your selected date. The exam summarizes the CSS Tutorial. You get reports of the students' results. Accessibility Study plans and learning materials are accessible on desktops, tablets, and smartphones. This ensures students can learn anytime, anywhere. Learn More » Sample Study Plan You choose the timeline and pace of your study plans. Schools have different preferences. Some would like more intensive pace, e.g. 5 weeks, others 12 or more weeks. It is completely up to you. For example, this is how a 5-week CSS study plan could look like: Week 1: Introduction, Colors, Backgrounds Week 2: Borders, Margins Padding & Directions, Outline, Text Week 3: Fonts, Icons, Links, Lists, Tables Week 4: Visibility and Layouts, Float, Selectors, Image Sprites, Properties, Navigation Bar Demos, Demos Week 5: Advanced, Gradients, Shadows, Variables, Flexbox, Responsive, Grid, CSS Certification Exam Image of Sample CSS study plan: Ready to get started? Start with CSS Study Plans today. Get Started » Are You a Teacher? Are you interested in learning how you can use W3Schools Academy to Teach CSS programming? Watch a demo of W3Schools Academy. You'll see how it works, and discover how it can make teaching programming easier and more engaging. Watch Demo » ★ +1 Sign in to track progress

CSS Syllabus Introduction The W3Schools CSS Tutorial is comprehensive and beginner-friendly. It will give you a fundamental knowledge of CSS. It is designed for beginners and requires no prior experience with programming. The content has been carefully made to be bite-sized, simple, and easy to understand. The content has been proven by millions of users over the years. It is updated and improved frequently. The syllabus outline and its sequence are structured so you can learn CSS step by step, from the introduction to creating your first application with CSS. Get Started With CSS » Learning Outcomes Understand how CSS is used to format and style web pages. Use CSS rules and syntax to define how HTML elements look. Use colors, fonts, and text properties to customize webpage text. Implement different types of selectors (e.g., class, ID, element selectors) for targeted styling. Use the box model properties (border, padding, and margin) to create and change the layout. To organize elements on the page, use the positioning properties (static, relative, absolute, and fixed). Use media queries to create responsive web pages. Style borders and backgrounds with different qualities and effects. Learn how to utilize CSS Flexbox to create responsive, adaptable layouts. Link an external CSS file to an HTML document. Note: Are you a teacher teaching CSS? W3Schools Academy is a toolbox of features that can help you teach. It offers classroom features such as pre-built study plans, classroom administration and much more. Read more about Academy here. Which Subjects Are CSS Relevant For? Web pages: HTML is the standard markup language for creating web pages, and CSS is the language used to style them. Computer Science (CS) / Information Technology (IT): HTML together with CSS is fundamental to understanding the internet, web development and programming. Digital Media: Text, photos, and other media can be added to digital platforms using CSS together with HTML, which is essential for content creation and management. Business / Entrepreneurship: Understanding how to create a website is helpful for projects related to the internet. Art and Design: CSS supports Web Design, creativity, and visual communication ideas that are all part of web design. STEM (Science, Technology, Engineering, Mathematics): Building web pages with HTML and CSS is a part of technology integration in STEM projects, teaching logical thinking and problem-solving. Career and Technical Education (CTE): CSS together with HTML is part of the curriculum for career-focused courses, especially those related to web development, IT support, and digital marketing. Get Started Activities In this tutorial we offer different activities for you to learn CSS for free: Lessons Exercises Quizzes Sign in to Track Progress You can also create an account to track your progress. As a signed-in user, you get access to features such as: Learning paths Sandbox and lab environments Achievements And much more! Sign Up Sandbox and Lab Environment CSS, like any other coding language, is best learned by working hands-on with code. Easily try code with our "Try it Yourself" editor. Here, you can edit CSS code and view the result: CSS Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } Try it Yourself » If you want to explore more and host your project, we have a feature called Spaces that allows you to build, test and deploy static websites. Here you get a secure sandbox environment called Spaces, where you can practice coding and test projects in real-time. Spaces allow you to test, build, and deploy code. This includes a W3Schools subdomain, hosting, and secure SSL certificates. Spaces require no installation and run directly in the browser. Features include: Collaboration File navigator Terminal & log Package manager Database Environment manager Analytics Create a Spaces Account CSS Certification W3Schools offers an end-of-pathway certification program. Here you can take exams to get certified. The CSS exam is a test that summarizes the W3Schools CSS syllabus. After passing the exam you get the "Certified CSS Developer" Certification. There are two different types of certifications: Non-adaptive Adaptive The non-adaptive is pass or no pass. The adaptive certification is adaptive and graded; students will get a grade from intermediate, advanced to professional. Buy Certificate » Are You a Teacher? Are you interested in learning how you can use W3Schools Academy to Teach CSS? Watch a demo of W3Schools Academy. You'll see how it works, and discover how it can make teaching programming easier and more engaging. Watch Demo » ★ +1 Sign in to track progress

CSS and HTML Website Hosting Create a Website with HTML and CSS Host Websites with W3Schools Spaces Get Started for Free Practice Coding Skills kAI AI Tutor Build Projects Host Securely Choose your Plan By subscribing to a plan you support the W3Schools mission to make learning available to everyone - no matter their background. Monthly Annually NEW SUBSCRIBER DEAL 25% OFF FOR A YEAR USE PROMO CODE: SPACES25 Want custom domains? You can also buy a domain or connect an existing one. Looking to add multiple users? Read here for how to get in touch Powerful Code Editor Front-end, Back-end or Full-stack - the choice is yours Practice Makes Perfect Sharpen and Master your development skills with these technologies using Spaces. Get Started for Free Save Time with Templates Build powerful websites in just a few clicks Portfolio Blog Webshop Tutor Explore All Templates Get Started for Free kAI Just landed in Spaces Learn to code more effectively and intelligently with kAI - AI tutor Get Started for Free Hi! I'm kAI, W3Schools AI Tutor... Feel free to ask me any coding-related questions, and I'll do my best to assist you. I can help you checking your code for errors, improving your code's structure, explaining coding concepts in a clear and understandable way, and more... I can even create complete websites for you based on your input, so what are you waiting for? Super Simple to Share Host and Publish Websites in no time Included for in all plans W3Schools subdomain, hosting, and SSL certificate. Want custom domains? Buy a domain or transfer an existing one and connect it to your space. How it works 1. Join W3Schools - and create a space 2. Choose a template - or start from scratch 3. Edit code directly in your browser 4. Share your website with the world Coding Made Easy All at your fingertips with our easy-to-use code editor Cloud-based Terminal & Log How To Libraries Database File Navigator Package Manager Analytics Environment Manager Get Started for Free Cloud-Based Save Time & Money. No installation required. Access everything in your browser. Get started in seconds. Get Started for Free File Navigator All Your Files in One Place. Find and switch easily between your code files without leaving the code editor. Get Started for Free Terminal and Log Fix Your Code Faster. Monitor your code, debug and troubleshoot your work during the development process. Get Started for Free Database Get Full Data Visibility. Find and preview all the data stored in your website. Anytime, from anywhere. Get Started for Free Environment Manager Increased Control and Security. Control your website access points to establish secure connections. Get Started for Free Package Manager Find What You Need Quicker. Search and install frameworks and libraries in just one click. Get Started for Free User Analytics Get Traffic Insights. Learn from your website visitors to deliver a better user experience. Get Started for Free Get Inspired Connect and share your website with the community to get instant feedback Get Started for Free Frequently Asked Questions What's the difference between 'Basic' and 'Full Stack' Spaces? With Basic Spaces, you can build frontend websites. Whereas with Fullstack Spaces, you can build frontend and backend websites. Which programming languages are included in 'Basic' and 'Full Stack' Spaces? Basic Spaces include HTML, CSS, and Javascript. Full Stack Spaces include everything in Basic Spaces plus PHP, Python, React.js, Vue.js, Node.js, Handlebars, and Django. How are subscriptions renewed? Your subscription will be automatically renewed every month. What happens if I cancel my subscription? Your access to all the benefits for the paid period of time will continue. However, the subscription will not be renewed automatically. Can I subscribe to multiple accounts at once? To subscribe W3Schools accounts for multiple users, you can contact sales@w3schools.com Have some other questions? Visit our support page Start Free Trial Cancel anytime. ★ +1 Sign in to track progress

CSS Code Challenges Test your CSS skills with code challenges from all categories: Code Challenges Loading challenges...

CSS Exercises Test your CSS skills with exercises from all categories: Exercises Tip: Sign in to track your progress. 0/152 done Syntax6 exercisesOpenDoneSelectors6 exercisesOpenDoneSelectors Grouping3 exercisesOpenDoneHow To4 exercisesOpenDoneHow To - Internal2 exercisesOpenDoneHow To - Inline2 exercisesOpenDoneHow To - Multiple and Cascade3 exercisesOpenDoneComments5 exercisesOpenDoneColors5 exercisesOpenDoneRGB5 exercisesOpenDoneHEX7 exercisesOpenDoneHSL6 exercisesOpenDoneBackground Color7 exercisesOpenDoneBackground Image6 exercisesOpenDoneBackground Repeat6 exercisesOpenDoneBackground Attachment5 exercisesOpenDoneBackground Shorthand6 exercisesOpenDoneBorder5 exercisesOpenDoneBorder Width6 exercisesOpenDoneBorder Color6 exercisesOpenDoneBorder Sides5 exercisesOpenDoneBorder Shorthand5 exercisesOpenDoneRounded Borders5 exercisesOpenDoneMargins8 exercisesOpenDoneMargin Collapse3 exercisesOpenDonePadding7 exercisesOpenDonePadding box-sizing1 exercisesOpenDoneHeight and Width5 exercisesOpenDoneHeight and Width3 exercisesOpenDoneBox Model8 exercisesOpenDoneOutline4 exercisesOpenDoneOutline Width6 exercisesOpenDoneOutline Color6 exercisesOpenDoneOutline Shorthand3 exercisesOpenDoneOutline Offset4 exercisesOpenDoneText5 exercisesOpenDoneText Alignment7 exercisesOpenDoneText Decoration7 exercisesOpenDoneDecoration Styles4 exercisesOpenDoneText Transformation5 exercisesOpenDoneText Spacing6 exercisesOpenDoneText Shadow5 exercisesOpenDoneFont Family6 exercisesOpenDoneWeb Safe Fonts5 exercisesOpenDoneFont Style8 exercisesOpenDoneFont Size7 exercisesOpenDoneFont Shorthand3 exercisesOpenDoneIcons3 exercisesOpenDoneLinks8 exercisesOpenDoneLists8 exercisesOpenDoneTables6 exercisesOpenDoneTable Size4 exercisesOpenDoneTable Alignment7 exercisesOpenDoneTable Style6 exercisesOpenDoneTable Responsive5 exercisesOpenDoneDisplay6 exercisesOpenDoneDisplay / Hide3 exercisesOpenDoneMax Width5 exercisesOpenDonePosition Static / Relative5 exercisesOpenDonePosition Fixed / Absolute5 exercisesOpenDonePosition Sticky4 exercisesOpenDoneZ-index6 exercisesOpenDoneOverflow6 exercisesOpenDoneOverflow X/Y4 exercisesOpenDoneFloat4 exercisesOpenDoneClear7 exercisesOpenDoneInline-block4 exercisesOpenDoneAlign Horizontal5 exercisesOpenDoneAlign Vertical5 exercisesOpenDoneCombinators9 exercisesOpenDonePseudo Classes Interactive8 exercisesOpenDonePseudo Classes Structural5 exercisesOpenDonePseudo Elements Text5 exercisesOpenDonePseudo Elements Content7 exercisesOpenDoneOpacity9 exercisesOpenDoneVertical Navbar4 exercisesOpenDoneHorizontal Navbar4 exercisesOpenDoneDropdowns4 exercisesOpenDoneAdvanced Dropdowns4 exercisesOpenDoneAttribute Selectors5 exercisesOpenDoneAttribute Selectors Advanced5 exercisesOpenDoneForm Inputs5 exercisesOpenDoneForm Focus/Icons4 exercisesOpenDoneForm Elements4 exercisesOpenDoneCounters4 exercisesOpenDoneCounters Nested3 exercisesOpenDoneUnits Absolute4 exercisesOpenDoneUnits Relative6 exercisesOpenDoneSpecificity5 exercisesOpenDoneSpecificity Hierarchy3 exercisesOpenDone!important5 exercisesOpenDoneMath Functions9 exercisesOpenDoneRounded Corners8 exercisesOpenDoneBorder Images6 exercisesOpenDoneMultiple Backgrounds9 exercisesOpenDoneColors9 exercisesOpenDoneColor Keywords7 exercisesOpenDoneLinear Gradients8 exercisesOpenDoneRadial Gradients8 exercisesOpenDoneConic Gradients4 exercisesOpenDoneShadow Effects7 exercisesOpenDoneBox Shadow5 exercisesOpenDoneText Effects9 exercisesOpenDoneWeb Fonts5 exercisesOpenDone2D Transforms5 exercisesOpenDone2D Transform Scale4 exercisesOpenDone2D Transform Skew4 exercisesOpenDone3D Transforms6 exercisesOpenDoneTransitions4 exercisesOpenDoneTransition Timing5 exercisesOpenDoneAnimations3 exercisesOpenDoneAnimation Timing5 exercisesOpenDoneAnimation Properties4 exercisesOpenDoneTooltips4 exercisesOpenDoneTooltip Arrows4 exercisesOpenDoneImages5 exercisesOpenDoneImage Effects4 exercisesOpenDoneImage Hover4 exercisesOpenDoneImage Centering4 exercisesOpenDoneImage Filters8 exercisesOpenDoneImage Shapes8 exercisesOpenDoneObject Fit6 exercisesOpenDoneObject Position3 exercisesOpenDoneMasking5 exercisesOpenDoneButtons5 exercisesOpenDoneButton Hover4 exercisesOpenDoneButton Groups4 exercisesOpenDonePagination4 exercisesOpenDonePagination Styles4 exercisesOpenDoneMultiple Columns4 exercisesOpenDoneMultiple Column Rules5 exercisesOpenDoneUser Interface4 exercisesOpenDoneVariables6 exercisesOpenDoneThe property Rule4 exercisesOpenDoneBox Sizing5 exercisesOpenDoneMedia Queries6 exercisesOpenDoneFlexbox3 exercisesOpenDoneFlex Container4 exercisesOpenDoneFlexbox Justify4 exercisesOpenDoneFlexbox Align4 exercisesOpenDoneFlex Items6 exercisesOpenDoneFlex Responsive3 exercisesOpenDoneGrid Columns and Rows7 exercisesOpenDoneGrid Container8 exercisesOpenDoneGrid Align Content4 exercisesOpenDoneGrid Item6 exercisesOpenDoneRWD Intro3 exercisesOpenDoneRWD Viewport4 exercisesOpenDoneRWD Grid View3 exercisesOpenDoneRWD Media Queries4 exercisesOpenDoneRWD Images4 exercisesOpenDoneRWD Videos3 exercisesOpenDone Log in to track your progress If you haven't already, sign up to become a W3Schooler, and get points for every exercise you complete. As a logged-in W3Schools user you will have access to many features like having your own web page, track your learning progress, receive personal guided paths, and more. The Exercise The exercises are a mix of "multiple choice" and "fill in the blanks" questions. There are between 3 and 9 questions in each category. The answer can be found in the corresponding tutorial chapter. If you're stuck, or answer wrong, you can try again or hit the "Show Answer" button to see the correct answer. Kickstart your career Get certified by completing the course Get certified ★ +1 Sign in to track progress

CSS Quiz You can test your CSS skills with W3Schools' Quiz. The Test The test contains 25 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know, or don't know, about CSS. Count Your Score You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points. Start the Quiz Good luck! Start the CSS Quiz ❯ If you don't know CSS, we suggest that you read our CSS Tutorial from scratch. Kickstart your career Get certified by completing the course Get certified ★ +1 Sign in to track progress

CSS Snippets CSS Snippets Have you ever seen a cool feature on a website and thought "How do they do that"? We have collected a bunch of CSS snippets that you can use in your projects, for free: Image Text Blocks Nature Beautiful sunrise Learn How To » Alert Buttons Success Info Warning Danger Default Learn How To » Loaders Learn How To » Top Navigation Home News Contact Learn How To » Animated Search Form Learn How To » Hover Dropdowns Hover Link 1 Link 2 Link 3 Learn How To » Fixed Sidebar Learn How To » How To - Snippets Library For more snippets, you can visit our How To section, that include hundreds of code snippets for HTML, CSS and JavaScript. Go to W3Schools How To section » ★ +1 Sign in to track progress

CSS Online Editor CSS Editor With our online CSS editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser. Run » Size: Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; } My First CSS Example This is a paragraph. Try it Yourself » Click on the "Try it Yourself" button to see how it works. Publish Your Code If you want to save your HTML, CSS and JavaScript code, and create your own website, check out W3Schools Spaces. W3Schools Spaces is a website-building tool that lets you make and share your own website. You can change the website's look and how it works by editing the code right in your web browser. It's easy to use and doesn't require any setup: The code editor is packed with features to help you achieve more: Templates: Start from scratch or use a template Cloud-based: no installations required. You only need your browser Terminal & Log: debug and troubleshoot your code easily File Navigator: switch between files inside the code editor And much more! Learn More Learn Faster Practice is key to mastering coding, and the best way to put your CSS knowledge into practice is by getting practical with code. Use W3Schools Spaces to build, test and deploy code. The code editor lets you write and practice different types of computer languages. It includes HTML/CSS/JavaScript, but you can use it for other languages too, such as PHP, Python, Node.js, etc. Learn More If you don't know CSS, we suggest that you read our CSS Tutorial from scratch. Build Powerful Websites You can also use the code editor in W3School Spaces to build frontend or full-stack websites from scratch. Or you can use the 60+ templates available and save time: Create your Spaces account today and explore them all! Learn More Share It With The World Host and publish your websites in no time with W3School Spaces. W3Schools subdomain and SSL certificate are included with W3School Spaces. An SSL certificate makes your website safe and secure. It also helps people trust your website and makes it easier to find it online. Want a custom domain for your website? You can buy a domain or transfer an existing one and connect it to your space. Learn More How Does It Work? Get started in a few clicks with W3School Spaces. ★ +1 Sign in to track progress

CSS Examples CSS Syntax CSS syntax CSS syntax explained CSS Selectors The element selector The id selector The class selector (for all elements) The class selector (for only <p> elements) An HTML element that refer to two classes The universal selector Grouping selectors CSS selectors explained CSS How To / Where To External CSS Internal CSS Inline CSS Multiple style sheets Cascading order CSS how to explained CSS Comments Single-line comment Multi-line comment CSS comments explained CSS Colors Set the background color of an element Set the text color Set the border color Set different color values Set RGB values Set HEX values Set HSL values CSS colors explained CSS Backgrounds Set the background color of a page Set the background color of different elements Set an image as the background of a page How to repeat a background image only horizontally How to position a background image A fixed background image (this image will not scroll with the rest of the page) All the background properties in one declaration Advanced background example CSS background properties explained CSS Borders Set the width of the four borders Set the width of the top border Set the width of the bottom border Set the width of the left border Set the width of the right border Set the style of the four borders Set the style of the top border Set the style of the bottom border Set the style of the left border Set the style of the right border Set the color of the four borders Set the color of the top border Set the color of the bottom border Set the color of the left border Set the color of the right border All the border properties in one declaration Add rounded borders to an element Set different borders on each side All the top border properties in one declaration All the bottom border properties in one declaration All the left border properties in one declaration All the right border properties in one declaration CSS border properties explained CSS Margins Specify different margins for each side of an element Use shorthand margin property with four values Use shorthand margin property with three values Use shorthand margin property with two values Use shorthand margin property with one value Set margin to auto to center the element within its container Let the left margin be inherited from the parent element Margin collapse Margin properties explained CSS Padding Specify different padding for each side of an element Use shorthand padding property with four values Use shorthand padding property with three values Use shorthand padding property with two values Use shorthand padding property with one value Padding and element width (without box-sizing) Padding and element width (with box-sizing) Set padding-left of an element Set padding-right of an element Set padding-top of an element Set padding-bottom of an element CSS padding properties explained CSS Height/Width Set the height and width of an element Set max-width of an element Set the height and width of different elements Set the height and width of an image using percent Set min-width and max-width of an element Set min-height and max-height of an element CSS height/width properties explained CSS Box Model Demonstrating the box model Calculate the total width CSS box model explained CSS Outline Draw a line around an element (outline) Set the style of an outline Set the color of an outline Set the width of an outline Use the shorthand outline property Outline with rounded corners Using outline-offset Using outline-offset with negative value CSS outline properties explained CSS Text Set the text color of different elements Set the text color and background color of different elements Align the text Using text-align: justify Using text-align-last Vertical alignment of an image inside text Set the text direction of an element Using text-decoration-line Using text-decoration-color Using text-decoration-style Using text-decoration-thickness Using the text-decoration shorthand property Using text-decoration: none Using text-transform Using text-indent Using letter-spacing Using line-height Using word-spacing Using white-space Add a text shadow for an element Add a colored text shadow for an element Add a colored text shadow with blur effect Text shadow on white text Text shadow with red neon glow Text shadow with red and blue neon glow Another text shadow effect CSS text properties explained CSS Fonts Set different fonts for a text Using fallback font Using the font-style property Using the font-weight property Set the font-variant property Set font size in px Set font size in em Set font size in rem Set font size in vw Using the font shorthand property Font properties explained CSS Icons Font Awesome icons Bootstrap icons Google icons CSS icons explained CSS Links Style a link Style a link depending on state Style a link with text-decoration Style a link with background-color Create a link button Create a link button with borders Add other styles to links Different types of cursors CSS link properties explained CSS Lists All the different list item markers in lists Set an image as the list-item marker Position the list-item marker Remove default list settings All list properties in one declaration Style lists with colors Full-width bordered list CSS list properties explained CSS Tables Specify a black border for table, th, and td elements Specify a green border for table, th, and td elements Using border-collapse Use padding in table Using border-spacing Using border-spacing Single border around the table Full-width table Half-width table Fixed-width table Auto width table Set height of table headers Center-align the content of td elements Left-align the content in th Vertical alignment of content Horizontal dividers for a table Highlight table rows on mouse over Zebra-striped table Colored table header A responsive table Using caption-side Create a fancy table CSS table properties explained CSS Display Using visibility:hidden Using display:none Difference between display:none and visiblity: hidden All different display values How to display a block-level element as an inline element How to display an inline element as a block-level element How to use CSS and JavaScript to show a hidden element How to use CSS and JavaScript to toggle between show and hide CSS display properties explained CSS Positioning Using position: static Using position: relative Using position: fixed Using position: absolute Using position: sticky Position image text (top left corner) Position image text (top right corner) Position image text (bottom left corner) Position image text (bottom right corner) Position image text (centered) Using positioning and z-index Using z-index to set stack order Using no z-index CSS positioning properties explained CSS Overflow Using the overflow property Using overflow: visible Using overflow: hidden Using overflow: scroll Using overflow: auto Using overflow-x and overflow-y. CSS overflow properties explained CSS Floating A simple use of the float property An image with border and margins that floats to the right in a paragraph An image with a caption that floats to the right Let the first letter of a paragraph float to the left Turning off float (using the clear property) Turning off float (using the "clearfix" hack) Create floating boxes Create side-by-side images Create equal-height boxes (with flexbox) Creating a horizontal menu CSS float properties explained CSS Inline-block Show the differences between inline, inline-block and block Using inline-block to create navigation links CSS inline-block explained CSS Aligning Elements Center align with margin Center aligning text Center an image Center align with flexbox Center align with grid Left/Right aligning with position Left/Right aligning with float Center vertically and horizontally with position CSS align properties explained CSS Combinators Descendant selector Child selector Adjacent Sibling selector General Sibling selector CSS combinators explained CSS Pseudo-classes Display links in different colors depending on state Add other styles to hyperlinks Using :hover on div Use of :focus Combine pseudo-classes and HTML classes Use :hover to show tooltip :first-child - style all first child p elements :first-child - style the first em element in all p elements :first-child - style all em elements in all first child p elements Use of :lang CSS pseudo-classes explained CSS Pseudo-elements Make the first letter special in a text Make the first line special in a text Make the first letter and first line special Use :before to insert some content before an element Use :after to insert some content after an element Use :marker to style list item markers Use :selection to style user-selected text Use :backdrop to style the viewbox behind a dialog box CSS pseudo-elements explained CSS Opacity Creating transparent images Creating transparent images - mouseover effect Reversed mouseover effect for transparent images Transparent boxes with opacity Opacity vs background RGBA Text in transparent box CSS image opacity explained CSS Navigation Bars Vertical navbar - fully styled Horizontal navbar - fully styled Horizontal navbar using float Horizontal navbar using flex Vertical navbar - full-height and fixed Horizontal navbar - fixed top Sticky navigation bar Responsive top navigation Responsive side navigation CSS navigation bars explained CSS Dropdowns Dropdown text Dropdown menu Right-aligned dropdown menu Dropdown image Dropdown navigation bar CSS dropdowns explained CSS Image Gallery Image gallery Responsive Image gallery CSS image gallery explained CSS Image Sprites An image sprite An image sprite - a navigation list An image sprite with hover effect CSS image sprites explained CSS Attribute Selectors Selects all <a> elements with a target attribute Selects all <a> elements with a target="_blank" attribute Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower" Selects all elements with a class attribute value that begins with "top" (must be whole word) Selects all elements with a class attribute value that begins with "test" Selects all elements with a class attribute value that ends with "test" Selects all elements with a class attribute value that contains "te" CSS attribute selectors explained CSS Forms Full-width input field Padded input field Bordered input field Bottom bordered input field Colored input fields Focused input fields Focused input fields 2 Input with icon/image Animated search input Styling textareas Styling select menus Styling input buttons Responsive form CSS forms explained CSS Counters Create a counter Decrease a counter by 1 Increase a counter by 2 Using two counters Using the counters() function CSS counters explained CSS Website Layout Website layout - header Website layout - Navbar Website layout - 3 column to 1 column Website layout - Basic footer Website layout - Fixed footer Responsive Website Example CSS website layout explained CSS Rounded Corners Add rounded corners to elements Round each corner separately Create elliptical corners CSS rounded corners explained CSS Border Images Create an image border around an element, using the round keyword Create an image border around an element, using the stretch keyword Image border - Different slice values CSS border images explained CSS Backgrounds Add multiple background images for an element Specify the size of a background image Scale a background image using "contain" and "cover" Define sizes of multiple background images Full-size background image Background hero image Use background-origin to specify where the background image is positioned Use background-clip with a background image Use background-clip with a background color CSS backgrounds explained CSS Colors Different RGBA colors Different HSLA colors Different colors with opacity CSS colors explained CSS Color Keywords Using the transparent keyword Using the currentcolor keyword Using the currentcolor keyword Using the currentcolor keyword Using the inherit keyword CSS color keywords explained CSS Gradients Linear Gradient - top to bottom Linear Gradient - bottom to top Linear Gradient - left to right Linear Gradient - diagonal Linear Gradient - with a specified angle Linear Gradient - with multiple color stops Linear Gradient - color of a rainbow + text Linear Gradient - with transparency Linear Gradient - a repeating linear gradient Radial Gradient - evenly spaced color stops Radial Gradient - differently spaced color stops Radial Gradient - set shape Radial Gradient - different size keywords Radial Gradient - a repeating radial gradient Conic Gradient - Three colors Conic Gradient - Five colors Conic Gradient - Three colors and degrees Conic Gradient - Pie chart Conic Gradient - Pie chart 2 Conic Gradient - With a from angle Conic Gradient - With a center position Conic Gradient - Repeating a conic gradient Conic Gradient - Repeating a conic gradient 2 CSS gradients explained CSS Shadow Effects Simple shadow effect Add a color to the shadow Add a blur effect to the shadow White text with black shadow A red neon glow shadow A red and blue neon glow shadow White text with black, blue, and darkblue shadow Border around text Add a simple box-shadow to an element Add color to box-shadow Add color and blur effect to box-shadow Add color, blur, and spread effect to box-shadow Using the inset keyword in box-shadow Add multiple shadows for an element Create paper-like cards (text) Create paper-like cards (polaroid images) CSS shadow effects explained CSS Text Effects Specify how hidden, overflowed content should be signaled to the user How to display the overflowed content when hover over the element Allow long words to be able to be broken and wrap onto the next line Specify whether lines of text are laid out horizontally or vertically CSS text explained CSS Custom Fonts Use your "own" fonts in @font-face rule Use your "own" fonts in @font-face rule (bold) CSS custom fonts explained CSS 2D Transforms translate() - move an element from its current position rotate() - rotate an element clockwise rotate() - rotate an element counter-clockwise scale() - increase an element scale() - decrease an element skewX() - skews an element along the X-axis skewY() - skews an element along the Y-axis skew() - skews an element along the X and Y-axis matrix() - rotate, scale, move, and skew an element CSS 2D transforms explained CSS 3D Transforms rotateX() - rotate an element around its X-axis at a given degree rotateY() - rotate an element around its Y-axis at a given degree rotateZ() - rotate an element around its Z-axis at a given degree CSS 3D transforms explained CSS Transitions Transition - change width of an element Transition - change width and height of an element Specify different speed curves for a transition Specify a delay for a transition effect Add a transformation to a transition effect Specify all transition properties in one shorthand property CSS transitions explained CSS Animations Bind an animation to an element Animation - change background-color of an element Animation - change background-color and position of an element Delay an animation Run animation 3 times before it stops Run animation for ever Run animation in reverse direction Run animation in alternate cycles Speed curves for animations Animation shorthand property CSS animations explained CSS Tooltips Right tooltip Left tooltip Top tooltip Bottom tooltip Tooltip with arrow Animated tooltip CSS tooltips explained CSS Style Images Rounded image Circled image Thumbnail image Thumbnail image as link Responsive image Polaroid images Image with opacity Image text (top left corner) Image text (top right corner) Image text (bottom left corner) Image text (bottom right corner) Image text (centered) Image hover - Fade in text Image hover - Fade in a box Image hover - Slide in from top Image hover - Slide in from bottom Image hover - Slide in from left Image hover - Slide in from right Flip an image on hover Responsive Image Gallery CSS styling images explained CSS Image Modal Responsive modal image gallery CSS image modal explained CSS Image Centering Center image horizontally with margin: auto Center image horizontally with display: flex Center image both vertically and horizonatlly with display: flex Center image both vertically and horizonatlly with display: grid CSS image centering explained CSS Image Filters Filter blur() Filter brightness() Filter contrast() Filter drop-shadow() Filter grayscale() Filter hue-rotate() Filter invert() Filter opacity() Filter saturate() Filter sepia() CSS image filters explained CSS Image Shapes Clip an image to a circle Clip an image to a circle and position the center of circle to the right Circle() and shape-outside Clip an image to an ellipse Clip an image to an ellipse and position the center of ellipse to the right Ellipse() and shape-outside Clip an image to a polygon CSS image shapes explained CSS Object-fit Use object-fit: cover Use object-fit: contain Use object-fit: fill Use object-fit: none Use object-fit: scale-down CSS object-fit explained CSS Object-position Position the image so that the great old building is in center Position the image so that the famous Eiffel Tower is in center CSS object-position explained CSS Masking Using the mask-image property Omit the mask-repeat property Position the mask image A linear gradient mask layer A linear-gradient along with text masking A radial gradient mask layer (circle) A radial gradient mask layer (ellipse) A conic gradient mask layer An SVG mask layer (circle) An SVG mask layer (ellipse) An SVG mask layer (triangle) An SVG mask layer (star) An SVG mask layer (multiple circles) CSS masking explained CSS Buttons Basic CSS buttons Button colors Button sizes Rounded buttons Colored button borders Hoverable buttons Shadow buttons Disabled buttons Button width Button groups Bordered button group Animated Button (Hover Effect) Animated Button (Ripple Effect) Animated Button (Pressed Effect) CSS buttons explained CSS Pagination A Simple pagination Pagination with an active class Pagination with a disabled class Pagination with hover effect Pagination with transition effect on hover Breadcrumb Pagination CSS pagination explained CSS Multiple Columns Create multiple columns Specify the gap between columns Specify the style of the rule between columns Specify the width of the rule between columns Specify the color of the rule between columns Specify the width, style and color of the rule between columns Specify how many columns an element should span across Specify a suggested, optimal width for the columns CSS multiple columns explained CSS User Interface Let a user resize the width of an element Let a user resize the height of an element Let a user resize both the width and height of an element Add space between an outline and the border of an element CSS user interface explained CSS Variables Using the var() function Override global variable with local variable Add new local variable Get and change variable with JavaScript Change variables in media queries CSS variables explained CSS @property Rule Simple use of @property Override the custom property Type checking and fallback value of @property Inherit value (fale) of @property Inherit value (true) of @property Use @property to animate a gradient CSS @property explained CSS Box Sizing Width of elements without box-sizing Width of elements with box-sizing Form elements + box-sizing CSS box sizing explained CSS Media Queries Change the background-color to lightgreen if the viewport is 480px wide or wider Show a menu that will float to the left of the page if the viewport is 480px wide or wider CSS media queries explained CSS Media Queries - More Examples Set different background colors depending on screen width Responsive columns using flexbox Responsive navigation menu Hide elements with media queries Responsive font size Change background-color if screen orientation is landscape Respect user preferences with media query Responsive image gallery Responsive website CSS media queries examples explained CSS Flexbox Flexbox with three flex items flex-direction - row flex-direction - column flex-direction - row-reverse flex-direction - column-reverse flex-wrap - nowrap flex-wrap - wrap flex-wrap - wrap-reverse flex-flow justify-content - center justify-content - flex-start justify-content - flex-end justify-content - space-around justify-content - space-between justify-content - space-evenly align-items - center align-items - flex-start align-items - flex-end align-items - stretch align-items - baseline align-content - center align-content - flex-start align-content - flex-end align-content - space-between align-content - space-around align-content - space-evenly Perfect centering CSS flexbox explained CSS Flex Items Order the flex items flex-grow property flex-shrink property flex-basis property flex property flex-basis property align-self - center align-self - flex-start and flex-end CSS flex items explained CSS Flexbox Responsive Responsive flexbox Responsive flexbox 2 Responsive image gallery with flexbox Create a responsive website with flexbox CSS flexbox responsive explained CSS Grid Intro Grid layout Grid container and grid items CSS grid intro explained CSS Grid Container Grid container display: grid display: inline-grid CSS grid container explained CSS Grid Tracks grid-template-columns: auto grid-template-columns mixed grid-template-columns: fr unit grid-template-columns fr unit 2 grid-template-columns: repeat() grid-template-columns: minmax() The grid-template-rows property CSS grid tracks explained CSS Grid Gaps column-gap property row-gap property gap property - One value gap property - Two values CSS grid gaps explained CSS Grid Align justify-content: space-evenly justify-content: space-around justify-content: space-between justify-content: center justify-content: start justify-content: end align-content: center align-content: space-evenly align-content: space-around align-content: space-between align-content: start align-content: end place-content: center place-content: end space-between CSS grid align explained CSS Grid Spanning Items A five items grid layout The grid-column-start and grid-column-end properties The grid-column property The grid-row-start and grid-row-end properties The grid-row property CSS grid item explained CSS Grid Naming Items Using grid-area to name grid items 1 Using grid-area to name grid items 2 Using grid-area to name grid items 3 Using grid-area to name grid items 4 CSS grid naming items explained CSS Grid Aligning Items The justify-self property The align-self property CSS grid align items explained CSS Grid Order Items Set the visual order of the grid items CSS grid order items explained CSS 12-column Grid Layout A responsive 12-column Grid layout CSS 12-column grid layout explained CSS @supports Rule @supports - fallback styling for flex @supports - fallback styling for grid CSS @supports rule explained CSS Responsive Webdesign Responsive grid view Responsive grid view with breakpoints Typical breakpoints Media query orientation: portrait / landscape Hide elements on different screen sizes Change font size on different screen sizes Respect user preferences Responsive image: width property Responsive image: max-width property Responsive image on responsive webpage Background image and background-size: contain Background image and background-size: 100% 100% Background image and background-size: cover Change background image depending on browser width Change background image with HTML picture element Responsive video: width property Responsive video: max-width property Responsive video on responsive webpage Responsive framework: W3.CSS Responsive framework: Bootstrap CSS responsive webdesign explained ★ +1 Sign in to track progress

CSS Templates CSS Layout Templates We have created some responsive starter templates with CSS. You are free to modify, save, share, and use them in all your projects. Header, equal columns and footer: Try it (using float) » Try it (using flexbox) » Try it (using grid) » Header, unequal columns and footer: Try it (using float) » Try it (using flexbox) » Try it (using grid) » Topnav, content and footer: Try it Yourself » Sidenav and content: Try it Yourself » Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required ★ +1 Sign in to track progress

Sass Tutorial Learn Sass Sass is a CSS pre-processor. Sass reduces repetition of CSS and therefore saves time. Start learning Sass now » 🏁 Tip: Sign in to track your progress. Examples in Each Chapter Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result. Sass Example /* Define standard variables and values for website */ $bgcolor: lightblue; $textcolor: darkblue; $fontsize: 18px; /* Use the variables */ body { background-color: $bgcolor; color: $textcolor; font-size: $fontsize; } Run Example » Sass Function References At W3Schools you will find complete references of all Sass functions with syntax and examples. Sass String Functions Sass Numeric Functions Sass List Functions Sass Map Functions Sass Selector Functions Sass Introspection Functions Sass Color Functions ★ +1 Sign in to track progress

Responsive Web Design - Templates W3.CSS Web Site Templates We have created some responsive templates with the W3.CSS framework. You are free to modify, save, share, and use them in all your projects. Tip: All templates below can be hosted with W3Schools Spaces. Band Template Demo Try it Yourself Art Template Demo Try it Yourself Architect Template Demo Try it Yourself Coming Soon Template Demo Try it Yourself Blog Template Demo Try it Yourself Food Blog Template Demo Try it Yourself Fashion Blog Template Demo Try it Yourself Gourmet Catering Template Demo Try it Yourself CV Template Demo Try it Yourself Wedding Invitation Template Demo Try it Yourself Photo Template Demo Try it Yourself Black & White Photo Template Demo Try it Yourself Photo III Template Demo Try it Yourself Nature Portfolio Template Demo Try it Yourself People Portfolio Template Demo Try it Yourself People Portfolio II Template Demo Try it Yourself Dark Portfolio Template Demo Try it Yourself Black & White Portfolio Template Demo Try it Yourself Parallax Template Demo Try it Yourself Clothing Store Template Demo Try it Yourself Interior Design Template Demo Try it Yourself Cafe Template Demo Try it Yourself Pizza Restaurant Template Demo Try it Yourself Modal Restaurant Template Demo Try it Yourself Start Page Template Demo Try it Yourself Startup Template Demo Try it Yourself App Launch Template Demo Try it Yourself Marketing Template Demo Try it Yourself Marketing / Website Template Demo Try it Yourself Web Page Template Demo Try it Yourself Social Media Template Demo Try it Yourself Analytics Template Demo Try it Yourself Apartment Rental Template Demo Try it Yourself Hotel Template Demo Try it Yourself Travel Template Demo Try it Yourself Travel Agency Template Demo Try it Yourself House Design Template Demo Try it Yourself Screen 50/50 Template Demo Try it Yourself Mail Template Demo Try it Yourself Kitchen Sink/Demo Template Black Red Teal Try it Yourself ★ +1 Sign in to track progress

Responsive Web Design - Frameworks There are many free CSS Frameworks that offer Responsive Design. Using W3.CSS A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS W3.CSS makes it easy to develop sites that look nice at any size! W3.CSS Demo Resize the page to see the responsiveness! London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Paris Paris is the capital of France. The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants. Tokyo Tokyo is the capital of Japan. It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. Example <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container w3-blue"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="w3-third"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div class="w3-third"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </body> </html> Try it Yourself » To learn more about W3.CSS, read our W3.CSS Tutorial. Bootstrap Another popular framework is Bootstrap. It uses HTML and CSS to make responsive web pages: Example <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html> Try it Yourself » To learn more about Bootstrap, go to our Bootstrap Tutorial. Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required ★ +1 Sign in to track progress

Responsive Web Design - Videos Using The width Property If the width property is set to 100%, the video player will be responsive and scale up and down: Example video { width: 100%; height: auto; } Try it Yourself » Notice that in the example above, the video player can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. Using The max-width Property If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size: Example video { max-width: 100%; height: auto; } Try it Yourself » Add a Video to the Example Web Page We want to add a video in our example web page. The video will be resized to always take up all the available space: Example video { width: 100%; height: auto; } Try it Yourself » ★ +1 Sign in to track progress

Responsive Web Design - Images Resize the browser window to see how the image scales to fit the page. Using The width Property If the width property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down: Example img { width: 100%; height: auto; } Try it Yourself » Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. Using The max-width Property If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size: Example img { max-width: 100%; height: auto; } Try it Yourself » Add an Image to The Example Web Page Example img { width: 100%; height: auto; } Try it Yourself » Background Images Background images can also respond to resizing and scaling. Here we will show three different methods: 1. Using background-size: contain;: The background image will scale up and down, and tries to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height): Example Using background-size: contain;: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid black; } Try it Yourself » 2. Using background-size: 100% 100%;: The background image will stretch to cover the entire content area: Example Using background-size: 100% 100%;: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid black; } Try it Yourself » 3. Using background-size: cover;: The background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped: Example Using background-size: cover;: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid black; } Try it Yourself » Different Images for Different Devices A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices. Example /* For width smaller than 400px: */ body { background-image: url('img_smallflower.jpg'); } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); } } Try it Yourself » The HTML <picture> Element The HTML <picture> element gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for images used in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport. The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used: Example <picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture> Try it Yourself » The srcset attribute is required, and defines the source of the image. The media attribute is optional, and accepts the media queries you find in CSS @media rule. You should also define an <img> element for browsers that do not support the <picture> element. Responsive Image Gallery Here, we use media queries together with flexbox to create a responsive image gallery: Example Try it Yourself » ★ +1 Sign in to track progress

Responsive Web Design - Media Queries CSS Media Queries CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating responsive web pages. The CSS @media rule is used to add media queries to your style sheet. Use Mediaqueries to Add a Breakpoint On the previous page we made a grid layout web page. Now we want to add a breakpoint with mediaqueries to rearrange the grid items on bigger screens. Mobile phone Desktop Example Here we use a media query to add a breakpoint at 600px: @media (min-width: 600px) { .header {grid-area: 1 / span 6;} .menu {grid-area: 2 / span 1;} .content {grid-area: 2 / span 4;} .facts {grid-area: 2 / span 1;} .footer {grid-area: 3 / span 6;} } Try it Yourself » Another Breakpoint You can add as many breakpoints as you like. Desktop Tablet Phone Example Here we use media queries to add breakpoints when screen is min 600px, and when screen is min 768px : @media (min-width: 600px) { .header {grid-area: 1 / span 6;} .menu {grid-area: 2 / span 1;} .content {grid-area: 2 / span 4;} .facts {grid-area: 3 / span 6;} .footer {grid-area: 4 / span 6;} } @media (min-width: 768px) { .header {grid-area: 1 / span 6;} .menu {grid-area: 2 / span 1;} .content {grid-area: 2 / span 4;} .facts {grid-area: 2 / span 1;} .footer {grid-area: 3 / span 6;} } Try it Yourself » Typical Device Breakpoints There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups: Example /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...} Try it Yourself » Media Queries for Screen Orientation Media queries can also be used to change the layout of a page depending on the orientation of the screen. Here, we change the background-color of the body, if the screen orientation is in landscape mode: Example @media only screen and (orientation: landscape) { body { background-color: lightblue; } } Try it Yourself » Hide Elements With Media Queries Here, we use media queries to hide an element on small screens: I will be hidden on small screens. Example /* Hide element if the viewport width is 600px or less */ @media screen and (max-width: 600px) { #div1 { display: none; } } Try it Yourself » Change Font Size With Media Queries Here, we use media queries to change the font size of an element on different viewport widths: Example /* If viewport width is 600px or more, set font-size to 80px */ @media screen and (min-width: 600px) { #div1 { font-size: 80px; } } Try it Yourself » Media Queries for User Preferences Some users have motion sensitivity and prefer websites with less animation. The prefers-reduced-motion media feature lets you check if a user has asked to reduce motion, such as animations or transitions. Use this feature to turn off animations and transitions for the users who has activated this setting on their computer: Example @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } Try it Yourself » CSS @media Reference For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference. ★ +1 Sign in to track progress

Responsive Web Design - Building a Grid View What is a Grid-View? Many web pages are based on a grid-view, which means that the page is divided into rows and columns. A responsive grid-view often has 6 or 12 columns, and will shrink and expand as you resize the browser window. Building a Grid View Lets start building a grid-view. First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements. Add the following at the top of your CSS: * { box-sizing: border-box; } Read more about the box-sizing property in our CSS Box Sizing chapter. The HTML We create a grid container with five grid items (header, menu, content, facts, footer): HTML Here is the complete HTML: <div class="grid-container"> <div class="header"><h1>Chania</h1></div> <div class="menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete.</p> <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p> <p>Chania lies along the north west coast of the island Crete.</p> </div> <div class="facts"> <h2>Facts:</h2> <ul> <li>Chania is a city on the island of Crete</li> <li>Crete is a Greek island in the Mediterranean Sea</li> </ul> </div> <div class="footer"><p>A footer.</p></div> </div> The CSS Add some styles and colors to make it look better: Note: Look at the next chapter to add mediaqueries and breakpoints for different screen sizes! Example Here is the complete CSS: * { box-sizing: border-box; } body { font-family: "Lucida Sans", sans-serif; font-size: 17px; } .grid-container { display: grid; grid-template-areas: 'header' 'menu' 'main' 'facts' 'footer'; background-color: white; gap: 10px; } .header { grid-area: header; background-color: purple; text-align: center; color: #ffffff; } .header > h1 { font-size: 40px; } .menu { grid-area: menu; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } .content { grid-area: main; } .content > h1 { font-size: 30px; margin-bottom: 7px; } .content > p { margin-bottom: 7px; } .facts { grid-area: facts; border: 1px solid #0099cc; background-color: beige; padding: 10px; } .facts > h2 { font-size: 20px; } .facts li { margin-bottom: 5px; } .footer { grid-area: footer; background-color: #0099cc; color: #ffffff; text-align: center; } Try it Yourself » ★ +1 Sign in to track progress

Responsive Web Design - The Viewport Setting The Viewport The viewport is the user's visible area of a web page. The viewport varies with the device (will be a lot smaller on a mobile phone than on a computer screen). You should include the following <meta> element in the <head> section of all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Without the viewport meta tag With the viewport meta tag Tip: If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference. Size Content to The Viewport Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience. Some additional rules to follow: 1. Do NOT use large fixed-width elements - For example, if an image has a width wider than the viewport, it causes the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport. 2. Do NOT let the content rely on a particular width to render well - Since screen dimensions vary widely between devices, content should not rely on a particular viewport width to render well. 3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements will cause the elements to be too wide for smaller devices. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices. ★ +1 Sign in to track progress

Responsive Web Design Introduction to Responsive Web Design Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports. Best Experience For All Users Web pages can be viewed with many different devices: desktops, tablets, and mobile phones. Your web page should look good, and be easy to use, regardless of the device. Responsive web design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices. Key components in responsive web design are: Viewport <meta> tag Flexible layout (grid and flex) Mediaqueries Desktop Tablet Phone Try it Yourself » ★ +1 Sign in to track progress

CSS @supports Rule The CSS @supports Rule The @supports rule lets you check if the browser supports a specific CSS property or value, and to define fallback styles if the feature is not supported. This is useful for applying styles only when the browser can handle them. Basic Syntax @supports (property: value) { /* CSS rules to apply if condition is true */ } Example: Using @supports with grid and flex You can combine @supports with regular CSS to provide fallback styling. Here, if the browser supports display: flex, the CSS inside the @supports rule will be applied. If not, the .container class outside the @supports rule will be applied: Example /* use this CSS if the browser does not support display: flex */ .container { float: left; width: 100%; } /* use this CSS if the browser supports display: flex */ @supports (display: flex) { .container { display: flex; } } Try it Yourself » Here, if the browser supports display: grid, the CSS inside the @supports rule will be applied. If not, the .container class outside the @supports rule will be applied: Example /* use this CSS if the browser does not support display: grid */ .container { display: table; width: 90%; background-color: #2196F3; padding: 10px; } /* use this CSS if the browser supports display: grid */ @supports (display: grid) { .container { display: grid; grid: auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } } Try it Yourself » Negating with not You can use not to apply styles only when a feature is not supported: Example @supports not (display: grid) { .warning { background-color: pink; padding: 10px; border: 1px solid red; } } Combining Conditions You can use and, or, and not for multiple conditions: Example @supports (display: grid) and (gap: 10px) { .container { display: grid; gap: 10px; } } Note: Always provide fallback styles outside of @supports, for older browsers. CSS Reference At-rule Description @supports Used to test whether a browser supports a CSS feature ★ +1 Sign in to track progress

CSS 12-Column Grid Layout CSS 12-Column Grid Layout A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available horizontal space into 12 equal-width columns, allowing for precise placement and sizing of elements within the layout. Benefits of a 12-Column Grid Flexibility: The number 12 is highly divisible. Designers can easily create designs with halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3). Responsiveness: A 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with mediaqueries. This provides a consistent user experience across all platforms. Efficiency: Having a pre-defined structure speeds up the design process. Here is how to create a basic 12-column CSS Grid layout: Define the Grid Container Apply display: grid; to the grid container. Create the 12 Columns Use the grid-template-columns property to define the 12 columns. The code repeat(12, [col-start] 1fr); creates a 12-column grid with equal-width, and names the start line of each column track col-start. repeat(12,..): Tells the grid to repeat the following track definition 12 times, resulting in 12 columns. [col-start]: This creates a named grid line. Because it is repeated 12 times, you will have 12 lines named col-start. This is useful for placing grid items at specific start points within the grid. 1fr: A fractional unit that represents one fraction of the total available space in the grid container. By using 1fr, each of the 12 columns will be an equal, fluid width. Place the Grid Items Grid items can then be placed and sized across these 12 columns using grid-column. To make a grid item span a certain number of columns, use grid-column: span <number>; or grid-column: <start-line> / span <number>;. You can also define the start and end grid lines for an item using grid-column: <start-line> / <end-line>;. Use Mediaqueries to Add Breakpoints Always design for mobile first: Here we display the sections in the source order (from top to bottom) for screens less than 576 pixels wide. Then, we go to a two-column layout for screens between 576 and 767 pixels wide. Then, we go to a three-column layout for screens over 767 pixels wide. Example Complete example of a 12-column grid layout: * { box-sizing: border-box; } .container { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); gap: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } /* Mobile first */ .container > * { border: 1px solid green; background-color: beige; padding: 10px; grid-column: col-start / span 12; } @media (min-width: 576px) { .sidebar { grid-column: col-start / span 3; grid-row: 3; } .ads { grid-column: col-start / span 3; } .content, .footer { grid-column: col-start 4 / span 9; } nav ul { display: flex; justify-content: space-between; } } @media (min-width: 768px) { .nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .sidebar { grid-column: col-start 11 / span 2; } .ads { grid-column: col-start 11 / span 2; } .footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } Try it Yourself » ★ +1 Sign in to track progress

CSS Grid Layout CSS Grid Layout Module The Grid Layout Module offers a grid-based layout system, with rows and columns. The Grid Layout Module allows developers to easily create complex web layouts. The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning. My Header Link 1 Link 2 Link 3 Lorem IpsumLorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut. Footer Try it Yourself » Grid vs. Flexbox CSS Grid is used for two-dimensional layout, with rows AND columns. CSS Flexbox is used for one-dimensional layout, with rows OR columns. CSS Grid Components A grid always consists of: A Grid Container - The parent (container) element, where the display property is set to grid or inline-grid One or more Grid Items - The direct children of the grid container automatically becomes grid items A Grid Container with Five Grid Items The element below represents a grid container (the blue area) with five grid items. 1 2 3 4 5 Example A grid container with five grid items: <html> <head> <style> .container { display: grid; grid-template-columns: auto auto auto; background-color: dodgerblue; padding: 10px; } .container div { background-color: #f1f1f1; border: 1px solid black; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html> Try it Yourself » Note: You will learn more about grid containers and grid items in the next chapters. All CSS Grid Properties Property Description align-content Vertically aligns the whole grid inside the container (when total grid size is smaller than container) align-items Specifies the default alignment for items inside a flexbox or grid container align-self Aligns the content for a specific grid item along the column axis display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the whole grid inside the container (when total grid size is smaller than container) justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress

CSS Responsive Flexbox Responsive Flexbox You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices. For example, if you want to create a three-column layout for large screen sizes, and a one-column layout for small screen sizes (such as phones), you can change the flex-direction from row to column at a specific breakpoint (600px in the example below): 1 2 3 Resize the browser window to see the effect. Example .flex-container { display: flex; flex-direction: row; } .flex-item { background-color: #f1f1f1; padding: 10px; font-size: 30px; text-align: center; width: 100%; } /* Make a one column-layout instead of three-column layout */ @media (max-width: 600px) { .flex-container { flex-direction: column; } } Try it Yourself » Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work: Example .flex-container { display: flex; flex-wrap: wrap; } .flex-item { background-color: #f1f1f1; padding: 10px; text-align: center; font-size: 30px; flex: 33.3%; } /* Make a one column-layout instead of a three-column layout */ @media (max-width: 600px) { .flex-item { flex: 100%; } } Try it Yourself » Responsive Image Gallery using Flexbox Here, we use media queries together with flexbox to create a responsive image gallery: Try it Yourself » Responsive Website using Flexbox Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content: Try it Yourself » ★ +1 Sign in to track progress

CSS Flex Items CSS Flex Items The direct child elements of a flex container automatically becomes flex items. Flex items can have the following properties: order - Specifies the display order of the flex items inside the flex container flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items flex-basis - Specifies the initial length of a flex item flex - Shorthand property for flex-grow, flex-shrink, and flex-basis align-self - Specifies the alignment for the flex item inside the flex container CSS order Property The order property specifies the display order of the flex items inside the flex container. The first flex item in the source code does not have to appear as the first item in the layout. The order value must be a number, and the default value is 0. Example The order value specifies the display order of the flex items: <div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div> Result: 1 2 3 4 Try it Yourself » CSS flex-grow Property The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The value must be a number, and the default value is 0. Example Make the third flex item grow four times faster than the other flex items: <div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 4">3</div> </div> Result: 1 2 3 Try it Yourself » CSS flex-shrink Property The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, and the default value is 1. Example Let the third flex item shrink twice as much as the other flex items: <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 2">3</div> <div>4</div> <div>5</div> <div>6</div> </div> Result: 1 2 3 4 5 6 Try it Yourself » CSS flex-basis Property The flex-basis property specifies the initial length of a flex item. Example Set the initial length of the third flex item to 250 pixels: <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 250px">3</div> <div>4</div> </div> Result: 1 2 3 4 Try it Yourself » CSS flex Property The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. Example Make the third flex item growable (1), not shrinkable (0), and with an initial length of 150 pixels: <div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 1 0 150px">3</div> <div>4</div> </div> Try it Yourself » CSS align-self Property The align-self property specifies the alignment for the selected item inside the flexible container. This property overrides the default alignment set by the container's align-items property. In these examples we use a 200 pixels high container, to better demonstrate the align-self property: Example Align the third flex item in the middle of the container: <div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> Result: 1 2 3 4 Try it Yourself » Example Align the second flex item at the top of the container, and the third flex item at the bottom of the container: <div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div> Result: 1 2 3 4 Try it Yourself » The CSS Flex Items Properties The following table lists all the CSS Flex Items properties: Property Description align-self Specifies the alignment for a flex item (overrides the flex container's align-items property) flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties flex-basis Specifies the initial length of a flex item flex-grow Specifies how much a flex item will grow relative to the rest of the flex items inside the container flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items inside the container order Specifies the order of the flex items inside the container ★ +1 Sign in to track progress

CSS Flex Container CSS Flex Container Properties The flex container element can have the following properties: display - Must be set to flex or inline-flex flex-direction - Sets the display-direction of flex items flex-wrap - Specifies whether the flex items should wrap or not flex-flow - Shorthand property for flex-direction and flex-wrap justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally) align-items - Aligns the flex items when they do not use all available space on the cross-axis (vertically) align-content - Aligns the flex lines when there is extra space in the cross axis and flex items wrap CSS flex-direction Property The flex-direction property specifies the display-direction of flex items in the flex container. This property can have one of the following values: row (default) column row-reverse column-reverse Example The row value is the default value, and it displays the flex items horizontally (from left to right): .flex-container { display: flex; flex-direction: row; } Result: 1 2 3 Try it Yourself » Example The column value displays the flex items vertically (from top to bottom): .flex-container { display: flex; flex-direction: column; } Result: 1 2 3 Try it Yourself » Example The row-reverse value displays the flex items horizontally (but from right to left): .flex-container { display: flex; flex-direction: row-reverse; } Result: 1 2 3 Try it Yourself » Example The column-reverse value displays the flex items vertically (but from bottom to top): .flex-container { display: flex; flex-direction: column-reverse; } Result: 1 2 3 Try it Yourself » CSS flex-wrap Property The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. This property can have one of the following values: nowrap (default) wrap wrap-reverse Example The nowrap value specifies that the flex items will not wrap (this is default): .flex-container { display: flex; flex-wrap: nowrap; } Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » Example The wrap value specifies that the flex items will wrap if necessary: .flex-container { display: flex; flex-wrap: wrap; } Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » Example The wrap-reverse value specifies that the flex items will wrap if necessary, in reverse order: .flex-container { display: flex; flex-wrap: wrap-reverse; } Result: 1 2 3 4 5 6 7 8 9 Try it Yourself » CSS flex-flow Property The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. Example .flex-container { display: flex; flex-flow: row wrap; } Try it Yourself » Flex Container Subpages Continue learning about flex container properties: justify-content - horizontal alignment of flex items align-items & align-content - vertical alignment and true centering ★ +1 Sign in to track progress