Best HTML Project Ideas & Topics for Beginners | Latest HTML Practice Project Topics to Learn

HTML Project Ideas & Topics for Beginners

For those who have even a little bit of interest in programming, creating the very first HTML project is definitely exciting and something to look forward to. Those who are newbies to coding often wonder what sort of project they can work on to be able to either start their development business or to impress their colleagues, college mates, or even their employers.

Most people start with the most basic ways to code when they’re just joining, and that is by learning HTML and CSS. There are many HTML Project Ideas & Topics for Beginners that you can start out with when they’re just learning. The path for every beginner with coding always begins with these two elements, which means that if you want to make something that is creative, you need to have something that will stand out and be innovative.

Getting the right HTML Project Topics is not the easiest thing in the world, which is why we have a few ideas here that can help you out if you’re a beginner with HTML. You can practice these HTML Topics for Students and even save them as a part of your coding portfolio.

What is HTML?

HTML is a markup language, also called a coding tool, that is used for website development. HTML and CSS are used together to make websites which means that learning HTML is important if you want to work in the niche of web development.

HTML has a very simple learning curve, so you can easily pick it up even if you don’t have any prior programming experience. If you know the basics, then it’s even easier to master this coding language.

It may seem daunting and very challenging in the beginning, but remember that baby steps also mean progress, and this is how you can get better. The best way to learn is to keep practicing, which means that trying out different HTML Practice Project Ideas for Beginners that can help you build your portfolio.

HTML Practice Projects for Beginners

If you’re a beginner with HTML, then these are some HTML Projects for Students that can help you build up your portfolio and also polish your skills.

Technical Documentation Page

Even if you’re a beginner with HTML and know the basics of CSS and JavaScript, you can very easily make a technical documentation page. The idea behind this is to make a page where you can click on any one of the topics on the left side of this page, and the associated content will automatically be loaded on the right side.

The making of a technical documentation page is a process that is simple and straightforward with no complexity at all. You need to divide up your webpage into two parts to be able to build this HTML project.

The left side of the page, as mentioned, will have a menu that has all the topics listed from top to bottom, and the right side will have the content that is the documentation that corresponds with each of the topics. You can use JavaScript or CSS bookmark if you want to put in the click function.

Tribute Page

If you’re a beginner with HTML, then this is one of the simplest ideas that you can work on. Now, a tribute page, as the name suggests, is a page where you show respect or honor to someone that has inspired you or someone that you look up to and admire. To make a page like this, all you need is some fundamental HTML concepts, and you’re good to go.

The first thing you need to do is to make the webpage itself. Then you need to add in the picture of the person this page is about, and all in all the details you wish to, like their personal details, history, achievements, and such. You can also have a section where you write some words of respect for this person and how they’ve helped you if you’d like.

If you want to use CSS for this project, you can, since it will be helpful for you to be able to put in different layouts and styles. Make sure that the page is visually appealing as well with good backgrounds. You can go for pastels or earthy tones, and it’s best to stay away from bright contrasting and loud colors for this, but the choice is ultimately yours.

Event Page

This is a great project even if you’re a beginner with HTML, and you can even experiment with it. You need to have both CSS and HTML skills for this one. Here you need to create a static page where all the details of an event (product launch, webinar, conference, etc.) are being displayed.

The layout of an event page is very simple too. The header section is where all the names and images of the various speakers with the links will be displayed along with the schedule and the venue of the event. You also need to have a section where the purpose of the event is being described. This is where you will say what the event is for and who is the audience that this is targeted at.

Then section off the page into smaller chunks so that it looks neater and not chaotic. You also need to choose the background color, font color, and font style for the different sections on the page. But be sure that everything complements each other. And add a registration button where people can go ahead and register if they are interested in the event.

Parallax Website

Building a parallax website is very easy and can be done in a day by someone who is well-versed in HTML concepts, even if they’re beginners. A parallax website in one wherein the background you will see a fixed image, and you can scroll up or down on that page and be able to see different sections of that image. This is a way to give a website a unique and beautiful effect.

You need to section out the page into about three to four parts to make a parallax website. Then choose some background images, align all of them on the page in the various section with the text that is relevant. THen set in the padding and the margin, after which you need to integrate the background-position. To add more stylish elements to the page, you can use CSS.

HTML lays a strong foundation for Web Development which is why we have listed Web Development Project Ideas for Beginners for your reference.

Survey Form

Many different websites have forms that they use as a strategy to get customer data. A survey form that is well-made can help you get all the relevant information that you need from the target audience, like the pain points, preference, taste, location, job, age, and more.

This is one of the HTML Project Ideas that is a great way for you to test what you know about it while you design a form and structure a webpage. Building a survey form isn’t very easy, but it’s not so complex that it can’t be done. You just need to know the basic tags/input fields and such that are needed to make a form.

Then just use the tags to make text fields, dates, radio buttons, checkboxes, and all the other elements that a form needs. You can use CSS here as well so that your webpage and form have a better look and feel.

Music Store Page

If you’re a music lover, then a music store page is the perfect experiment for you. You need to know the basics of CSS3 and HTML5 if you want to build this page. The first thing you need to do to make this page is to add a background image that is appropriate and add in a short description of all that you can find on the page.

The header section of the page also needs to have menus that list out songs based on the album, artist, year, genre, and so on. You also need the important and relevant buttons like rewind, stop, start, forward, etc. Add in links and images that are appropriate for the collection of songs available.

On the footer, put in contact details, as well as trial options, subscription packages, in-store purchases, and links for registration.

Do Refer: React Project Ideas & Topics for Beginners

Restaurant Website

This is a great project that will give you loads of chances to showcase all of your creativity. A website for a restaurant needs to have several functionalities while also being detailed and elaborate.

Firstly, you need to make a webpage layout that is aesthetic and captivating, and you need to also have various elements there. This means online reservation options, contact information, social media buttons, good images of the different dishes, prices, small descriptions of the food items, a list of the food items themselves, and all the other details that are important.

You can align all of the different beverages and food items with the prices in a grid by using CSS. When you’re making a website for a restaurant, you need to focus on a combination of colors that is eye-catching, neat font styles, and a stylish layout.

If you want to take this up a notch, you can have a photo gallery that has sliding images of all of the various items of food. You can also have the relevant links on this website so that the audience has an easier time navigating through the site.

Landing Page

This is not really a project that will be best for you if you’re a  beginner with HTML since a strong knowledge of CSS and HTML is needed. But, this is really good practice and will be a great addition to your coding portfolio. Landing pages have a lot of vital elements, and so you need to combine your creativity with the HTML knowledge that you have to make it.

You need to make columns and margins, edit images (resize and crop), make separate sections for the site/content elements, add header and footer, and align the items that are in the columns to make the landing page.

Apart from all of this, you need to also pick the right colors for the page. The colors that you pick have to be ones that complement each other, and each section can have different colors if that is what you want. Just be sure that the page elements aren’t clashing with each other when you use CSS for layout and styling.

Personal Portfolio Page

You need to be well-versed in CSS3 and HTML5 if you want to make a personal portfolio page. Here you need to make a webpage that has all the standard information you would find in a work portfolio like your interest, niche skills, name, projects, and image. You can also add your CV here and host the entire portfolio on GitHub using your account.

The portfolio page should have two sections, that is the header and the footer. The former will have a menu that highlights all of your personal information, work as well as contact information. You can also add an image of yourself on top of the page and have a short summary of your interests and professional career.

Below all of this, add in a few samples of the work that you’ve done. The footer section will then have all of your social media handles where people can reach you.

Photography Website

To make a photography website, you need to work with both CSS3 and HTML5 so that you can add in all the needed elements. You need to make a one-page responsive photography website here with those skills.

You need a landing page on top of which you need to add the name and logo of the brand as well as a description of the site. You can put in a gallery with a view button so that the users on the page can go to the section with the images and slide to view all of them.

There are different viewing layouts that you can add in, like a list, grid, and more. Then add in the padding and margin for the page and pick the color combination that you want along with the image size and font style. Use a flexbox for media queries to get a responsiveness quotient.

Conclusion

HTML and CSS are both the highlights of all of these projects that have been listed out. We recommend that you get a good grasp of both of these before switching to something more complex like Python, PHP, or Python. You need to be comfortable with making HTML projects before you can go ahead and work with more complex projects for development.

You need to keep practicing and working to be better. This is why we have HTML Project Ideas listed here for you. These projects can put all that you’ve learned into practice, and you can highlight them in your CV or even use them to get better opportunities. Once your basics and foundations are right, you can start working on real-world projects that are much bigger and keep challenging yourself as you keep growing.

