presentation element html

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

• Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

• Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

• Open index.html
• Change the CSS import to reflect the theme you want to use

The theme files are:

• solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

• Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
• Create a new  .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
• Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be  .css , not  .scss .
• Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

• Title Font: Viga
• Content Font: Open Sans
• Code Font: Courier New
• Cursive Font: Great Vibes
• Yellow Color: #F9DC24
• Add a  .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of  !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the  !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

• fade-in-then-out
• fade-in-then-semi-out
• highlight-current-blue
• highlight-red
• highlight-green
• highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

• Location Stockholm
• Education Siena College
• Work Software Engineer at Spotify
• Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

• Location Antibes, France
• Work Senior Software Engineer at Spotify
• Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

• Location Lake Villa, IL
• Education Bachelor in Electronics Engineering
• Work Computer & Technology Enthusiast
• Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

• Location Singapore
• Work Web Developer at FirstCom Solutions
• Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

• Email [email protected]
• Location Indianapolis, IN
• Education Purdue University
• Pronouns he/him
• Work Senior Frontend Engineer at Whatnot
• Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

• Location Saratoga Springs,NY
• Education BA, University of Michigan
• Work Documentarian
• Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

• Location Palm Bay, FL
• Education FullSail University
• Work Developer Relations Manager at MetaMask
• Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

• Email [email protected]
• Location Abuja Nigeria
• Work Project Manager Techibytes Media
• Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

• Email [email protected]
• Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

• Copy an existing presentation folder
• Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

• Location Los Angeles
• Education Engineering, Physics, and Math
• Joined Sep 6, 2018

Fantastic post. I just loved it.

• Location France
• Work Co-Founder of Depot
• Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Benefits Of Using An IDE For React Native Development

Saumya - May 7

Automation: Holidays

Zachnology - May 7

Streamlining React: Utilizing React Query for Scalability

Cristafovici Dan - May 6

New Component Variations 🚀

Wind UI - May 10

We're a place where coders share, stay up-to-date and grow their careers.

 Understanding the HTML Role ‘Presentation’ and Its Impact on Accessibility

• Post author: Geoff Graham
• Post category: HTML
• Post last modified: December 18, 2023
• Post comments: 0 Comments

In the HTML, the ‘role=”presentation” attribute conveys that it is for presentational purposes only and does not have a semantic meaning. Explore the intricacies of HTML role presentation and its associated elements in this article.

In HTML, the role=”presentation” characteristic explicitly implies that the element is purely presentational or decorative and does not bring any semantic meaning. This characteristic is, in particular, useful for elements that can be blanketed for styling or format purposes but no longer contribute to the shape or means of the file. 

When an element is assigned role=”presentation”, it informs assistive technology, which includes screen readers, that the content within that element ought to be dealt with as decorative and should not be presented to users in a manner that indicates it has a selected role or which means.

HTML Role Presentation: Importance of Accessibility in Web Development

Accessibility in web development is paramount because it ensures that digital content is usable and perceivable using people with diverse abilities.

The HTML role presentation contributes appreciably to accessibility by facilitating net pages that can be navigable and understandable for everyone, including those using display readers or different assistive devices.

Builders can carry semantics by assigning appropriate roles to factors, enhancing overall consumer enjoyment, and making the internet more inclusive. In precis, the role attribute in HTML is a powerful device that aids in creating handy and well-established internet content.

Understanding the Accessibility Tree

The Accessibility Tree (or “a11y tree”) is a critical idea in internet improvement, specifically within the context of making accessible websites. It is a hierarchical illustration of the shape and homes of a web page, specially designed to be interpreted through assistive technology.

The Accessibility Tree complements the DOM (Document Object Model) by supplying extra information about the semantics and accessibility roles of the report.

In the context of HTML, the Accessibility Tree reflects the relationships and roles of HTML elements, permitting assistive technology like display readers to bring significant statistics to users with disabilities.

For instance, a heading element (<h1> to <h6>) in HTML no longer simplest defines the document’s shape but conveys hierarchical information to the Accessibility Tree, assisting display readers in imparting content in a dependent and understandable way.

The role characteristic in HTML plays a huge role in shaping the Accessibility Tree.

Role of the role=”presentation” attribute within the accessibility tree​.

