所有动态
- 一小时前
-
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
-
CSS Flexbox CSS Flexbox (Flexible Box Layout) CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning. Item 1 Item 2 Item 3 Item 4 Item 5 Try it Yourself » Flexbox vs. Grid CSS Flexbox is used for a one-dimensional layout, with rows OR columns. CSS Grid is used for a two-dimensional layout, with rows AND columns. CSS Flexbox Components A flexbox always consists of: A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex One or more Flex Items - The direct children of the flex container automatically becomes flex items A Flex Container with Three Flex Items The element below represents a flex container (the blue area) with three flex items. Item 1 Item 2 Item 3 Example A flex container with three flex items: <html> <head> <style> .container { display: flex; background-color: DodgerBlue; } .container div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style> </head> <body> <div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> </body> </html> Try it Yourself » You will learn more about flex containers and flex items in the next chapters. ★ +1 Sign in to track progress
-
CSS 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. Media Query Syntax A media query consists of an optional media-type and one or more media-features, which resolve to either true or false. @media [not] media-type and (media-feature: value) and (media-feature: value) { /* CSS rules to apply */ } The media-type is optional. However, if you use not, you must also specify a media-type. The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules. Meaning of the not and and keywords: not: This optional keyword inverts the meaning of the entire media query. and: This keyword combines a media-type and one or more media-features. CSS Media Types The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all". Value Description all Used for all media type devices print Used for print preview mode screen Used for computer screens, tablets, and smart-phones CSS Media Features The media feature specifies a specific characteristic of the device. Here are some commonly used media features: Value Description max-height Maximum height of the viewport min-height Minimum height of the viewport height Height of the viewport (including scrollbar) max-width Maximum width of the viewport min-width Minimum width of the viewport width Width of the viewport (including scrollbar) orientation Orientation of the viewport (landscape or portrait) resolution Screen resolution prefers-color-scheme User's preferred color scheme (light or dark) Media Queries Examples Here, we use a media query to change the background-color of the body to lightgreen, if the width of the viewport is 480px, or wider: Example @media screen and (min-width: 480px) { body { background-color: lightgreen; } } Try it Yourself » Here, we use a media query to change the background-color of the body to lightgreen, if the width of the viewport is between 480px and 768px: Example @media screen and (min-width: 480px) and (max-width: 768px) { body { background-color: lightgreen; } } Try it Yourself » More Media Query Examples For more examples on media queries, go to the next page: CSS MQ Examples. ★ +1 Sign in to track progress
-
CSS Box Sizing CSS Box Sizing The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not. By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height). The following illustrates two <div> elements with the same specified width and height. The two <div> elements end up with different sizes (because div2 has a large padding specified): This div is has width: 300px and height: 100px. This div also has width: 300px and height: 100px. Example .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } Try it Yourself » The box-sizing property solves this problem. The CSS box-sizing Solution The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, the padding and border are included in the calculation of the width and height: Both divs are the same size now! Hooray! Here is the same example as above, with box-sizing: border-box; added to both <div> elements: Example .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } Try it Yourself » Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way. The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;). Applying this to all elements is safe and wise: Example * { box-sizing: border-box; } Try it Yourself » CSS Box Sizing Property Property Description box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not ★ +1 Sign in to track progress
-
CSS @property Rule The CSS @property Rule The @property rule is used to define custom CSS properties (CSS variables) directly in the stylesheet without having to run any JavaScript. The @property rule has data type checking and constraining, sets a default value, and specifies the inherit behaviour. The definition below creates a custom property named --myColor, defines it as a color property, specifies that it will inherit values from its parent elements, and its default value is lightgray. Syntax of @property @property --myColor { syntax: "<color>"; inherits: true; initial-value: lightgray; } Using the Custom Property The CSS var() function is used to insert the custom property in CSS: body { background-color: var(--myColor); } Benefits of Using @property The benefits of using @property is: Data type checking: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly Set default value: You must set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the default value as a fallback Set inheritance behavior: You must specify whether the custom property will inherit values from its parent elements or not. This ensures that you will have full control over inheritance CSS @property Example The following example defines two custom properties: my-bg-color and my-txt-color. The div, then uses the custom properties in the background-color and color properties: Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } @property --my-txt-color { syntax: "<color>"; inherits: true; initial-value: darkblue; } div { width: 300px; height: 150px; padding: 15px; background-color: var(--my-bg-color); color: var(--my-txt-color); } Try it Yourself » Another @property Example In the following example we use the default custom property on the <div> element. Then we override the custom property in class .fresh and class .nature (by setting some other colors), and it works perfectly fine: Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } div { width: 300px; height: 150px; padding: 15px; background-color: var(--my-bg-color); } .fresh { --my-bg-color: #ff6347; } .nature { --my-bg-color: rgb(120, 180, 30); } Try it Yourself » Avoid Error with Type Checking and Fallback Value In the following example we set the custom property in class .nature to an integer. This is not valid, and the browser will use the fallback color, which is defined in the initial-value property (lightgray): Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } div { width: 300px; height: 150px; padding: 15px; background-color: var(--my-bg-color); } .fresh { --my-bg-color: #ff6347; } .nature { --my-bg-color: 2; } Try it Yourself » Use of the inherits Value In the following example we will set the inherits value to false. This means that the custom property WILL NOT inherit values from its parent elements. Look at the result: Example @property --my-bg-color { syntax: "<color>"; inherits: false; initial-value: lightgray; } Try it Yourself » The next example sets the inherits value to true. This means that the custom property WILL inherit values from its parent elements. Look at the result: Example @property --my-bg-color { syntax: "<color>"; inherits: true; initial-value: lightgray; } Try it Yourself » Create Smooth Animation with @property A complete new opportunity you can achieve with the @property rule, is to animate something that could not be animated before: Gradients. Look at the following example: Example Specify two custom properties for a gradient: @property --startColor { syntax: "<color>"; initial-value: #EADEDB; inherits: false; } @property --endColor { syntax: "<color>"; initial-value: #BC70A4; inherits: false; } Try it Yourself » CSS @property Rule Property Description @property Define custom CSS properties directly in the stylesheet without having to run any JavaScript ★ +1 Sign in to track progress
-
CSS Variables - var() Function CSS Variables The var() function is used to insert the value of a CSS variable. CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables. CSS Declare a Variable CSS variables can have a global or local scope. Global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared. To create a global variable, declare it inside the :root selector. The :root selector matches the document's root element. To create a local variable, declare it inside the selector that is going to use it. A CSS variable name must begin with two dashes (--) and is case sensitive! Syntax :root { --primary-bg-color: green; /* global scope */ } .note { --note-bg: yellow; /* local scope */ } The CSS var() Function The var() function is used to insert the value of a declared CSS variable. Syntax var(--name, value) Value Description name Required. The variable name (must start with two dashes) value Optional. The fallback value (used if the variable is not found) Advantages of using var() are: Makes the code easier to maintain (simplifies updates) Makes the code easier to read (more understandable) Makes it easier to change the color values for the entire page CSS Variables Example Here, we declare two global variables (--primary-bg-color and --primary-color). Then, we use the var() function to insert the value of the variables later in the style sheet: Example :root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } .container .note { border: 1px solid var(--primary-bg-color); padding: 10px; } Try it Yourself » To change the look of the page, you just need to change the two variable values: Example :root { --primary-bg-color: #8FBC8F; --primary-color: #FFFAF0; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } .container .note { border: 1px solid var(--primary-bg-color); padding: 10px; } Try it Yourself » CSS var() Function Function Description var() Inserts the value of a CSS variable ★ +1 Sign in to track progress
-
CSS User Interface CSS User Interface In this chapter you will learn about the following CSS user interface properties: resize outline-offset CSS Resize The resize property specifies if (and how) an element can be resized by a user. This property can have one of the following values: horizontal - user can resize the element horizontally (the width) vertical - user can resize the element vertically (the height) both - user can resize the element both vertically and horizontally none - user cannot resize the element You can resize this div element in a vertical way! To resize: Click and drag at the bottom-right corner! CSS Resize - Only Width The following example lets the user resize only the width of a <div> element: Example div { resize: horizontal; overflow: auto; } Try it Yourself » CSS Resize - Only Height The following example lets the user resize only the height of a <div> element: Example div { resize: vertical; overflow: auto; } Try it Yourself » CSS Resize - Both Width and Height The following example lets the user resize both the width and height of a <div> element: Example div { resize: both; overflow: auto; } Try it Yourself » CSS Disable Resize in Textarea A <textarea> is often resizable by default. Here, we have used the resize property to disable the resizability in <textarea>: Example textarea { resize: none; } Try it Yourself » CSS Outline Offset The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example specifies an outline 15px outside the border edge: This paragraph has a black border and a red outline 15px outside the border edge. Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. The following example uses the outline-offset property to add space between the border and the outline: Example div.ex1 { margin: 20px; border: 1px solid black; outline: 4px solid red; outline-offset: 15px; } div.ex2 { margin: 10px; border: 1px solid black; outline: 5px dashed blue; outline-offset: 5px; } Try it Yourself » CSS User Interface Properties The following table lists all the user interface properties: Property Description outline-offset Adds space between an outline and the edge or border of an element resize Specifies whether or not an element is resizable by the user ★ +1 Sign in to track progress
-
CSS Multiple Columns CSS Multi-column Layout The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers: Multi Column Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. CSS Multi-column Properties In this chapter you will learn about the following multi-column properties: column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width CSS Create Multiple Columns The CSS column-count property specifies the number of columns an element should be divided into. Example Divide the text in the <div> element into 3 columns: div { column-count: 3; } Try it Yourself » CSS Column Gap The CSS column-gap property specifies the space between the columns. Example Specify a 40 pixels gap between the columns: div { column-gap: 40px; } Try it Yourself » Column Subpages Continue learning about CSS multiple columns: Column Rules - column-rule, column-span, column-width CSS Multi-columns Properties The following table lists all the multi-columns properties: Property Description column-count Specifies the number of columns an element should be divided into column-fill Specifies how to fill columns column-gap Specifies the gap between the columns column-rule A shorthand property for setting all the column-rule-* properties column-rule-color Specifies the color of the rule between columns column-rule-style Specifies the style of the rule between columns column-rule-width Specifies the width of the rule between columns column-span Specifies how many columns an element should span across column-width Specifies a suggested, optimal width for the columns columns A shorthand property for setting column-width and column-count ★ +1 Sign in to track progress
-
CSS Pagination Examples CSS Pagination Learn how to create a responsive pagination using CSS. If you have a website with lots of pages, you may want to add some sort of pagination on each page. Pagination is typically a series of links, wrapped in an unordered list (<ul>). Each link represents an individual page number. In addition there are "previous" and "next" controls: « 1 2 3 4 5 » Example A simple pagination: .pagination { display: flex; justify-content: center; list-style: none; /* remove list bullets */ padding: 0px; } .pagination li a { display: block; /* let links fill the list item */ padding: 8px 12px; text-decoration: none; border: 1px solid gray; color: black; margin: 0 4px; border-radius: 5px; /* add rounded borders */ } Try it Yourself » Example Explained Style the pagination container with: display: flex; to arrange the page numbers horizontally justify-content: center; to center align them list-style: none; to remove the list bullets The style the <a> elements within the <li> elements for the look of the page numbers, with properties like display, padding, text-decoration, border, background-color, color, font-size, and border-radius. Pagination With an Active Class Highlight the currently active page with an .active class, to indicate which page the user is on: « 1 2 3 4 5 » Example Pagination with an .active class: .pagination li a.active { background-color: #4CAF50; color: white; } Try it Yourself » Pagination With a Disabled Class If the user are currently on the last page, the "Next" button should be disabled. Here, we add a .disabled class, and sets the color , cursor and pointer-events properties, to make the "Next" button disabled: « 1 2 3 4 5 » Example Pagination with a .disabled class: .pagination li a.disabled { color: #dddddd; cursor: not-allowed; pointer-events: none; } Try it Yourself » Pagination Subpages Continue learning about CSS pagination: Pagination Styles - hover effects, transitions, breadcrumbs ★ +1 Sign in to track progress
-
CSS Styling Buttons CSS Styling Buttons With CSS, different HTML buttons can be styled in many ways. The most common CSS properties for styling buttons are: background-color - defines the background color of a button color - defines the text color of a button border - defines the border of a button padding - defines the space between the text and the border of a button border-radius - adds rounded corners to a button box-shadow - adds shadows to a button text-align - centers the text of a button font-size - defines the font size of the text on a button text-decoration - removes the underline for <a> elements used as buttons cursor - changes the mouse cursor when hovering over the button Buttons are typically created with the HTML <button> element, the <input type="button"> element, or an <a> element styled as a button. CSS Basic Button Styling Default Button CSS Button Example A basic button styling for different HTML elements: .button { background-color: red; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } Try it Yourself » CSS Button Colors The CSS background-color property is used to define the background color of a button. The CSS color property is used to define the text color of a button. Green Blue Red Gray Black Example Buttons with different colors: .button1 {background-color: #04AA6D;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ Try it Yourself » CSS Button Sizes The CSS font-size property is used to define the font size for the text on a button: 10px 12px 16px 20px 24px Example Buttons with different font size: .button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;} Try it Yourself » The CSS padding property is used to define the space between the text and the border of a button: 10px 24px 12px 28px 14px 40px 32px 16px 16px Example Buttons with different padding: .button1 {padding: 10px 24px;} .button2 {padding: 12px 28px;} .button3 {padding: 14px 40px;} .button4 {padding: 32px 16px;} .button5 {padding: 16px;} Try it Yourself » CSS Rounded Buttons The CSS border-radius property is used to add rounded corners to a button: 2px 4px 8px 12px 50% Example Buttons with different rounded corners: .button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;} Try it Yourself » CSS Button Borders The CSS border property is used to define the border of a button: Green Blue Red Gray Black Example Buttons with different borders: .button1 {border: 2px solid #04AA6D;} .button2 {border: 2px dotted #008CBA;} .button3 {border: 2px dashed #f44336;} .button4 {border: 1px solid #e7e7e7;} .button5 {border: 1px solid #555555;} Try it Yourself » Button Subpages Continue learning about CSS buttons: Button Hover Effects - hover, shadow, disabled, width Button Groups - horizontal/vertical groups, animated buttons ★ +1 Sign in to track progress
-
CSS Masking The CSS mask-image Property CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element. The CSS mask-image property specifies a mask layer image. The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element. Use a PNG Image as the Mask Layer To use a PNG image as the mask layer, use a url() value to pass in the mask layer image. The mask image needs to have a transparent or semi-transparent area. Black indicates fully transparent. Here is the mask image ("w3logo.png") we will use: Here is an image from Cinque Terre, in Italy: Now, we apply the mask image as the mask layer for the image from Cinque Terre, Italy: Example Here is the source code: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; } Try it Yourself » The mask-image property specifies the image to be used as a mask layer for an element. The mask-repeat property specifies if or how a mask image will be repeated. The no-repeat value indicates that the mask image will not be repeated (the mask image will only be shown once). Repeat the Mask Layer Image If we omit the mask-repeat property, the mask image will be repeated all over the image from Cinque Terre, Italy: Example Omit the mask-repeat property: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); } Try it Yourself » Position the Mask Layer Image The mask-position property sets the starting position of a mask image (relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Here, we position the mask image in center: Example Position the mask layer image: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; mask-position: center; } Try it Yourself » CSS All Masking Properties The following table lists all the CSS masking properties: Property Description mask-clip Specifies which area is affected by a mask image mask-composite Specifies a compositing operation used on the current mask layer with the mask layers below it mask-image Specifies an image to be used as a mask layer for an element mask-mode Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask mask-origin Specifies the origin position (the mask position area) of a mask layer image mask-position Sets the starting position of a mask layer image (relative to the mask position area) mask-repeat Specifies how the mask layer image is repeated mask-size Specifies the size of a mask layer image mask-type Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask ★ +1 Sign in to track progress