CSS url() Function – Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS

If we are talking about background images, we can use @import. CSS has a wide range of properties that can reference an image file, display that file on the image as a part of the element’s background. Of all those, we use CSS Image Syntax url() to load up a resource. From this tutorial, you will find the full details about the CSS URL() function like definition, syntax, supported browsers, properties that accept URL as a Value, and example programs.

CSS url() Function

To include a file, we use the inbuilt function ie., url() CSS function. The parameter is an absolute URL, a relative URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr() function. Based on the property for which it is a value, the resource queried can be an image, font, or stylesheet. The url() functional representation is the value for the <url> data type.

Syntax

url( <string> <url-modifier>* )

String indicates the URL or ID of an SVG Shape. (*) asterisk denotes that the preceding group occurs zero or more times.

<URL> 

An URL is a relative or Absolute Address or Pointer for which the web resource is included or a data uri in single or double-quotes. Quotes are necessary if an URL includes Parentheses, whitespace, or quotes unless these characters are escaped, or if addresses include control characters above 0x7e. Double Quotes can’t occur inside double quotes and single quotes can’t occur within single quotes unless escaped.

If you want to write an URL without Quotes, you can use a backslash(\) before any paratheses, whitespace characters or single quotes, double quotes that are part of the URL.

Path

It References SVG Shape’s ID — circle, ellipse, line, path, polygon, polyline, or rect by using the shape’s geometry as the path.

<url-modifier>

In the coming future url() function can support specifying a modifier, functional notation, or identifier that alters the URL String Meaning. As of now, it is not fully defined and supported.

Parameters

This function allows a single parameter url that holds the url in string format. The following examples of url are such as:

