Link to Media Specific Style Sheets in CSS3

140
Link to Media Specific Style Sheets in CSS3

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.

Result output

<!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> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

What are different media types available

AllFor all device Handheld for handheld devices such as mobile
ProjectionFor Projected presentationsTtyfor teletype, terminals, and other media that use a
fided pitch character grid
BrilleFor braille tactile feedback deviceprintFor print pages and for documents viewed in
print preview mode
ScreenFor color computer screenstvfor Televisions
EmbossedFor paged braille printersspeechfor speech synthesizers

Follow us on Social Media For More

FacebookInstagramPinterest

LEAVE A REPLY

Please enter your comment!
Please enter your name here