We can link to several style sheets in your HTML file and specify that different style sheets be applied for different media using the media attribute. For example, one style sheet could be applied when the document is displayed on a computer screen another style sheet could be applied when the document is printed and yet another could be applied for viewing an mobile phone or another handheld device.
Link to Media specific style sheets
Step 1: Create a separate external style sheet for each type of media that you want to support
Step 2: Link to each of the style sheets in your file using the <link> tag.
Step 3: Within the <link> tag for one of the style sheet types Media=”?”, Replacing ? with a valid media type.
Step 4: Within the <link> tag for another style sheet type media=”?”, replacing? with a valid media type.
<!DOCTYPE html> <html> <Head> <Title>Coding thai</Title> <link rel="Stylesheet" type="text/css" href="style.css" media="screen"> <link rel="Stylesheet" type="text/css" href="style.css" media="Print"> </Head> <body> <h1 id="Heading">Types of Web Developer</h1> <h2>Fontend Developer and Back-end Developer</h2> <hr> <p>A front end developer has one general responsibility: to ensure that website visitors can easily interact with the page. Back-end developers are the experts who build and maintain the mechanisms that process data and perform actions on websites.</p> <hr> <small> ©Copyright 2022 Codingthai</small> </body> </html>
What are different media types available
|All||For all device||Handheld||for handheld devices such as mobile|
|Projection||For Projected presentations||Tty||for teletype, terminals, and other media that use a |
fided pitch character grid
|Brille||For braille tactile feedback device||For print pages and for documents viewed in |
print preview mode
|Screen||For color computer screens||tv||for Televisions|
|Embossed||For paged braille printers||speech||for speech synthesizers|