<css_property>: url("https://btechgeeks.com/image.png")
<css_property>: url('https://btechgeeks.com/image.png')
<css_property>: url(https://betchgeeks.com/image.png)

Values

The url() function can be added as a value for background, background-image, list-style, list-style-image,content, cursor, border, border-image,border-image-source, mask, mask-image, src in the context of a @font-face block, and @counter-style/symbol

Some times url() is Optional

At times, url() functional notation is optional. For suppose when you use the @import rule, you can omit the URL() and simply provide a <string> for the url.

Absolute Vs Relatieve URL

You can choose between Absolute URL, Relative URL, and Root-Relative URL as the Parameter as all of them are valid.

/* Absolute URL */
background-image: url(http://www.btechgeeks.com/images/image.png);
​
/* Relative URLs */
background-image: url(image.png);
background-image: url(../images/image.png);
​
/* Root-relative URL */
background-image: url(/images/image.png);

Also Check:

Supported Browsers

The browsers supported by url() function are as follows:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Properties that accept URL as a Value

  • background-image
  • border-image
  • content
  • list-style-image

Usage of CSS url() function in Filter

If you use an URL as a path for filter the URL needs to meet the following criteria and they are as below

  • The Path to an SVG File should be appended with filter ID.
  • Should consist ID of the filter if an SVG already exists on the page.
.blur {
filter: url(my-file.svg#svg-blur); /* the URL of an SVG file used as a filter */
}

.inline-blur {
filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
}

Examples using url() in CSS

section {
  background-image: url(picture.png);
}

This is a relative URL which means that it will search for the file inside the same folder.

Relative url() Usage in CSS

We can go back to one folder:

section { 
    background-image: url(../picture.png); 
}

Or can go into a folder

section { 
    background-image: url(someFolder/picture.png); 
}

Or can directly load from the root folder of the CSS

section { 
    background-image: url(/picture.png); 
}

Or we can directly fetch from some website

section { 
    background-image: url(https://example.com/picture.png); 
}

Example of Usage in the Content Property

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

li::after {
  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}

OUTPUT

css url() function example result

HTML MCQ Questions for Class 10 with Answers

HTML MCQ Questions for Class 10 with Answers

MCQ Quiz Questions with Answers for Class 10 Computer Science

MCQ Questions for Class 10 HTML with Answers

Q1. HTML is a CBSE2011
(a) package
(b) software
(c) markup language
(d) None of these
Answer: (c) HTML is a markup language which is used to define the layout and attributes of WWW document.

Q2. HTML tags are enclosed in
(a) curly brackets
(b) square brackets
(c) double quotes
(d) angular brackets
Answer: (d) HTML tags are enclosed within angular brackets (< and >).

Q3. Which of the following tag identifies the document as an HTML document?
(a) <HTML>
(b) <HEAD>
(c) <BODY>
(d) <P>
Answer: (a) tag identifies the document as an HTML document.

Q4. Container elements in HTML require     CBSE 2015
(a) starting tag
(b) ending tag
(c) starting and ending tags
(d) None of the above
Answer: (c) In HTML, container elements are required as both starting and ending tags.

Q5. HTML tags are
(a) in uppercase
(b) case sensitive
(c) in lowercase
(d) not case sensitive
Answer: (d) HTML tags are not case sensitive means we can write tags either in uppercase or lowercase.

Q6. Which type of tags used by HTML?
(a) tags only for image
(b) user defined tags
(c) tags only for linking
(d) fixed tags defined by the language
Answer: (d) HTML provides predefined and fixed tags.

Q7. Which program do you need to write HTML code?
(a) Spreadsheet
(b) Access
(c) Notepad
(d) None of these
Answer: (c) From the given options, Notepad is useful program to write HTML code.

Q8. An example of HTML editor is
(a) Notepad
(b) Dreamweaver
(c) Microsoft Frontpage
(d) All of these
Answer: (d) HTML provides various text editors like Notepad, Dreamweaver etc.

Q9. To create an HTML page, you need
(a) text editor
(b) Web browser
(c) Both (a) and (b)
(d) None of these
Answer: (c) Because text editor is required to write HTML code and Web browser is needed to display the page.

Q10. Which of the following is the correct code of HTML page?

(a) <HTML>
<TITLE> Hello
</TITLE>
</HTML>

(b) <HTML>
<HEAD>
<TITLE> Hello
</TITLE>
</HEAD>
</HTML>

(c) <HTML>
<BODY> Hello
</HTML>

(d) <HTML><HEAD> Hello
<BODY>
</HTML>

Answer: (b) Because <TITLE> tag must close inside the <HEAD> tag.

Q11. Tags and text that do not display directly on the page afe placed in
(a) body
(b) table
(c) head
(d) title
Answer: (c) Information in <HEAD> tag is not displayed directly in Web page. It is used to identify the matter (tags) used in a Web page.

Q12. A Web page normally consists of
(a) head and body
(b) top and bottom
(c) body and font
(d) body and title
Answer: (a) From the given options, a Web page normally consists of head and body.

Q13. Which section is used for text and tags that are shown directly on your Web pages?
(a) Meta
(b) Head
(c) Body
(d) Table
Answer: (c) Information in <BODY> tag is directly displayed on Web pages.

Q14. Where do you place the <TITLE> tag in a HTML?
(a) BODY
(b) HEAD
(c) TITLE
(d) FONT

Answer: (b) <TITLE> tag is placed in the <HEAD> tag.

Q15. Which attribute is not supported by a <BODY> tag? CBSE 2013
(a) bgcolor
(b) size
(c) text
(d) link
Answer: (b) size is not an attribute of <BODY> tag.

Q16. What will happen if the background image is smaller than the browser’s window?
(a) It will leave a blank space at the bottom of your page
(b) It will be repeated
(c) It will be stretched
(d) It will not be displayed
Answer: (b) When the background image is smaller than the browser’s window then it will be shown in boxes in repeated pattern.

Q17. Why should you specify a background color, if you are using an image for the actual background of your page?
(a) So the text shows up better
(b) The background color will be shown until the image loads
(c) In case the image does not fit right
(d) None of the above
Answer: (b) We have to use background color because if in any case image is not displayed then atleast background color will be shown on that place.

Q18. Which attribute of <BODY> tag specifies the color of visited links in a document?
(a) vlink
(b) alink
(c) link
(d) None of these
Answer: (a) vlink attribute specifies the color of visited links in a HTML document.

Q19. Choose the correct HTML tag for the largest heading.
(a) <H2>
(b) <H4>
(c) <H6>
(d) <H1>
Answer:(d) <H1> tag provides the largest heading in HTML.

Q20. Which of the following will give smallest size of the text? CBSE 2014
(a) <H3>
(b) <H6>
(c) <H2>
(d) <H4>
Answer: (b) From the given options, <H6> tag displays the smallest size of heading text.

Q21. In a Web page, you can place
(a) 2 levels of headings
(b) 6 levels of headings
(c) 4 levels of headings
(d) 7 levels of headings
Answer: (b) Web page provides six levels of headings.

Q22. The default alignment for paragraph is
(a) left
(b) right
(c) center
(d) justified
Answer: (a) The align attribute of <P> tag provides various alignments like left, right, center and justify. But by default, its alignment is left.

Q23. Which of the following HTML container tags do you apply to text for formatting the text as a paragraph?
(a) <PARAGRAPH> ……. c/PARAGRAPH>
(b) <PARA> ………. </PARA>
(c) <P> ……… </P>
(d) None of the above
Answer: (c) <P>…….</P> is a container tag, which is used for formatting text.

Q24. Which of the following is not a container element? CBSE 2013
(a) P
(b) B
(c) OL
(d) HR
Answer: (d) HR is an empty tag because it has no closing tag.

Q25. The style element holds the document for setting
(a) font, color and alignment
(b) font, color, alignment and border
(c) color, alignment and border
(d) None of the above
Answer: (b) Because they are used to give a better look and feel to the Web documents.

Q26. The tags used for specifying the style in HTML are
(i) <B> (ii) <I> (iii) <M> (iv) <L>
Choose the correct one
(a) (i) and (ii)
(b) (i) and (iii)
(c) (ii) and (iv)
(d) (i), (ii) and (iii)
Answer: (a) Because these two tags are text formatting/styling tags.

Q27. Which of the following tag is used to make a list that lists the items with numbers?
(a) <DL>
(b) <UL>
(c) <OL>
(d) None of these
Answer: (c) <OL> is the ordered list that starts with a number like 1, A, a, i and I etc.

Q28. Which of the following is not HTML list? CBSE 2013
(a) Ordered
(b) Unordered
(c) Definition
(d) Detailed
Answer: (d) Detailed list is not a type of HTML list.

Q29. In an unordered list, it is necessary to enclose each item in CBSE 2013
(a) <LI> tag
(b) <UL> tag
(c) <I> tag
(d) <OL> tag
Answer: (a) Each item must be enclosed in <LI> tag either in ordered list or unordered list.

Q30. Which option do you have while making bulleted lists?
(a) Disc, circle, square
(b) Square, polygon
(c) Disc, circle, rectangle
(d) Disc, oval, polygon
Answer: (a) Bulleted list provides various values like disc, circle and square.

Q31. Which one of the following list type that will create a bulleted list? CBSE 2014
(a) Unordered
(b) Ordered
(c) Definition
(d) All of these
Answer: (a) Unordered list provides various types of bullets like square, disc and circle.

Q32. Which of the following will produce a solid circle bullet when given as value of type with <UL>?
(a) Circle
(b) Disc
(c) Square
(d) Rectangle
Answer: (b) A solid circle bullet use the type disc.

Q33. To create a square bulleted list, use
(a) <UL type=”circle”>
(b) <OL type= “square”>
(c) <ULtype=”square”>
(d) <UL start= “square”>
Answer: (c) Square bulleted list is the part of unordered list.

Q34. In an ordered list, each item cannot be preceded with CBSE 2013
(a) Counting numbers
(b) Arabic numbers
(c) Roman numerals
(d) Bullets
Answer: (d) In unordered list, bullets are used while counting numbers, arabic numbers and roman numbers are used in an ordered list.

Q35. To create a numbered list with A, B, … use
(a) <OL type=”A”>
(b) <OL start=”A”>
(c) <OL begin=”A”>
(d) <OL starts=“a”>
Answer: (a) The given list uses the uppercase letter for each item so, the correct syntax is <OL type=“A”>

Q36. To start a list with number 3, we should write CBSE 2015
(a) <OL start=”3″>
(b) <OLtype=”3″>
(c) <OL value=”3″>
(d) All of these
Answer: (a) The correct syntax for start a list with number 3 is <OL start = “3”>.

Q37. To start a list using circles, use
(a) <UL type=”round”>
(b) <OL start=”l”>
(c) <UL =”circle”>
(d) <UL type =”circle”>
Answer: (d) Because circular list starts with unordered list type circle.

Q38. To start a numbered list with regular numerals, use
(a) <OL type=”A”>
(b) <OL type=”r”>
(c) <OL type=”r”>
(d) <OL type=”u”>
Answer: (b) Because regular numbering is the natural numbers starting from 1, 2, 3, … etc.

Q39. If you want to make a list of items in the form of terms and their descriptions, then you can create a …………. list.
(a) ordered
(b) unordered
(c) definition
(d) nested
Answer: (c) A definition list is a list of items, with a description of each item.

HTML Class 10 Fill in the Blanks [1 Mark each]

Q1. HTML is a subset of ……… .
Answer: SGML

Q2. An element that only has a starting tag and no ending tag is ………….. element.
Answer: empty tag

Q3. The tag that requires a opening as well as closing tag is called ………. .
Answer: container tag

Q4. The attribute topmargin sets a margin alongwith the top of your ………… element.
Answer: BODY

Q5. ………. attribute of BODY tag helps to set background color.
Answer: bgcolor

Q6. The ………… tag is used to define basic font size for the HTML page.
Answer: <BASEFONT>

Q7. The ……….. tag is used to make the Web browser ignore anything that the tag contains.
Answer: <!–…..–>

Q8. ……….. tag is used to bring the text to new line. CBSE 2014
Answer: <BR>

Q9. HR tag is used for  ………..     CBSE 2014
Answer: horizontal line

Q10. …….. and ……… tags break the line flow.
Answer: <BR>, <HR>

Q11. ………… attribute of <HR> tag specifies the width of a horizontal line.
Answer: width

Q12. ……… tag is used to make the text bold.
Answer: <B>

Q13. <LI> tag is an ………… element tag.
Answer: empty

Q14. To display the text in italics, ………. tag is used and to display in type writer font, ……… tag is used. CBSE 2013
Answer: <I>, <TT>

Q15. ………… tag is used to underline the text.
Answer: <U>

Q16. …………. tag creates a bulleted list. CBSE 2015
Answer: <UL>

Q17. noshade is an attribute of …………. tag.
Answer: <HR>

Q18. The unordered list starts with ………….. tag.
Answer: <UL>

Q19. ……..value of type attribute displays a hollow circle for an unordered lists.
Answer: Circle

Q20. If you want to display uppercase alphabets instead of numbers, ………… ordered type should you use.
Answer: A

HTML Class 10 True or False [1 Mark each]

Q1. HTML is a case sensitive Web language.
Answer: False No, you can write your text in both uppercase and lowercase.

Q2. HTML is a programming language CBSE 2015
Answer: False Because it is a markup language.

Q3. <Head> tag is used to define document body.
Answer: False <HEAD> tag is used to define the document head.

Q4. <TITLE> tag is one of the structural tags of HTML document. CBSE 2015
Answer: True HTML provides four structural tags, these are as follows:
<HTML>, <HEAD>, <TITLE>, <BODY>.

Q5. There should be only one <BODY> tag in each Web page. CBSE 2014
Answer: True A Web page contains necessarily one <HEAD> tag and one <BODY> tag.

Q6. All HTML document contains only <BODY> tag.
Answer: False All HTML document contains various tags.

Q7. bgcolor is an attribute of <FONT> tag.
Answer: False It is an attribute of <BODY> tag.

Q8. background attribute is used to display image.
Answer: True It is an attribute of <BODY> tag used to display background image.

Q9. topmargin is used to specify the distance between the top of the document and top of the browser window.
Answer: True topmargin is an attribute of <BODY> tag, which is used to specify the distance between the top of the document and top of the browser window.

Q10. color is an attribute of <FONT> tag.
Answer: True It defines color of the text.

Inserting Images and Links in HTML MCQ Questions

Q1. Web browsers display images in the following format
(a) XBM
(b) JPEG
(c) GIF
(d) All of these
Answer: (d) All of these

Q2. Which tag is used to insert an image in Web page?
(a) <a>
(b) <table>
(c) <img>
(d) <p>
Answer: (c) <img> tag is used to insert inline image in a Web page.

Q3. The correct HTML code for inserting an image is CBSE 2012
(a) <img href=”image.gif”>
(b) <img> image.gif</gif>
(c) <img src = “image.gif”>
(d) <image src = “image.gif” >
Answer: (c) <img src=”image.gif “>

Q4. src attribute used with <img> tag stands for CBSE 2013
(a) screen (b) screen resolution count
(c) source (d) structure
Answer: (c) source

Q5. …………. attribute is used to specify the location of an image file.
(a) alt
(b) src
(c) align
(d) name
Answer: (b) src attribute is used to specify the location of an image file.

Q6. The text specified in the alt attribute is displayed as tooltip in
(a) Internet Explorer
(b) Google Chrome
(c) Both (a) and (b)
(d) None of these
Answer: (a) The text specified in alt attribute is displayed as tooltip in Internet Explorer only.

Q7. The alternate text of an image can be displayed by using attribute of the <img> tag.
(a) src (b) alt
(c) align (d) None of these
Answer: (b) alt attribute of the <img> tag is used to display the alternate text of an image.

Q8. alt attribute allows CBSE 2016
(a) addition of an alternate hyperlink
(b) addition of a border to image
(c) use of an alternative image in place of the specified image
(d) addition of alternative text about an image
Answer: (d) alt attribute allows addition of alternative text about an image.

Q9. The default alignment of images, that are inserted in Web page, is
(a) left
(b) right
(c) inline with text
(d) middle
Answer: (c) An image which is inserted in Web page by default placed inline with text.

Q10. Which is not a valid value in the align attribute of <img> tag? CBSE 2014,2013
(a) top
(b) center
(c) bottom
(d) right
Answer: (b) center is not a valid value in the align attribute of <img> tag. To align in center, <center> tag can be used.

Q11. Why is it important to specify width and height attribute in <img> tag? CBSE 2013
(a) To ensure that image is not copied
(b) The image will not render without these
(c) To stop the image from loading
(d) Helps the browser to load the Web page faster
Answer: (d) Helps the browser to load the Web page faster.

Q12. When creating a Web document, which unit is used to express an image’s height and width? CBSE 2013
(a) Centimetres
(b) Pixels
(c) Dots per inch
(d) Inches
Answer: (b) Image’s height and width unit are expressed in pixels or in per cent form.

Q13. The <a> tag is
(a) a container tag
(b) an empty tag
(c) a closing tag
(d) None of these
Answer: (a) <a> is a container tag, which requires starting as well as matching ending tag.

Q14. ………… is the default color of a hyperlink.
(a) Red
(b) Blue
(c) Green
(d) Black
Answer: (b) Blue

Q15. The tag used in HTML to link a Web page with other Web page is CBSE 2013
(a) <a> (b) <h> (c) <u> (d) <l>
Answer: (a) <a> anchor tag is used to create links.

Q16. Which tag tells, where a link starts? CBSE 2014
(a) <1> (b) <start>
(c) <a> (d) None of these
Answer: (c) <a> tag specify that a link starts, in which, href create a hyperlink.

Q17. Which command should be use to link a page with HTML page? CBSE 2013
(a) <a link = “page.htm” > </a>
(b) <a href = “page.htm”>page</a>
(c) <a connect = “page.htm”></a>
(d) <a attach = “page.htm”></a>
Answer: (b) <a href=”page.htm”>page</a>

Q18. With which code you .can make an image works as link? CBSE 2016
(a) <a href = “URL”>Text</a>
(b) “<a href=”ABC.html”><img src =”graphic.gif”>Click Here</a>
(c) <a ref=mailto:<img src = graphic.gif>Click Here</a>
(d) None of the above
Answer: (b) With <a href=”ABC.html”><img src= “graphic.gif >Click Here</a> image works as link.

Q19. To create a hyperlinked image
(a) the image tag should be within anchor tag
(b) the anchor tag should be within image tag
(c) the image tag should be before the anchor tag
(d) the image tag should be after the anchor tag
Answer: (a) The image tag should be within anchor tag to create hyperlinked image.

Q20. For internal linking, the section names are provided by attribute of <a> tag.
(a) title
(b) href
(c) name
(d) None of these
Answer: (c) For internal linking, section names are provided by name attribute.

Q21. Is it possible to link within the current page?
(a) No
(b) Only in framesets
(c) Yes
(d) None of these
Answer: (c) Yes, it is possible to link within the current page, which is called internal linking.

Q22. ………. attribute of the <a> tag is used to name a section in a Web page to create an internal link.
(a) href
(b) name
(c) align
(d) link
Answer: (b) name attribute is used to create an internal link.

Q23. …………….. attribute is used to set the color of a link while it is active.
(a) vlink
(b) alink
(c) Both
(a) and (b)
(d) None of these
Answer: (b) alink attribute is used to set the color of link while it is active.

Q24. The attribute which is used to send E-mails through a Website.
(a) tomail
(b) mailto
(c) Both
(a) and (b)
(d) None of these
Answer: (b) mailto attribute is used to send E-mails through a Website.

Q25. Choose the correct syntax to create an E-mail link. CBSE 2014
(a) <a href = “abc@xyz.com”>
(b) <a href = “mailto:abc@xyz.com”>
(c) email = “abc@xyz.com”>
(d) <amail = “abc@xyz.com”>
Answer: (b) <a href = “mailto:abc@xyz.com”>

Q26. To display (X+Y)2, correct HTML code is         CBSE 2013
(a) <sub>(X+Y)2</sub>
(b) X+Y< sup > 2 </sup >
(c) (X+Y)<sup>2</sup>
(d) <sup>(X +Y)2</sup>
Answer: (c) (X+Y) <sup>2</sup> code is correct because superscript have to be placed in between <sup> and </sup> tags.

Inserting Images and Links in HTML Fill in the Blanks [1 Mark each]

Q1. The <img> tag is an ………… tag, that means it has no closing tag.
Answer: empty

Q2. <img> tag is used for …………. images. CBSE 2014
Answer: displaying

Q3. …………… tag is used to create inline images. CBSE 2013, 2012
Answer: <img>

Q4. ……………. is an attribute of the <img> tag which specifies the location or URL of the image to be displayed.
Answer: src

Q5. An attribute is an extra piece of information associated with a …………….
Answer: tag

Q6. The ait attribute provides …………… for an image.
Answer: alternative information

Q7. The value for alt attribute is a text string of upto ………….. characters.
Answer: 1024

Q8. An image to be displayed in a Web page has to cover 25% of the browser window horizontally and 50% vertically. The attributes ………… and ………….of the <img> tag would be used for achieving this.
Answer: height, width

Q9. attribute is used to give border to an image. CBSE 2016
Answer: border

Q10. ………… is a word or image that when clicked take us to another Web page. CBSE 2013
Answer: Hyperlink

Q11. ………… tag is used to connect Web pages. CBSE 2014
Answer: <a>

Q12. ……. are used to connect Web pages. They are created with <a> tag. CBSE 2016
Answer: Hyperlinks

Q13. The …………. tag is considered to establish a hypertext relationship between the current document and another URL.
Answer: <a>

Q14. The ………….. attribute is used for specifying the URL of the anchor tag.
Answer: href

Q15. An ……….. link allows a link to another Web page or another Website. CBSE 2011
Answer: external

Q16. The …………….. attribute of <a> tag is used to provide information or a title for the linked document or Web page.
Answer: title

Q17. An link allows a link to another section on the same or different Web page.
Answer: internal

Q18. A visited link on a Website is generally underlined and …………… in color.
Ans. purple

Q19. The default color of alink attribute is ………… .
Answer: red

Q20. ………… is used to change the color of a visited link. CBSE 2016
Ans. vlink

Q21. Using the ………… type URL, you can create the E-mail hyperlink.
Answer: mailto

Q22. The tag ……….. is used to create superscripts and …………. tag is used to create subscripts on a Web page.
Answer: <sup>, <sub>

Inserting Images and Links in HTML True or False [1 Mark each]

Q1. You can have inserted an image in your Web page which is physically present in your computer.
Answer: True With the help of <img src=”image URL”>, we can insert an image in Web page which is present in our computer.

Q2. If the image you are loading in the Web page is not available, then you want a text to appear in the image placeholder, text attribute lets you define this text.
Answer: False The alt attribute is used to define text to appear in the image placeholder, if image is not visible for any reason.

Q3. No value is specified with alt attribute of <img> tag. CBSE 2012
Answer: False alt attribute provides alternate text for an image if the image is not visible on Web page for any reason.

Q4. String as a value of alt attribute must be enclosed in quotation marks.
Answer: True alt attribute contains string which must be enclosed in quotation marks.

Q5. The general syntax for inline image is <img src = “file name” >.
Answer: True At the place of file name, path of the image is specified. If the image is in the same folder as HTML file, it is not needed to specify full path of an image.

Q6. The default alignment of image is right. CBSE 2014
Answer: False There is no default alignment of image with respect to text in HTML.

Q7. It is not important to specify an integer value as the width of the border of an image.
Answer: False Width takes an integer values that are in pixels.

Q8. The align attribute of the <img> tag is used to specify the text that is to be displayed in case the browser that does not support graphics.
Answer: False alt attribute is used to specify the text that is to be displayed in case the browser which does not support graphics.

Q9. We can put a border around an image by using width attribute. CBSE 2013
Answer: False We can put a border around an image by using border attribute.

Q10. border is an attribute of <a> tag. CBSE 2012
Answer: False border is an attribute of <img> tag.

Q11. The <a> tag is called the align tag. CBSE 2011
Answer: False The <a> tag is called anchor tag.

Q12. The anchor tag <a> signals the beginning of the text.
Answer: False Anchor tag is used to create hyperlinks not text.

Q13. The color of the hyperlinks in an HTML document can be changed.
Answer: True We can change the color of hyperlinks in HTML document.

Q14. Hyperlinks can also be created for links within the same document. Linking within the same document is called external linking.
Answer: False Linking within the same document is called internal linking.

Q15. It is not possible to create link within current document. CBSE 2012
Answer: False You can link various sections of the current document together, which is called internal linking.

Q16. The name attribute of the <a> tag allows the user to create links within the same document. CBSE 2011
Answer: True Because name attribute defines a name of a section in a document.

Q17. You should include a mailto function in the body of your document to allow user to respond to your Web page.
Answer: True The mailto function is used to send E-mails from the Website.

Working with Tables in HTML Class 10 MCQ Questions

Question 1.
Which of these tags belong to table? CBSE 2016
(a) <thead>,<body>,<tr>
(b) <table>,<head>,<tfoot>
(c) <table>,<tr>,<td>
(d) <table>,<tr>,<tt>
Answer: (c),<table>,<tr>, <td> tags are used with table.

Question 2.
Which of the following tags gives a caption to the table?
(a) < caption >
(b) < summary >
(c) < frame >
(d) None of these
Answer:(a) <caption> tag is used to give caption to the table.

Question 3.
Which of the following is used to specify the beginning of a table’s row?
(a) <table>
(b) <tr>
(c) <row>
(d) <begin>
Answer:(b) <tr> tag indicates the beginning of a table’s row.

Question 4.
HTML tag for row is
(a) <colspan>
(b) <tr>
(c) <rowspan>
(d) <td>
Answer:  (b) HTML tag for row is <tr>.

Question 5.
Which tag is used to add columns in the tables?
(a) <colspan>
(b) <td>
(c) <tr>
(d) None of these
Answer: (b) <td> is used to add columns in the tables.

Question 6.
The tag is used to specify the individual table data in a table.
(a) <tr>
(b) <td>
(c) <th>
(d)<table>
Answer:(b)The <td> tag is used to specify the individual table data in a table.

Question 7.
In order to add border to a table, border attribute is specified in which tag?
(a) <th>
(b) <table>
(c) <td>
(d) <tr>
Answer:(b) border attribute is specified in <table> tag.

Question 8.
The attribute used to set the border color of a table is
(a) border
(b) bordercolor
(c) color
(d) border color
Answer:(b) bordercolor is used to set the border color of a table.

Question 9.
The frame attribute contains types of values.
(a) 9
(b) 3
(c) 6
(d) 4
Answer: (a) The frame attribute contains 9 types of values.

Question 10.
Which of the following is an attribute of < table > tag?
(a) src
(b) cellpadding
(c) link
(d) bold
Answer:(b) cellpadding is an attribute of <table> tag.

Question 11.
Which one of the following is not an option for aligning data in a table?
(a) justify
(b) right
(c) left
(d) center
Answer:(a) justify option is not used for aligning data in a table.

Question 12.
Which attribute of the < table > tag is used to set an image in the background of a table?
(a) bgcolor
(b) background
(c) frame
(d) rules
Answer:(b) background attribute is used to set an image in the background of a table.

Question 13.
The attribute used to specify the background cofor of a table is
(a) color
(b) bgtable
(c) backcolor
(d) bgcolor
Answer: (d) bgcolor is used to specify the background color of a table.

Question 14.
The two common attributes of the <img> and the <table> tag are
(a) src and height
(b) height and width
(c) border and src .
(d) they do not have any common attributes.
Answer:(b) height and width are common attributes of the <img> tag and the <table> tag.

Question 15.
border, frame, cellspacing, cellpadding, align are the attributes of
(a) <body> tag
(b) <img> tag
(c) <table> tag
(d) None of these
Answer: (c) border, frame, cellspacing, cellpadding, align are the attributes of <table> tag.

Question 16.
Which of the following is not an attribute of < table > tag?
(a) border
(b) background
(c) bgcolor
(d) src
Answer:(d) src is not an attribute of <table> tag.

Question 17.
In the <td> tag, td stands for
(a) Table Data
(b) Table Time and Date
(c) Table Date
(d) None of these
Answer:(a) td stands for Table Data.

Question 18.
What is the correct HTML code to left align the content inside a table cell?
(a) <td valign = “left”>
(b) <td align = “left”>
(c) <td left align >
(d) <td left>
Answer:(b) <td align = “left”>

Question 19.
Choose the correct HTML code to right align the content inside a table cell.
(a) <td align = “right” >
(b) <td valign = “right” >
(c) <td rightalign>
(d) <td right = “align” >
Answer: (a) <td align =”right”>

Question 20.
Combining two or more cells in a table on a Web page is called
(a) merging
(b) spanning
(c) combining
(d) None of these
Answer:(b) Combining two or more cells in a table on a Web page is called spanning.

Question 21.
Which attribute tells, how many rows a cell should span?
(a) colspan = n
(b) rowspan = n
(c) Both (a) and (b)
(d) None of these
Answer:(b) rowspan = n will tell how many rows a cell should span.

Question 22.
rowspan = n can be added to only which tag?
(a) <hr>
(b) <table>
(c) <td>
(d) <tr>
Answer: (r) rowspan = n can be added to only <td> tag.

Question 23.
Which attribute of <td> tag is used to merge two or more columns to form a single column?
(a) colspan
(b) cellspacing
(c) cellpadding
(d) rowspan
Answer: (a) colspan attribute is used to merge two or more columns to form a single column.

Question 24.
colspan = n can be added to tag.
(a) <hr>
(b) < table >
(c) <td>
(d) <tr>
Answer:(r) colspan = n can be added to <td> tag.

Question 25.
The attribute helps to align data vertical in a single cell.
(a) align
(b) valign
(c) halig
(d) Both (b) and (c)
Answer:(b) valign attribute is used to align data vertically in a single cell.

Question 26.
In the <th> tag, th stands for
(a) Table Heading
(b) Total Heading
(c) Table Header
(d) All of the above
Answer: (c) th stands lor Table Header

Working with Tables in HTML Class 10 Fill in the Blanks [1 Mark each]

Question 1.
To insert a table on a Web page, we use  ………………. tag.
Answer: <table>

Question 2.
The tag to start a table is
Answer:<table>

Question 3.
…………… tag is used to insert data into a table.
Answer: <td>

Question 4.
The <td> tag is a …………………
Answer: container

Question 5.
The……………. attribute is used to display a specific portion of a table border.
Answer: frame

Question 6.
frame attribute is used with…………attribute.
Answer: border

Question 7.
There are total………… values for rules attribute in <table> tag.
Answer: 5

Question 8.
In the rules attribute, the………… value helps to display a table border only between rows.
Answer: rows

Question 9.
Cellspacing is used to create space between different…………… in a table.
Answer: cells

Question 10.
The….. is an attribute of the < table > tag to set the distance between the cell content and its boundary.
Answer: cellpadding

Question 11.
To set image as background of an HTML table, you can use………………… attribute.
Answer: background

Question 12.
By default, color of a table is…………..
Answer: white

Question 13.
The height and width attributes of < table > tag are specified in terms of………….. or percentage.
Answer: pixels

Question 14.
The… attribute is used to provide information about a table.
Answer: summary

Question 15.
<td> tag can only be present inside……….
Answer: <tr>

Question 16.
The………………. attributes is used to combine the cells vertically.
Answer: rowspan

Question 17.
The……………… attribute is used to span two or more columns in a table.
Answer: colspan

Question 18.
The……………… attribute is used to align the data vertically within cells.
Answer: valign

Question 19.
The <tr> tag can only be present inside…………tag.
Answer: <table>

Question 20.
The <thead> tag is used to specify the………..part of the table.
Answer: header

Working with Tables in HTML Class 10 True or False [1 Mark each]

Question 1.
A cell is an intersection of a row and a column.
Answer: True A cell is an intersection of a row and a column.

Question 2.
The cellpadding attribute is used with <td> tag.
Answer: False The cellpadding is used with <table> tag.

Question 3.
<caption> is placed just above the < table> tag.
Answer:False <caption> tag is placed inside the <table> tag.

Question 4.
<td> will make the text bold.
Answer:False <td> is a table data. It is used to define a cell of a table that contains data.

Question 5.
The border is an attribute of <a> tag.
Answer:F3lSB The border is an attribute of <table> tag.

Question 6.
The default value of border attribute is 1.
Answer:False The default value of border attribute is 0.

Question 7.
The cols value in the rules attribute, allows you to display table border only between columns.
Answer:True The cols value in the rules attribute is drawn between columns only.

Question 8.
The cellspacing attribute tells the browser how much space to include between the walls of the table.
Answer:False cellspacing attribute is used to create space between different cells in a table.

Question 9.
< caption > tag gives heading to a Web page.
Answer:False <caption> tag gives title or caption for the table.

Question 10.
cellpadding attribute is used with <body> tag.
Answer:False cellpadding attribute is used with <table> tag.

Question 11.
The rowspan attribute with < table > tag is used to merge more than one cells row wise.
Answer:True The rowspan attribute merges the cells row wise in a table.

Question 12.
The rowspan attribute is used to make a cell span multiple columns.
Answer:False The rowspan attribute is used to make a cell span multiple rows.

Question 13.
The align and valign are the attributes used with <td> tag to set the alignment of data in a cell.
Answer:True The align and valign attributes are used to set alignment of the data.

Question 14.
The <td> tag (column setting) have higher priority than <tr> tag (row setting).
Answer:True The <td> tag (column setting) have higher priority than <tr> tag (row setting).

Question 15.
Table row <tr> tag can accept one attribute.
Answer:False The <tr> tag can accept many attributes.

Question 16.
<th>‘tag is used to specify the column heading in a table.
Answer:True <th> tag is used to specify the column heading in a table.

Computer MCQ Questions

How to print your HTML with style | CSS Printing with Examples

How to print your HTML with style

Here is the complete tutorial on How to print your HTML with style using CSS. By viewing this page, you will get perfect knowledge on CSS printing, @media print rule, and many more concepts related to it. Just click on the links provided below and start learning regarding print CSS.

CSS Printing

There is a possibility to use CSS for altering the appearance of your web page when it’s printed on paper. You can define one font for the screen version and another for the print version.

The following piece of code defines various font families for screen and print in CSS.

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

CSS @media Print

If you’ve prepared any responsive design, you’ll then know about the@mediarule. As well as diverse screen sizes, @media also let you target “print” media. Here’s an example:

@media print {
  /* These styles will only be used when the page is printed or saved to PDF. */
  h1 { font-size: 16pt; }
}

Using this rule, you can define your standard CSS as normal and then join some custom styles that will only be utilized when printing.

p { margin: 1em 0; }

@media print {
  /* Hide related article links when printing. */
  .related-articles { display: none; }
}

If you want to “zero out” all your standard screen styles and begin from scratch, you can wrap your screen styles in another @media rule:

@media screen {
  /* standard styles here. */
}

@media print {
  /* print styles here. */
}

Do Read:

Page break properties

To ensure the content flows evenly over pages, you’ll require control when content gets split among pages. For instance, it looks awkward if a large heading resembles at the bottom of a page – you want it to commence on a new page rather. Likewise, you may want to evade a table spanning multiple pages if possible.

You can make this using page-break-beforepage-break-after, and page-break-inside. Also, You can set the value for these properties to always or avoid.

h1 {
  /* h1 elements always start on the top of a new page. */
  page-break-before: always;
}

section.city-map {
  /* this section always occupies it's own page or pages. */
  page-break-before: always;
  page-break-after: always;
}

table {
  /* tables don't split across pages if possible. */
  page-break-inside: avoid;
}

Repeat table headings

If your document has tables that span many pages, it’ll be difficult to read when printed except the table headers are repeated at the origin of each page. This is moderately easy to accomplish – simply use the thead and tbody elements in your table.

<table>
  <thead>
    <tr>
      <th>City</th>
      <th>Population</th>
  </thead>
  <tbody>
    <tr>
      <td>Sydney</td>
      <td>4.627 million (2018)</td>
    </tr>
  </tbody>
</table>

thead

Adding or removing content

Sometimes you may require to add content that’s only displayed when printing. For instance- you might want to link URLs to be printed. You can accomplish this with the help of:after pseudo-element:

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

You may also desire to hide or show specific elements only when printing. By combining @media and display this can be made pretty quickly.

/* hide the watermark on screens. */
.watermark {
  display: none;
}

@media print {
  /* hide the navidation when printing. */
  nav {
    display: hide;
  }
  /* show the watermark when printing */
  .watermark {
    display: initial;
  }
}

Use emulate CSS media for the development.

In order to fasten up your feedback loop while developing, you can arrange your browser to display print styles. To perform this in Chrome on Mac, open developer tools, later use the command-shift-P shortcut for “Run Command” and search for “Emulate CSS print media type”.

emulate

Other browsers will have a related feature in their dev tools.

Unfortunately, to view page breaks you’ll require to print to PDF manually every moment.

Orphans and Widows

The orphans and widows properties manage how the text in an element is split over pages. Sometimes tweaking these values can increase the readability of your printed document.

p {
  /* if there aren't at least three lines before the page
     break, move the element to the start of a new page. */
  orphans: 3;
}

widows-orphans

The below-left side orphans is set to 2, so the second paragraph starts before the page break. By settingorphansto 3, as on the right, the paragraph is taken down to the start of the next page.

The widows property is the inverse of orphans – it defines the minimum number of lines that can be at the origin of a new page.

Advanced tip: the @page rule

With the @page rule, you can tailor-made the page margin for particular pages.

@page:first {
  /* No margin on the first page. */
  margin: 0;
}

@page {
  /* Set a margin on all other pages. */
  margin: 2cm;
}

Unfortunately, browser support for this is currently a little inadequate and you can only use the :first:last:left, :right, and:blank pseudo-selectors to choose pages.

CSS Specificity | Definition, Syntax, Examples | Specificity Rules and Hierarchy of CSS Specificity

In this tutorial, beginners and experienced CSS learners can find the complete guide on Specificity in CSS. Just take a look at the below available direct links and have a quick reference on CSS Specificity.

What is Specificity in CSS?

CSS Specificity is the set of rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher the point value it accrues, and the likelier it is to be present on the element’s style.

Example:

<p class="container">Roger</p>

In CSS, we can specify like:

.container {
  color: yellow;
}

also, we can target the paragraph tags like:

p {
  color: red;
}

By understanding how styles are applied, we can ensure the styles we want to display are being rendered.

CSS can quickly become unruly when we don’t stop to think about architecture for our style sheets, and instead throw a ton of CSS selectors around without thinking about specificity.

By making the most of CSS Specificity, we ensure that our code is organized, and our selectors won’t conflict with one another.

Also Read:

Specificity Rules

Inline CSS>Internal CSS>External CSS

  • CSS style implemented by referencing outside stylesheet that has the lowest precedence and is overridden by Internal and inline CSS.
  • Internal CSS is overridden by inline CSS.
  • Inline CSS has the highest priority and overrides all other selectors.

Example:

<html>
  
<head>
    <link rel="stylesheet" type="text/css" href="external.css">
    <style type="text/css">
        h1 {
            background-color: red;
            color: white;
        }
          
        h2 {
            color: blue;
        }
    </style>
</head>
  
<body>
    <h1>
        Internal CSS overrides external CSS
    </h1>
    <h2 style="color: green;">
        Inline CSS overrides internal CSS
    </h2>
</body>
  
</html>

Output:

css specificity rules example

Hierarchy of CSS Specificity

Every element selector has a position in the Hierarchy of specificity in CSS. The following four categories determine the specificity level of a selector:

  • An inline style is connected directly to the element to be styled. Example: <h1 style=”color: #ffffff;”>.
  • IDs – An ID is a unique identifier for the page elements, like #navbar.
  • Classes, attributes and pseudo-classes – This category contains .classes, [attributes] and pseudo-classes like :hover, :focus etc.
  • Elements and pseudo-elements – This category consists of element names and pseudo-elements, for instance: h1, div, :before and :after.

How to Calculate Specificity?

Remember the process of calculating specificity by having a glance at the below point.

Begin at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class, or pseudo-class, add 1 for each element name or pseudo-element.

Examine these three code fragments:

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

Then, the result will produce like this:

The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)

As 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and hence it will be implemented.

How Does it Work?

By following the three buckets of CSS specificity, you can learn at a high level of knowledge on how it falls under:

1. Type Selectors & Pseudo-Element

type pseudo

For Example:

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

2. Class Selectors, attribute selectors, and pseudo-class selectors

class pseudo class attribute

Example:

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

3. ID selectors

id selector

Example:

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Also, there is in-line styling which doesn’t use any CSS rather specify the style in-line with the HTML.

Example:

<p style="color: red">Test</p> /* 1 0 0 0 */

!important Rule

There is another property !important that doesn’t follow any specificity rather it is applied overriding all the CSS properties and specificities.

p {
  font-size: 20px !important;
}

Tips on CSS Specificity

  • The universal selector (*) has no specificity value (0,0,0,0)
  • Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
  • There’s a highly debatable topic related to using !importantas it overrides all the CSS values. It is also a good practice not to use any id selectors but class selectors.
  • The pseudo-class : not() adds no specificity by itself, only what’s inside its parentheses.

How to Setup Tailwind with PurgeCSS and PostCSS? | Tailwind Installation and Usage

How to Setup Tailwind with PurgeCSS and PostCSS

In this tutorial, we will learn how to use Tailwind with any kind of project. Know how to set up Tailwind with PurgeCSS and PostCSS, how to create a Tailwind File, what do PurgeCSS and PostCSS mean. This tutorial makes you familiar with the concept of How to Remove Unused CSS using the PurgeCSS.

Tailwind Installation

We have to install tailwind via npm or yarn:

npm init -y (if its a barebone project, -y stands for yes)
npm install tailwindcss

Create the Configuration File

We have to create a configuration for a tailwind to use:

npx tailwind init

This will create a file named tailwind.config.js in the root location of our project folder.

PostCSS Config Tailwind

Tailwind needs PostCSS (PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations) and autoprefixer (Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you) to work. So we need to apply that in the postcss.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

Note: If the postcss.config.js doesn’t exist, we have to create one.

We need to install PostCSS and autoprefixer from npm too:

npm install autoprefixer
npm install -g postcss-cli (-g stands for global)

How to Create the Tailwind CSS File?

Now, we will create a CSS file (style.css) and add these lines at the top:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create the build command

We need to specify a build command that will help us to generate the actual CSS file after compiling with PostCSS and autoprefixer. For that, we need to add the command to the package.json file at scripts like:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}

Build Tailwind

For building the final CSS file we need to run the command npm run build in the root of the project folder.

The resulting file is in static/dist/tailwind.css

Automatically regenerate the CSS upon file changes

There is a great npm package that will compile our CSS in real-time without running the build command every time after edits. For that we need to install the watch using the command:

npm install watch

Then we need to edit the package.json file at scripts like:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Now for running we simply need to execute the command npm run watch and it’s all good.

Trim the File Size

If we check the final CSS file i.e after building, we can see that it’s huge in size. That large file is never appropriate for web pages. For that, we can actually trim the file to make it smaller than the original.

We need to install two more npm packages:

npm install cssnano
npm install @fullhuman/postcss-purgecss

What is PurgeCSS?

PurgeCSS is a development tool used for removing the unused CSS in a Project. It is the default library to control the Tailwind CSS Bundle Sizes. It removes unused styles and optimizes CSS Build Sizes.

How to Remove Unused Classes from Tailwind with PurgeCSS?

To remove unused CSS we use the following code. Then we add this to our PostCSS configuration file postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset: 'default'
    }),
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