The role=”presentation” attribute is particularly beneficial, while developers must encompass non-semantic factors for styling or layout roles without affecting the file’s standard meaning.

Using role=” presentation,” developers sign to assistive technology that the element is not intended to convey extensive records and has to be handled as ornamental or presentational.

In conclusion, understanding the Accessibility Tree and utilizing the role attribute, specifically with the role=”presentation” price , empowers developers to create internet content that isn’t the best structurally sound but also on hand to customers with various wishes. 

Presentational Roles and Their Significance

HTML role presentation talks about using the role attribute to define elements that might be, in basic terms, presentational or ornamental.

The role=”presentation” attribute explicitly tells assistive technologies that the associated HTML element needs to be handled as having no semantic meaning, ensuring that it no longer contributes to the Accessibility Tree’s structural or informative components.

Presentational roles, mainly role=”presentation”, allow developers to encompass factors for styling or format roles without deceptive assistive technologies or affecting the record’s meaning. It affords a way to split the visual presentation of content from its underlying structure.

This is for helping developers create visually attractive designs without compromising accessibility.

Historical context and evolution of role=” presentation” usage.

The role=”presentation” attribute’s ancient context originates in the evolution of web development practices.

In the early days of the web, builders regularly used HTML factors in more presentational than semantic ways, leading to confusion for assistive technologies. For instance, builders may use a <div>; element for styling roles without conveying any semantic that means.

To deal with this issue, the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) specification introduced the role attribute, and the value “presentation” turned into, in particular, added to indicate that an element had no semantic role.

As web development standards and best practices evolve, the significance of setting apart content material structure from presentation becomes more apparent. The adoption of role= ”presentation” grew to ensure that assistive technology may want to.

This may be as it should be interpreted: net content enhances the overall accessibility of websites. In modern net improvement, using presentational roles is considered a precise practice, selling a clean separation of worries among content shape and visual presentation.

The Role of ARIA in Hiding Semantics

Accessible Rich Internet Applications (ARIA) is a set of attributes introduced to enhance the accessibility of applications . These are mainly those advanced using JavaScript, Ajax, and dynamic technologies. ARIA presents a way to supplement HTML semantics by conveying additional information to assistive technology.

One key aspect of ARIA is its role in modifying the presentation of particular elements while preserving their semantic meaning. Role= “presentation” and aria-hidden=”real” are two commonly used attributes for this motive. The choice among them depends on the developer’s purpose — whether they want to deliver that an element is presentational.

Comparison of role=”presentation” and aria-hidden=”true” attributes​​.

The role=”presentation” characteristic is carried out to HTML elements to imply that they have no explicit semantic meaning. This is to split visual styling from the report’s structural semantics. On the opposite hand, the aria-hidden=”authentic” attribute is to hide elements from assistive technology.

When aria-hidden=”actual” is implemented in a component, it alerts screen readers and other assistive technologies. The alert is that the content material inside that element must be ignored and not provided to users. The role=”presentation” is specifically for factors that are meant to be in basic terms presentational.

On the other hand, aria-hidden=”real” is a broader attribute for any element to hide from assistive technology.

Common Uses of the role=”presentation” Attribute

In web development, the HTML role presentation attribute becomes a valuable tool, explicitly indicating that an HTML element should be treated purely as presentational or decorative, devoid of semantic significance.

This attribute is beneficial when developers want to decorate the visual presentation of content without introducing misleading information for assistive technology.

Here are some everyday use instances for the role=” presentation” attribute:

1.) Decorative Images:

Decorative snapshots used for classy roles often do not contribute to the content material . By applying role=”presentation” to the related <img> element, developers inform display screen readers and other assistive technologies that the image is only ornamental and is not applicable.

<img src=”decorative-image.jpg” alt=”” role=”presentation”>

2.) Styling Containers:

Div elements or other containers are in basic terms for styling purposes and have no semantic significance. Applying role=” presentation” to these elements guarantees they do not intrude with the Accessibility Tree, preserving a clean separation between visual styling and record structure.

<div class=”styling-container” role=”presentation”>

<!– Content for styling purposes only –>

</div>

3.) Spacer or Separator Elements:

When builders use non-semantic elements to create spacing, html role presentation is to clarify their reason for assistive technology.

