Scribd
Upload
22 views10 pages

LO-2 Use CSS Techniques To Create Web Page: 2.1. Styling Element of A Webpage by Using CSS Techniques

CSS selectors allow styles to be applied to HTML elements based on element type, class, ID, and other attributes. There are several types of CSS selectors including element selectors, class selectors, ID selectors, universal selectors, and group selectors. CSS rules use selectors and properties to style elements by setting property values like color, font, size and other styles.

Uploaded by

Alebel Ayalneh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views10 pages

LO-2 Use CSS Techniques To Create Web Page: 2.1. Styling Element of A Webpage by Using CSS Techniques

CSS selectors allow styles to be applied to HTML elements based on element type, class, ID, and other attributes. There are several types of CSS selectors including element selectors, class selectors, ID selectors, universal selectors, and group selectors. CSS rules use selectors and properties to style elements by setting property values like color, font, size and other styles.

Uploaded by

Alebel Ayalneh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

LO-2 use CSS techniques to create web page

2.1. Styling element of a webpage by using CSS techniques


CSS Selector
CSS selectors: are used to select the content you want to style. Selectors are
the part of CSS rule set. CSS selectors select HTML elements according to its
id, class, type, attribute etc. There are several different types of selectors in
CSS.
 The selector is what browsers use to match tags in a document to apply the
definition. The selector can take several different forms, offering a lot of
flexibility to match almost any use of tags in a document.
Style Rules
All style rules follow the same basic format:

selector { property1: value1; property2: value2; ... propertyN: valueN; }


Note that the formatting of CSS rules is very exact and follows these guidelines:
 The selector is followed by the formatting property definitions, which are enclosed in braces ({}).

 selector - The selector is the HTML tag that a style will be applied to.
For example, the <p> tag for paragraphs or the <h2> heading tag.
 property - The property is an aspect of the HTML tag that will be affected by the stylesheet definition.
For example, the background color of a webpage or the color of links.
 value - The value that the property of a selector will have. For example, the value of the background color of a
webpage can be green or the value of the color of links can be gray.
 A colon separates each property/value pair. Note that values that include spaces should be enclosed in double
quotes, as in the following example: font-family: “Times New Roman”;
 Each property/value pair ends with a semicolon.
Note Technically, the last property/value pair of a style definition need not end in a
semicolon. However, it is good practice to end all your property/value pairs with a
semicolon.
 The selector is the elements that the style should be used on. The properties are all
formatting properties of the selected elements that should be set to the associated values.
A very simple example of a style rule follows: h1 { color: Red; }
 The selector (h1) causes this rule to be applied to all <h1> elements. The
color property affects the font color of matching elements in this case, the font
color is set to red.
 You can specify multiple selectors to apply to the same style definition you separate
the selectors with commas.
 For example, if you wanted all heading tags (1 through 6) to render as red
text, you could use the following definition:
h1, h2, h3, h4, h5, h6 { color: red; }
 There are several different types of selectors in CSS.
1. Matching elements by name
 The easiest selector to understand is the plain element selector, as in the following example:
h1 { color: red; }
 Using the actual element name (h1) as the selector causes all those tags to be formatted with
the attributes of the definition (color: red). You can also attach multiple selectors to the same
definition by listing them all in the selector area, separated by commas. For example,
this definition will affect all heading tags in the document: h1, h2, h3, 4h, h5, h6 {color: red; }
<!DOCTYPE html>
<html>
<head> <style> p{text-align: center;color: blue; }</style> </head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
2. Matching elements by identifier
 Just as you can match classes, you can also match element identifiers (the id attribute). The
id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element. It is
written with the pound sign or hash character (#), followed by the id of the element. Let’s
take an example with the id "para1".
<!DOCTYPE html>
<html>
<head>
<style>
#para1 { text-align: center; color: blue; }
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body> </html>
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name. A class name should not be started with a
number.
Let's take an example with a class "center".
<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align:center;color:blue;}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
 CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected
then you should use the element name with class selector.
Let's see an example.
<!DOCTYPE html>
<html>
<head>
<style>
p.center{text-align:center;color: blue;}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
4) Using the universal selector
The universal selector can be used to match any element in the document. The
universal selector is an asterisk (*). As an extreme example, you can use the
universal selector to match every tag in a document:
• { color: red; }
Eg.Every tag will have the color:red attribute applied to it.
<!DOCTYPE html>
<html>
<head>
<style>
* { color: green; font-size: 20px; }
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize
the code. Commas are used to separate each selector in grouping. Let's see the CSS code without group selector.
h1 {text-align: center;color:blue; }
h2 {text-align: center;color:blue; }
p {text-align: center;color:blue; }
As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:
h1,h2,p {text-align: center;color:blue; }
Let's see the full example of CSS group selector.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {text-align:center;color:blue;}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

You might also like