In development, avoid too much processing

In development, we can use this just to add prefixes and remove comments. We need to edit the postcss.config.js like:

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production'
      ? cssnano({ preset: 'default' })
      : null,
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

 

CSS Attribute Selectors | Definition of Attribute selectors in CSS | Syntax & Example Program with Attribute Selectors

CSS Attribute Selectors

In CSS, to target elements with certain attributes, there is a possibility by using attribute selectors. The CSS [attribute] selector matches elements on the basis of the presence or value of a given attribute. Let’s get complete knowledge on attribute selectors on CSS by going through these quick links available below.

Attribute selectors in CSS

CSS Attribute Selector is a specific type of selector that is applied to select the HTML elements with a specific attribute and/or attribute(s) value that are associated with it.

An attribute selector can be made by putting the attribute — (not obligatory) with a value — within the square brackets ([….]). Let’s check the syntax of CSS Attribute Selectors from the below section.

Syntax:

The following syntax is classified on the basis of an attribute or attribute value while styling a specific HTML element:

[attribute]
[attribute="value"]
[attribute~="value"]
[attribute|="value"]
[attribute^="value"]
[attribute$="value"]
[attribute*="value"]

Attribute presence selectors

One of the first attribute selectors is Attribute presence selectors. By using this attribute selector in CSS, we will check if an element has an attribute using the square brackets[]syntax.