<div class=”spacer” role=”presentation”></div>

Impact of role=” presentation” on specific HTML elements

1.) lists (ul, ol):.

Applying role=” presentation” to lists suggests that the listing gadgets do not convey a semantic order or hierarchy. This can be useful whilst builders use lists for layout roles in preference to representing a significant sequence.

<ul role=”presentation”>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ul>

2.) Tables:

People use tables for layout or presentation rather than displaying tabular information.By applying role=”presentation” to a table, builders ensure screen readers recognize that the desk is not conveying records relationships.

<table role=”presentation”>

    <!– Table content for layout purposes only –>

</table>

Therefore, the role=”presentation” attribute is a powerful device for web developers to beautify visible layouts without compromising accessibility.

Limitations and Considerations

The role=”presentation” attribute is usually effective in instructing browsers and assistive technology. This is to deal with an element as merely presentational. There are concerns that builders have to be aware of:

1.) Interactive or Focusable Elements:

Browsers may overlook the role=”presentation” attribute in certain cases when applied to interactive elements. For example, assigning role=”presentation” to a button or hyperlink might lead the browser to recognize it as interactive.

Also, display screen readers may additionally announce it as such. Developers must work cautiously while using role=”presentation” on factors customers would engage with for steady behavior.

<!– The role=”presentation” may not prevent interaction behavior –>

<button role=”presentation”>Click me</button>

2.) Global ARIA States:

Certain global ARIA states, such as aria-stay and aria-busy, can affect the effectiveness of HTML role presentation. For instance, if an element with role=”presentation” is inside a region with aria-live=”assertive”, it would display reader customers.

Developers should consider the broader context and how global ARIA states might influence the visibility of factors with role=”presentation”.

<div aria-live=”assertive”>

    <span role=”presentation”>This message will be announced.</span>

3.) WAI-ARIA Authoring Practices:

Seeking advice from the WAI-ARIA Authoring Practices pointers and specifications is essential. This is for the maximum up-to-date hints on using ARIA attributes, along with role=”presentation”.

As net standards evolve, new considerations and first-rate practices might also emerge, and builders need to live knowledgeable about adjustments.

<!– Always refer to the latest WAI-ARIA Authoring Practices guidelines –>

<div role=”presentation”>Content following best practices</div>

Therefore, while role=” presentation” is a valuable device for reinforcing internet accessibility, builders need to be privy to its barriers in unique contexts, along with interactive factors and global ARIA states.

See Also: How to Make a Quiz in HTML? What to do?

The Role Attribute: Categories and Usage

The HTML role presentation is flexible, supplying several classes to define the motive or element. These classes consist of:

1.) Abstract Roles:

Outline abstract standards with roles not limited to specific elements. For instance, use role=”variety” to define variety input and role=”institution” to group elements.

2.)Widget Roles:

Widget roles are for interactive consumer interface factors. Examples include role=”button” for clickable buttons and role=”textbox” for input fields.

3.)Document Structure Roles:

Define record shape and semantics. Examples include role=”article” for representing independent content material and role=”navigation” for navigation menus. 

4.)Landmark Roles:

Landmark roles become aware of particular regions of a page, assisting navigation for users. Examples include role=”header” for the header phase and role=”major” for the principle content material vicinity. 

To use the role attribute effectively, remember the following guidance:

1.) semantic html first:.

Whenever possible, depend upon semantic HTML factors instead of adding roles. HTML5 introduces elements like <nav> <article>, and <phase> that deliver meaning.

2.) Use Roles for Custom Elements:

When growing custom additives or interactive elements that do not have native HTML equivalents, use suitable ARIA roles to bring their motive to assistive technologies. 

3.) Avoid Overusing Presentation Roles:

While role=” presentation” is beneficial in simple terms and decorative factors, it’s crucial to apply it judiciously. Ensure that it honestly adds price to accessibility without compromising the overall shape of the file.

By understanding the kinds of roles and adhering to excellent practices, builders can leverage the role attribute to enhance accessibility.

See Also: Understanding Data Formats: Plain Text, XML, HTML, JSON, and Beyond

In conclusion, the role attribute in HTML is a pivotal device in internet development, presenting a way to enhance accessibility and convey essential facts to assistive technologies.

