Scribd
Upload
6 views

UNIT-02-CSS

The document provides an overview of CSS selectors, including element, id, class, universal, group, attribute, and pseudo-class selectors, along with their syntax and usage examples. It also discusses properties and values related to fonts, backgrounds, and text formatting in stylesheets. Key points include the importance of proper syntax with colons and semicolons, and the ability to group selectors to minimize code.

Uploaded by

Gavi Kiran
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

UNIT-02-CSS

The document provides an overview of CSS selectors, including element, id, class, universal, group, attribute, and pseudo-class selectors, along with their syntax and usage examples. It also discusses properties and values related to fonts, backgrounds, and text formatting in stylesheets. Key points include the importance of proper syntax with colons and semicolons, and the ability to group selectors to minimize code.

Uploaded by

Gavi Kiran
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 61

• The selector is used to create a link between the rule and the

HTML tag.
• The declaration has two parts: a property and a value.
• Selectors can be placed into classes so that a tag can be
formatted in a variety of ways.
• Declarations must be separated using colons and terminated
using semicolons.
• selector {property: value; property: value ...}
• This form is used for all style declarations in stylesheets. The
declaration has three items: the property, a colon, and the value.
• If you miss the colon or fail to put the semicolon between
declarations the style cannot be processed.
The selector is used to create a link between the rule and the HTML tag.
• There are several different types of selectors in CSS.

• CSS Element Selector

• CSS Id Selector

• CSS Class Selector

• CSS Universal Selector

• CSS Group Selector


CSS Element Selector
• The element selector selects the HTML element by name.
• <!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>
CSS Id Selector

• 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 hash character (#), followed by the id of
the element.
• <!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>
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.
• If you only want to apply a style to some paragraphs, for instance,
you have to use classes:
• selector.classname {property: value; property: value}
• <selector class=classname>
• <!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>
Universal Selector
• The Universal selector (*) in CSS is used to
select all the elements in an HTML document.
It also includes other elements which are
inside under another element.
• The universal selector is used as a wildcard
character
• <!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>
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.
• Note: Suppose you want to apply common styles to different
selectors, instead of writing rules separately you can write them
in groups as shown below.
• h1 {
h1,h2,p {
• text-align: center;
text-align: center;
• color: blue;
color: blue;
• } }
• h2 {
• text-align: center;
#div-container, .paragraph-class,
• color: blue;
h1{
• } color: white;
• p{ background-color: purple;
• text-align: center; font-family: monospace;
• color: blue; }
• }
Attribute Selector

• The attribute selector [attribute] is used to select the


elements with a specified attribute or attribute value.
• Note: The following code is used in the above Example
using the attribute selector. This CSS rule will be
applied to each and every HTML element on the page:
• [href] {
• background-color:
lightgreen;
• color: black;
• font-family: monospace;
• font-size: 1rem;
• }
Pseudo-Class Selector

• It is used to style a special type of state of any element. For


example- It is used to style an element when a mouse cursor
hovers over it.
• Note: We use a single colon(:) in the case of a
Pseudo-Class Selector.
• Syntax:

Selector:Pseudo-Class {
Property: Value;
}
• h1:hover{
• background-color: aqua;
• }
Divisions
• An element in an HTML document is either a block element or an inline
element.
• A block would be something like a paragraph, while an inline might be
something like text, a figure or an individual character that is part of a block.
• Each of these can be manipulated separately.

• a <div> . . . </div> pair of tags are wrapped around the element. Any
formatting that needs adding is placed inside the div tag thus.
• <div class="anyelement">
• <p>. . . < / p>
• <h2>. . . </h2>
• <p>…..</p>
• </div>
PROPERTIES AND VALUES IN STYLES
• Fonts:

• font-family: <family name> [<generic family>]

• Fonts are identified by giving the name of a specific font. Many Microsoft
Windows and Apple systems have similar sets of TrueType fonts. Unfortunately
UNIX systems use Type 1 and PostScript fonts.
• You should try to use TrueType fonts in your Web pages but provide an option
for users who don't have these fonts. This can be done in two ways. First, you
may specify as many fonts as you like for each style in the hope that most
people will have at least one of them.
• Second, you can specify a default generic font which all browsers on all systems
can handle. Five generic fonts are specified: serif (times), sans-serif (arial),
cursive, fantasy, monospaced (courier). Font names which include whitespace
should be placed in quotes.
FORNT
• P{

• font-family: "Bookman Old Style",

• "Times New Roman", Times, serif;

• }

• font-style: normal|italic|oblique

• Fairly straightforward. Oblique fonts are slanted, italic do not have to be.

• font-weight: normal|bold)bolder|lighter|100|200|

• 300|400|500|600|700|800|900

• The weight of any font can be altered. The first four options are relative
while the numbered values give absolute weights. Not all fonts support all
possible weights and you may want to be careful using absolute weights.
• font-size: [small|medium|large]|[smaller|larger]|
• <length>|<percentage>
• As well as changing the weight you can alter the size. Again, a
choice of relative sizes is possible.
• Font lengths should be given in appropriate units such as pt.
Backgrounds and Colors
• color: <value>

• The color of any attribute can be changed. Values should be given as


hexadecimal values.
• background-color: <value>|transparent

• Backgrounds for the whole page or individual elements can have their
color set from the stylesheet. Elements can also have transparent
backgrounds.
• background-image: URL|none

• Instead of a color an image can be used, identified by its URL. If you set

the background-color you should set the background- image to none.


Text
• text-decoration: none|underline|overline|line-through
• Any piece of text can be decorated. If you want to remove the
underlining on links try this:
• Ex: A:link, A:visited, A:active{text-decoration: none}
• text-transformation: none|capitalize|uppercase|lowercase
• Allows you to set the case of text. This can be useful if you can't
be sure that text will be entered appropriately. For instance if you
are listing countries by their initials create a capitalized style.
• text-align: left|right|center|justify
• One of the most useful text styles. Allows you to fully justify text in
paragraphs, which many people like. By default HTML uses ragged
right margins.
• text-indentation: length|percentage
• Before stylesheets were devised text could not be indented on the
left side. Many people like their text indented, as this paragraph is.
Use a percentage and the amount of space will scale nicely if the
browser window is resized.

You might also like