p[key] will select all p (paragraph) tags in the page that have an key attribute, regardless of its value of the content:

p[key] {
  /* ... */
}

Do Read:

Exact attribute value selectors

We can check for an attribute value using the =, then the CSS will only be applied to the attribute matching the exact content:

p[key="my-key"] {
  /* ... */
}

Match an attribute value portion

There are some operators that are used to match an attribute value portion like as follows:

  • = it checks for the exact value, and other operators are listed under
  • *= notes if the attribute contains the partial
  • ^= notes if the attribute starts with the partial
  • $= checks if the attribute ends with the partial
  • |= checks if the attribute starts with the partial and it’s followed by a dash (common in classes, for example), or just contains the partial
  • ~= checks if the partial is contained in the attribute, but separated by spaces from the rest

If we add anisimply before the closing bracket, the check will be case insensitive. Otherwise, all the checks above are case-sensitive.

Styling Forms with Attribute Selectors

The attribute selectors are especially helpful for styling forms without class or id. For example, let’s look at the below code:

input[type="text"], input[type="password"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background: yellow;
}
input[type="submit"] {
    padding: 2px 10px;
    border: 1px solid #804040;
    background: #ff8040;
}

Output:

CSS Attribute Selectors example output

How to Continuously Rotate an Image using CSS? | CSS Continuous Image Rotation

