Download CSS and HTML: Understanding Types of CSS, Box Model, and Semantic HTML and more Exercises Web Design and Development in PDF only on Docsity!
Prabin Khokhali Section: M Q. What are the types of CSS? How to link an external style sheet? A. There are four types of CSS.
- Inline Style
- Internal/Embedded Style
- External Style
- Imported Style Inline styles are coded in the body of the web page as an attribute of an HTML tag. The style applies only to the specific element that contains it as an attribute. Embedded styles (also referred to as internal styles) are defined within a style element in the head section of a web page. These style instructions apply to the entire web page document. External styles are coded in a separate text file. This text file is associated with the web page by configuring a link element in the head section. Imported styles are similar to external styles in that they can connect styles coded in a separate text file with a web page document. An external style sheet can be imported into embedded
styles or into another external style sheet by using the @ import directive.
The flexibility and power of CSS are best utilized when the CSS is external to the web page document. An external style sheet is a text file with a .css file extension that contains CSS style rules. The external style sheet file is associated with a web page by using the link element. This approach provides a way for multiple web pages to be associated with the same external style sheet file. The external style sheet file does not contain any HTML tags; it contains only CSS style rules.
The link element associates an external style sheet with a web page. It is placed in the head section of the page. The link element is a stand-alone, void tag. When coding in HTML5, two attributes are used with the link element: rel and href. The value of the rel attribute is "stylesheet". The value of the href attribute is the name of the style sheet file. Code the following in the head section of a web page to associate the document with the external style sheet named color.css:
Inside color.css [body { background-color: #0000FF; color: #FFFFFF; }] Ex:
External Styles
This web page uses an external style sheet.
This page is associated with an external style sheet. Q. Explain about CSS Box model.
Padding The padding area is between the content and the border. The default padding value is zero. When the background of an element is configured, the background is applied to both the padding and the content areas. Use the padding property to configure an element’s padding. Border The border area is between the padding and the margin. The default border has a value of 0 and does not display. Use the border property to configure an element’s border. Margin The margin determines the empty space between the element and any adjacent elements. The solid line that contains the margin area does not display on a web page. The margin Property Use the margin property to configure margins on all sides of an element. The margin is always transparent; the background color of the web page or parent element shows in this area. Browsers have default margin values set for the web page document and for certain elements such as paragraphs, headings, forms, and so on. Use the margin property to override the default browser values. To configure the size of the margin, use a numeric value (px or em) or a percentage. To eliminate the margin, configure it to 0 (with no unit). Use the value auto to indicate that the browser should calculate the margin to configure a centered page layout. Q. What is Semantic HTML? A. Semantic HTML is that which provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, and so on. There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages — they are known as semantic html/markup. For example, you are going to meet the **** element that allows you to indicate where emphasis should be placed on selected words and the **** element which indicates that a block
of text is a quotation. Browsers often display the contents of these elements in a different way. For example, the content of the **** element is shown in italics, and a **** is usually indented. But you should not use them to change the way that your text looks; their purpose is to describe the content of your web pages more accurately. The reason for using these elements is that other programs, such as screen readers or search engines, can use this extra information. For example, the voice of a screen reader may add emphasis to the words inside the **** element, or a search engine might register that your page features a quote if you use the **** element. The use of the element indicates that its content has strong importance. For example, the words contained in this element might be said with strong emphasis. **** The **** element indicates emphasis that subtly changes the meaning of a sentence. **** The **** element is used for longer quotes that take up an entire paragraph. Note how the element is still used inside the
element. **** The **** element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the **** element, however Internet Explorer does not therefore many people avoid using the **** element. **** If you use an abbreviation or an acronym, then the **** element can be used. A
title attribute on the opening tag is used to specify the full term. **** When you are referencing a piece of work such as a book, film or research paper, the **** element can be used to indicate where the citation is from. **** The first time you explain some new terminology (perhaps an academic concept or some jargon) in a document, it is known as the defining instance of it. The **** element is used to indicate the defining instance of a new term.