We explore its diverse packages, together with the categorization into Abstract, Widget, Document Structure, and Landmark roles, every serving precise purposes in defining the character of HTML factors.

We look at scenarios wherein the role=”presentation” characteristic proves beneficial without compromising the semantic integrity of their content material. However, it is vital to recognize the limitations, such as the capability to disregard the attribute for positive interactive factors.

See Also: Achieve Stylish HTML Tables without CSS: Border Techniques and Examples

Encouragement to prioritize accessibility in web design.

As we navigate the dynamic landscape of net development, the overarching subject matter is prioritizing accessibility. By adhering to excellent practices and staying in the loop about evolving requirements, developers contribute to an extra-inclusive digital realm. 

See Also: Troubleshooting HTML Audio Autoplay Not Working

Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.

Leave a Reply Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Web Design in a Nutshell, 3rd Edition by Jennifer Robbins

Get full access to Web Design in a Nutshell, 3rd Edition and 60K+ other titles, with a free 10-day trial of O'Reilly.

There are also live events, courses curated by job role, and more.

Presentational Elements

There are a handful of (X)HTML elements that are explicitly presentation oriented. Sometimes called “physical” styles, they provide instructions for the size, weight, or style of the font used to display the element.

If you’ve been paying attention, you already know that Cascading Style Sheets are now the preferred way to specify presentation instructions. Table 10-2 lists the presentational inline elements, along with the preferred alternative for achieving the same visual effect.

Table 10-2. Presentational inline elements and style sheet alternatives

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Don’t leave empty-handed

Get Mark Richards’s Software Architecture Patterns ebook to better understand how to design components—and how they should interact.

It’s yours, free.

Check it out now on O’Reilly

Dive in for free with a 10-day trial of the O’Reilly learning platform—then explore all the other resources our members count on to build skills and solve problems every day.

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

• Components · Classes .
• WebSlides on Codepen .
• WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

• Background images: Unsplash .
• CSS animations: Animate.css .
• Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

Teach Computer Science

HTML Structure and Presentation

Ks3 computer science.

11-14 Years Old

48 modules covering EVERY Computer Science topic needed for KS3 level.

GCSE Computer Science

14-16 Years Old

45 modules covering EVERY Computer Science topic needed for GCSE level.

A-Level Computer Science

16-18 Years Old

66 modules covering EVERY Computer Science topic needed for A-Level.

GCSE Creating web pages using HTML and CSS (14-16 years)

• An editable PowerPoint lesson presentation
• Editable revision handouts
• A glossary which covers the key terminologies of the module
• Topic mindmaps for visualising the key concepts
• Printable flashcards to help students engage active recall and confidence-based repetition
• A quiz with accompanying answer key to test knowledge and understanding of the module

A-Level Designing Web pages using HTML and CSS (16-18 years)

Html structure.

HTML (Hypertext Markup Language) is the recognised markup language utilised in forming web pages.  It defines the composition of web pages by using markup.  HTML elements are the primary units of HTML pages and are denoted by tags.  HTML tags label parts of content like headings, paragraphs, and tables.  Browsers do not show the HTML tags, but they are used in the background in order to deliver the content of the page.

HTML tags are element names enclosed by angle brackets.  HTML tags usually come in pairs.  The first tag in a pair is the start tag, and the second tag is the end tag.  The end tag is written like the start tag, but with a forward slash inserted before the tag name.  The start tag is sometimes also called the opening tag, and the end tags are the closing tag.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.  The HTML document itself begins with <html> and ends with </html>.  The visible part of the HTML document is between <body> and </body>.

HTML tags are not case sensitive.

HTML Attributes

All HTML elements can have attributes, which provide additional information about the element, and are always specified in the start tag.  They usually come in name/value pairs.

CSS (Cascading Style Sheets) defines how HTML elements are to be presented on any given screen, paper or other media.  It saves the developer a lot of work since it can control the layout of multiple web pages simultaneously.

Ways to add CSS to HTML Elements

• Inline – used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
• Internal – used to describe a style for one HTML page. It is indicated in the <head> section of an HTML page, within a <style> element.
• External – used to define the style for multiple HTML pages by using an external CSS file. You can change the look of an entire website by changing one file.  This is the most common way to add CSS to HTML elements.