How to Continuously Rotate an Image using CSS

If you are searching for a code in CSS that can rotate any image? Then this is the right tutorial you are looking for. We have covered everything like How to Continuously Rotate an Image using CSS Animations.

Image Element has three classes namely rotate, linear, infinite. In CSS Stylesheet we need to create a declaration block for each class. These classes are called utility or helper classes.

.rotate Code Block Declaration

.rotate {
animation: rotation 2s;
}

This will not make anything. We can add an animation property to the element to rotate it:

animation: rotation 2s infinite linear;

Or we can add a class namely rotate to a particular element to target that:

.rotate {
  animation: rotation 2s infinite linear;
}

We can tweak the 2s to slow down or speed up the rotation period of the element.

Then we can add the keyframes with transform property for it to make rotation:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Now the element should rotate. If you reload your browser you will see the image rotating a single time over 2 seconds. If you want to rotate the image continuously you need to change the animation transition timing from default ease to a consistent speed curve known as linear.

Do Check:

.Linear Code Block Declaration

.linear {
animation-timing-function: linear;
}

Reload your browser tab so that image will rotate to spin from start to end with a consistent speed rate.

.infinite Code Block Declaration

Let’s us make our image rotate infinitely by declaring our .infinite code block

.infinite {
animation-iteration-count: infinite;
}

