Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
190 views

Understanding CSS: - HTML Selector

CSS allows for more versatile presentation of web content than HTML alone. It works with existing HTML tags to define their style properties like font, size, color, and position. There are different types of CSS rules that can select HTML elements to style, including rules that target elements by their tag name, class, or ID. CSS rules contain selectors that specify the targeted HTML along with declaration blocks defining the styling through property-value pairs. CSS can define styles inline within HTML, embedded in the page head, or externally in separate files linked to HTML documents.

Uploaded by

ErwinMacaraig
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
190 views

Understanding CSS: - HTML Selector

CSS allows for more versatile presentation of web content than HTML alone. It works with existing HTML tags to define their style properties like font, size, color, and position. There are different types of CSS rules that can select HTML elements to style, including rules that target elements by their tag name, class, or ID. CSS rules contain selectors that specify the targeted HTML along with declaration blocks defining the styling through property-value pairs. CSS can define styles inline within HTML, embedded in the page head, or externally in separate files linked to HTML documents.

Uploaded by

ErwinMacaraig
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Understanding CSS

Introduction
HTML lacks versatility when it comes to presenting various kinds of content that Web designers have come to demand. In fact HTML was designed to allow authors to define the structure of a document for distribution on a network such as the Web. Its nature is to show how the page should be organized. The W3C designed Cascading Style Sheets to fill the design void of straight HTML. Rather than adding more tags to set the appearance and style, CSS works directly with existing HTML tags to them how to behave.

What is a Style?
Styles collect all the different properties, such as: Font family Size Color Position Background Borders Spacing Lists

that can be applied to text, titles, headers, captions, tables and so on.

What are Cascading Style Sheets?


Although CSS works with HTML, it is not HTML. Rather, CSS is a separate code that enhances the abilities of HTML by allowing you to redefine the way that existing tags display their content. The CSS code can be either embedded directly in the HTML file of linked to it. Regardless of where its located, the users browser will interpret this code by using its particular rendering engine to apply the CSS to the HTML and then display the page in the browser window.

Types of CSS Rules


A CSS rule specifies the HTML to which a style definition applies and then defines the style or how the selected HTML should behave in the browser window. The three most common selectors or ways to select the HTML to which a style applies are:

HTML selector
The HTML elements name is used as a selector to redefine the associated HTML tag. For example, the selector for the <h1> tag is h1. The HTML selector is used in a CSS rule to redefine how the tag displays an HTML tag.

h1 { font: bold 12pt times; }

Class Selector
A class is a free agent that can be applied to any HTML tag. Because it can be applied to multiple HTML tags, a class is the most versatile type of selector .theClass { font: bold 12pt times; }

ID Selector
Much like classes, IDs can be applied to any HTML tag, but only once on a given page to a particular HTML tag, to create an object for use with a Javascript function #theobject { position: absolute; top: 10px; }

The Parts of A CSS Rule


All CSS rules consist of a selector and a declaration block. The declaration block which is surrounded by curly braces is made up of declarations, which are pairs of properties and values separated by a semicolon (;): Selectors start each rule, appearing before the left curly brace. The selector can be an HTML tag selector, a class, an ID or a combination of these Properties identify the style that is being defined. There are several dozen properties, each responsible for an aspect of the page contents behavior and appearance. Values are assigned to a property to define its nature.

The basic syntax of a CSS rule.

Where to put CSS rules


In an HTML tag within the body of your document, to affect a single tag in the document, to affect a single tag in the document. This type of rule is often referred to as inline rule In the head of a document, to affect a single Web page. This type of rule is called an embedded rule In an external document that is then linked or imported into your HTML document to affect an entire Web site. This type of rule is called an external rule.

Coding CSS
The real advantage of using CSS instead of HTML is that by changing a few lines of code, you can change the appearance of every page of your Web site.

Adding Styles To an HTML Tag: Inline

Adding Styles To A Web Page Page: Embedded


The main use for CSS is to define style rules for an entire document (Web Page). To do this, you can embed your style rules in the head of the document within a style element. Placing styles in a common location lets you easily change all the styles in a document.

Adding Styles To Web Site: External


A major benefit of CSS is that you can create a style sheet once to use either on a single Web page or throughout an entire Web site. You can apply this external style sheet to one or a hundred HTML document, without having to retype the information. Establishing an external CSS file is a two-step process:

1. You must set up the rules in a text file. 2. Link or import the file into an HTML document using either the <link> tag or the @import rule

You might also like