HTML Structure vs. HTML Presentation

The composition of a webpage could be regarded as a mixture of the following four elements:

• Content is the general term used for all the browser-displayed information elements—such as text, audio, still images, animation, video, multimedia, and files belonging to web pages. It does not require any additional presentational markups or styles in order to fully relay its message.
• Structure is the name given to the practice of using HTML in content to transmit substance, and also to define how blocks of information are structured in relation to one another. Examples include: “This is a list,” (i, d, k), “This is heading and subheading,” (<h1>, <h2>, …, <h6>), “This section is related to,” (<a>), etc.
• Presentation of Style refers to anything related to how the content and structure is presented. Examples include size, color, margins, borders, layout, location, etc.
• Behaviour or Interactivity is the implementation of client-side script to generate a two-way flow of information between the webpage and its users. JavaScript is an example of this.

Most of the time it is difficult to clearly distinguish content from the structure.  For example, the <img> tag, as a structural element, is used to produce graphical content.  In practice, the composition of a webpage can simply be viewed as a mixture of three elements: Structure, Presentation and Behavior.

The following terms are often used in correspondence with one another: separation of content and presentation, separation of meaning and presentation, and separation of structure and presentation.  Nonetheless, all of these terms basically make reference to the separation of the content (which is made meaningful by structure and presentation), or simply acknowledge the separation of the structure (HTML) and the presentation (CSS) of any given webpage.

The main goal of HTML 4.01 is the separation of structure and presentation,  as specified in section 2.4.1 of HTML 4.01.

Further Readings:

• HTML element

NTRS - NASA Technical Reports Server

Available downloads, related records.

Some of Arizona’s indicted fake electors want your spare change to help with legal bills

Six of the fake electors indicted in Arizona are turning to fundraising appeals to help finance their legal defense.

Michael and Kelli Ward are the only Arizonans seeking financial support so far. The other four indicted individuals are continuing campaigns they apparently started due to their involvement in other cases related to the 2020 presidential election. All of them have accounts on GiveSendGo , a Christian crowdfunding site that also collects prayers for the beneficiaries.

The Wards' attorney, Brad Miller, launched the couple's fundraising campaign in the wake of indictments sought by Attorney General Kris Mayes. As of Friday, the effort had raised $100,000 from 92 donors toward a goal of what appears to be $5.3 million. The target amount is not fully displayed on the fundraising website .

They also received 21 prayers.

Miller portrayed the Wards' presentation of themselves as Arizona's lawful presidential electors as a free speech matter.

Prep for the polls: See who is running for president and compare where they stand on key issues in our Voter Guide

"AG Mayes is trying to punish, bankrupt, and silence Kelli and Michael for speaking out in favor of election integrity," Miller wrote. "And Mayes wants to quash all future peaceable protests against the democrat party by criminalizing this type of speech."

The top donor through Friday was Hildy Angius, a member of the Mohave County Board of Supervisors and a Republican candidate for a state Senate seat from Legislative District 30 in the northwest part of the state.

Other fundraising appeals on the site are from Rudy Giuliani, an attorney, associate of former President Donald Trump and former New York City mayor; attorney Jenna Ellis, who worked with Giuliani on Trump legal matters; attorney John Eastman; and Michael Roman, a former Trump campaign official and a co-defendant in the Georgia case involving fake electors.

Giuliani's site was started by Jackson Lahmeyer, an Oklahoma pastor who ran an unsuccessful campaign for the GOP nomination for U.S. Senate in 2022.

Giuliani "has been persecuted to the highest level through law fare due to his support of President Donald Trump," Lahmeyer wrote. As of May 24, the campaign had raised $40,000 toward the comparatively modest goal of $100,000. He also has received 198 prayers.

Proceeds will be funneled to the Rudy Giuliani Freedom Fund, another account set up to defray the former mayor's legal bills.

Other defendants and their legal defense totals as of late May:

• Eastman started his own account on GiveSendGo with a goal of $1.5 million. He had raised $865,000 as of May 24.
• Ellis' account was started by attorney Michael Melito, who represented her in a Colorado disciplinary case where Ellis admitted to several statements she made in 2020 that violated professional ethics rules. She had raised $220,150, although no fundraising goal was posted. Her biggest donor was conservative author Dinesh D'Souza and his wife, who gave $100,000.
• Michael Roman, a Trump campaign staffer in 2016 and 2020. He joined the crowdfunding site to raise $300,000 toward his legal bills. As of May 24, he had reached $64,000 toward that goal. He is represented by the  Dhillon Law Group, the same firm that is defending Arizona state Sen. Jake Hoffman in the fake elector case.

Another of the indicted individuals is fundraising, but for a different cause. State Sen. Anthony Kern, R-Glendale, dashed off an appeal for funds to fuel his congressional bid soon after the indictments were handed down.

“If they lock Trump and me up…You all will be next,” Kern's email states . He is in a six-way race for the GOP nomination to represent the 8th Congressional District in the West Valley.

Following advice or fraud? Elements of AZ fake electors case that will be crucial at trial

Reach the reporter at   [email protected]  or at 602-228-7566 and follow her on Threads as well as on X, the platform formerly known as Twitter   @maryjpitzl .

• Share full article

Advertisement

Subscriber-only Newsletter

Paul Krugman

Preparing for the second china shock.

By Paul Krugman

Opinion Columnist

Donald Trump is an old-fashioned protectionist, and he has been suggesting for a while that if elected he will quickly impose tariffs of 10 percent or more on all imports — a “ ring around the collar ” for the U.S. economy.

But President Biden is by no means a free-trade purist. His signature legislative achievement, the Inflation Reduction Act — which is actually mainly about fighting climate change — contains several nationalistic provisions designed to limit subsidies primarily to manufactured goods produced in North America. And the Biden administration is now imposing tariffs as high as 100 percent on Chinese exports of electric vehicles and taxes on other imported goods, including semiconductors and batteries.

The immediate impact of these tariffs will be small, because the United States currently imports very few of the affected goods from China. But Biden’s moves are more than a symbolic gesture. They’re a shot across the bow — a signal that the United States won’t accept a second so-called China shock, a surge of imports that could undermine crucial parts of the administration’s agenda.

To understand what I’m talking about, it helps to review some economic and intellectual history.

China’s exports of manufactured goods to the United States surged beginning in the 1990s. I think it’s fair to say that most economists, myself included, weren’t initially too worried by this development. There’s an old line in economics that if another country wants to sell you a lot of useful stuff at low prices, you shouldn’t protest — if anything, you should send them a note of thanks.

OK, even the most orthodox of economists knows that it isn’t that simple. Cheap imports may make a nation as a whole richer, but they can also hurt significant numbers of workers. There was in fact a fierce debate in the 1990s about whether imports from low-wage countries were a major reason for rising U.S. income inequality, with most economists — again, myself included — agreeing that imports were a cause of rising inequality, but not the main cause.

It has also been clear for a long time that trade deficits can be damaging if the economy is persistently depressed, with insufficient demand to produce full employment. This wasn’t a big issue for most of the initial era of surging imports from China, but it did become an important consideration after the 2008 financial crisis, which kept U.S. employment depressed for years. For what it’s worth, during that era I became quite hawkish on China, unsuccessfully urging U.S. policymakers to threaten tariffs unless China acted to reduce its trade surplus by increasing the value of the yuan. But that concern gradually faded away.

However, the economic debate shifted after the 2013 release of a study by David Autor, David Dorn and Gordon Hanson, titled “ The China Syndrome ,” which later became more widely known as “the China shock.” The authors estimated that Chinese imports had displaced around 1.5 million U.S. manufacturing workers between 1990 and 2007. That in itself isn’t that big a number in an economy as large and dynamic as ours: In fact, in America, around 1.5 million workers are laid off or discharged for one reason or another every month .

But what Autor et al. pointed out was that many U.S. industries are highly localized geographically, so the job losses due to imports, while they looked small on average, were devastating to many communities. I like to use the example of the furniture industry, which probably lost several hundred thousand jobs to Chinese imports. Nationally, that’s a rounding error. But the furniture industry was concentrated in the North Carolina Piedmont region, so the import surge ripped the heart out of local economies like that of the Hickory-Lenoir-Morganton metropolitan area .