We can declare all our animation properties in a single line and a single class as follows

.rotate-image {
animation: rotation 2s linear infinite;
}

This can save a lot of code but for learning purposes, it is better to break things into smaller pieces. You can understand how individual components work.

CSS Colors | Named Colors in CSS | Ultimate Guide to Learn CSS Color Names with Example

CSS Colors

The default HTML pages that are rendered into the browser are pretty bland. For example, it’s just a web page using black and white content and blue links.

We can add colors to CSS to make the webpage more attractive.

For colors in CSS, we have properties like:

  • color
  • background-color
  • border-color

All of them accept the color value when it has in various forms.

This Tutorial of CSS Colors includes the following: 

CSS <color> Keyword

A <color> can be determined in any of the following ways:

  • Applying a keyword (such as blue or transparent)
  • Using the HSL cylindrical-coordinate system (through the hsl() and hsla() functional notations)
  • Using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba()functional notations)

The list of 17 original CSS Colors are listed as follows:

Color Keyword Hex Value
black #000000
gray #808080
silver #c0c0c0
white #ffffff
maroon #800000
red #ff0000
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
navy #000080
blue #0000ff
teal #008080
aqua #0000ff
orange #ffa500

Syntax

The syntax of the <color> datatype is defined using one of the options enlisted below.