And the political implications of the paper became more relevant a few years later, when it was clear that the disruption of communities by surging imports may have contributed to the election of President Trump.

So the first China shock was a real problem, and even generally pro-free-trade economists — economists who have no sympathy for crude, Trump-style protectionism — now worry about the effects of rapid increases in imports.

But wait: Why do I say the first China shock? Because there’s now clearly a second China shock building.

This new shock largely reflects China’s weakness rather than its strength. The Chinese economy is in trouble. Consumer spending is very low as a share of national income, and the high levels of investment spending that used to fuel the economy have become unsustainable as a declining working-age population and slowing technological progress lead to diminishing returns. China was able to mask these problems for a while with a huge housing bubble and a bloated real estate sector, but that game appears to be up.

The obvious solution is to transfer more income to households, strengthening consumer demand. But Xi Jinping, China’s leader, seems weirdly unwilling to do the obvious , still focused on production rather than consumption. I’ll leave it to China experts to explain this reluctance — is it geopolitics? Fear that the Chinese people will become lazy?

Whatever the ideology or strategy behind China’s refusal to increase consumer spending, the only way out given that refusal is to run giant trade surpluses, dumping the stuff China produces but can’t or won’t consume in other countries’ markets.

But what the Biden administration is basically saying is: No, you don’t get to do that. You’re too big a player in the world economy to dump the results of your policy failures in other countries’ laps.

Why can’t the United States just accept cheap goods from China? The concerns about community disruption caused by the first China shock still apply. But there’s also a new issue: climate change. The goods being subjected to new or increased tariffs are mainly products associated with the transition to green energy; electric vehicles have been getting the most press, but giant batteries — which are now starting to play a crucial role in solving the problem of renewable energy intermittence (the sun doesn’t always shine, the wind doesn’t always blow) — are an even bigger deal.

Why not just buy cheap Chinese batteries? Political economy. Given the existential threat posed by climate change, the political coalition behind the green energy transition shouldn’t be fragile, but it is. The Biden administration was able to get large subsidies for renewable energy only by tying those subsidies to the creation of domestic manufacturing jobs. If those subsidies are seen as creating jobs in China instead, our last, best hope of avoiding climate catastrophe will be lost — a consideration that easily outweighs all the usual arguments against tariffs.

So in imposing these new tariffs, Biden’s people are doing what they must. I don’t see any alternative.

The White House fact sheet .

China shock 2.0 .

Swollen real estate .

Chinese debt isn’t the problem .

Facing the Music

With dueling accusations about antisemitism, the verse from this old Tom Lehrer satire has never seemed more appropriate.

An earlier version of this article misspelled the name of a city in North Carolina. It is Morganton, not Morgantown.

How we handle corrections

Paul Krugman has been an Opinion columnist since 2000 and is also a distinguished professor at the City University of New York Graduate Center. He won the 2008 Nobel Memorial Prize in Economic Sciences for his work on international trade and economic geography. @ PaulKrugman

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

<style>: The Style Information element

The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

The <style> element must be included inside the <head> of the document. In general, it is better to put your styles in external stylesheets and apply them using <link> elements.

If you include multiple <style> and <link> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.

In the same manner as <link> elements, <style> elements can include media attributes that contain media queries , allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.

This element includes the global attributes .

This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. @import -ed stylesheets are generally considered as critical subresources, whereas background-image and fonts are not. The operations that are to be blocked must be a space-separated list of blocking tokens listed below.

• render : The rendering of content on the screen is blocked.

This attribute defines which media the style should be applied to. Its value is a media query , which defaults to all if the attribute is missing.

A cryptographic nonce (number used once) used to allow inline styles in a style-src Content-Security-Policy . The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.

This attribute specifies alternative style sheet sets.

Deprecated attributes

This attribute should not be provided: if it is, the only permitted values are the empty string or a case-insensitive match for text/css .

A simple stylesheet

In the following example, we apply a very simple stylesheet to a document:

Multiple style elements

In this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity .

Including a media query

In this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.

Technical summary

Specifications, browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• The <link> element, which allows us to apply external stylesheets to a document.
• Alternative Style Sheets

HTML Tutorial

Html graphics, html examples, html references, html multimedia.

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Browser Support

The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

Advertisement

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.