For Example:

p {
  color: red;
}

Read More:

Named colors

Previously, CSS started with 16 colors but now we have a wide range of color names list. There are some predefined colors that we can just assign to the CSS, like:

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • blue
  • blueviolet
  • brown
  • burlywood
  • cadetblue
  • chartreuse
  • chocolate
  • coral
  • cornflowerblue
  • cornsilk
  • crimson
  • cyan
  • darkblue
  • darkcyan
  • darkgoldenrod
  • darkgray
  • darkgreen
  • darkgrey
  • darkkhaki
  • darkmagenta
  • darkolivegreen
  • darkorange
  • darkorchid
  • darkred
  • darksalmon
  • darkseagreen
  • darkslateblue
  • darkslategray
  • darkslategrey
  • darkturquoise
  • darkviolet
  • deeppink
  • deepskyblue
  • dimgray
  • dimgrey
  • dodgerblue
  • firebrick
  • floralwhite
  • forestgreen
  • fuchsia
  • gainsboro
  • ghostwhite
  • gold
  • goldenrod
  • gray
  • green
  • greenyellow
  • grey
  • honeydew
  • hotpink
  • indianred
  • indigo
  • ivory
  • khaki
  • lavender
  • lavenderblush
  • lawngreen
  • lemonchiffon
  • lightblue
  • lightcoral
  • lightcyan
  • lightgoldenrodyellow
  • lightgray
  • lightgreen
  • lightgrey
  • lightpink
  • lightsalmon
  • lightseagreen
  • lightskyblue
  • lightslategray
  • lightslategrey
  • lightsteelblue
  • lightyellow
  • lime
  • limegreen
  • linen
  • magenta
  • maroon
  • mediumaquamarine
  • mediumblue
  • mediumorchid
  • mediumpurple
  • mediumseagreen
  • mediumslateblue
  • mediumspringgreen
  • mediumturquoise
  • mediumvioletred
  • midnightblue
  • mintcream
  • mistyrose
  • moccasin
  • navajowhite
  • navy
  • oldlace
  • olive
  • olivedrab
  • orange
  • orangered
  • orchid
  • palegoldenrod
  • palegreen
  • paleturquoise
  • palevioletred
  • papayawhip
  • peachpuff
  • peru
  • pink
  • plum
  • powderblue
  • purple
  • rebeccapurple
  • red
  • rosybrown
  • royalblue
  • saddlebrown
  • salmon
  • sandybrown
  • seagreen
  • seashell
  • sienna
  • silver
  • skyblue
  • slateblue
  • slategray
  • slategrey
  • snow
  • springgreen
  • steelblue
  • tan
  • teal
  • thistle
  • tomato
  • turquoise
  • violet
  • wheat
  • white
  • whitesmoke
  • yellow
  • yellowgreen

also transparent and currentColor which inherits the border-color for example.

We have plenty of options instead of these Named colors.

RGB and RGBa Color Values

We can usergb()function to get color in the form of RGB which is base on three different colors i.e red, green, and blue. From 0 to 255:

a {
  color: rgb(255, 125, 25);
    background-color: rgb(125,100, 200);
}

The below table is an example to display few colors utilizing RGB values.

Color Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)

rgba() lets us use the alpha channel that creates a transparency effect. That can be a number from 0 to 1:

a {
    background-color: rgba(100, 200, 150, 0.5);
}

Hexadecimal notation

Probably the most common (yet least intuitive) way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F. Hex values are always prefixed with a # symbol.

ul { color: #8050c8; }    /* purple */

Shorthand Notation for Hex Values

For instance, in case both digits of the red, green, and blue values are the same, then you may utilize the short three-digit notation as shown in the below example codes.

p { color: #000; }     /* black same as #000000 */
p { color: #fff; }    /* white same as #ffffff */
p { color: #f00; }     /* red: same as #ff0000 */
h1 { color: #0f0; }    /* lime: same as #00ff00 */
ul { color: #ff0; }    /* yellow: same as #ffff00 */

HSL and HSLa color codes

The HSL color model is one of the least used, but gaining traction because can be more intuitive to use when working with shades and color adjustments.

HSL stands for hue, saturation, and lightness. Hue is defined by a color wheel. Each color represents a degree on the wheel.

Example:

a { background-color: hsl(240,100%, 75%); } /* shade of blue */

HSLA is simply the HSL color model with the addition of an alpha channel. This works exactly the same way as the alpha channel in RGBA.

a { background-color: hsla(240,100%, 75%, 0.5); } /* shade of blue */

Example Program using CSS Colors Properties

Let’s see an example of CSS colors, which covers the above properties from below.

<html>   
    <head>   
        <title>CSS hsl color property</title>   
        <style>   
            h1{   
                text-align:center;   
            }   
            #rgb{  
              color:rgb(255,0,0);  
            }  
            #rgba{  
              color:rgba(255,0,0,0.5);  
            }  
            #hex{  
              color:#EE82EE;  
            }  
            #short{  
              color: #E8E;  
            }  
            #hsl{  
              color:hsl(0,50%,50%);  
            }  
            #hsla{                
              color:hsla(0,50%,50%,0.5);  
            }  
            #built{  
              color:green;  
            }  
        </style>   
    </head>   
    <body>   
        <h1 id="rgb">   
             Hello World. This is RGB format.  
        </h1>   
        <h1 id="rgba">   
          Hello World. This is RGBA format.  
     </h1>   
     <h1 id="hex">   
      Hello World. This is Hexadecimal format.  
 </h1>   
 <h1 id="short">   
  Hello World. This is Short-hexadecimal format.  
</h1>   
 <h1 id="hsl">   
  Hello World. This is HSL format.  
</h1>   
<h1 id="hsla">   
  Hello World. This is HSLA format.  
</h1>   
<h1 id="built">   
  Hello World. This is Built-in color format.  
</h1>   
    </body>   
</html>

Output:

css colors example output

Making a Table Responsive Using CSS | How to Create a Responsive Table using CSS?

Making a Table Responsive Using CSS

Creating a Table can be a quite challenging task especially if we are to make it responsive. Styling the tables can be hectic as not all themes support responsive designs. There is a solution to overcome this and we can use CSS to create responsive designs that fit all screen types. In this tutorial, we have mentioned what is a Responsive Table and How to Create One using CSS by considering necessary syntax, example programs.

no responsive

Responsive Tables

Responsive design is completely about adjusting designs to fit screens of different sizes. A Responsive Table will display a horizontal scroll bar if the screen is small to fit the entire content. You can resize the browser window to see the effect.

Read More:

How to Create a Responsive Table using CSS?

In order to create a Responsive Table, you need to add the container element with overflow-x:auto around the <table>

<div style="overflow-x:auto;">
<table>
...
</table>
</div>

CSS Table Properties

Property Description
border Sets the complete border properties in one declaration
border-collapse It indicates whether or not table borders should be collapsed
border-spacing It specifies the distance between adjacent cells borders
caption-side Indicates the placement of a table caption
empty-cells Indicates whether or not to display borders,  background on the table’s empty cells.
table-layout Indicates the layout algorithm to use for a table

Workaround

We’re going to use “responsive design” principles to detect if the screen is smaller than the maximum height and width of our table. If it is, we will reformat the table.

Just a normal table in HTML is like:

<table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Mainak</td>
        <td>Das</td>
        <td>Intern</td>
    </tr>
    <tr>
        <td>Soham</td>
        <td>Debnath</td>
        <td>Intern</td>
    </tr>
    </tbody>
</table>

Some style for the table (particularly for desktops and laptops):

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

The small screen i.e the screen smaller than the desktop and/or laptop responsive stuff comes in now. We are aware that our minimum table width is about 760px so we will set up our media query to take effect if it is narrower than that. We will focus on iPads as they are right in that zone.

We are going to force the table not to behave as a table by setting every table-related element to be block-level. Then by placing the zebra striping, we have added, it is like each table row becomes a table in itself, and is as wide as the screen. There will be no more horizontal scrolling! For each “cell”, we’ll use CSS generated content (:before) to apply the label, so that we are aware of what each bit of data means.

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { border: 1px solid #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    
    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Secret Alias"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

And so, desktops and/ or laptops get the regular table experience. Whereas Mobiles and other smaller screens get reformatted and easier to explore table.

responsive table