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

What Is CSS

CSS stands for Cascading Style Sheets and is used to style and lay out web pages. CSS handles the visual and presentation aspects like colors, layout, fonts and other design elements. CSS rules contain selectors that specify the elements to style and declarations that include properties and values to apply specific styles.

Uploaded by

niroshana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

What Is CSS

CSS stands for Cascading Style Sheets and is used to style and lay out web pages. CSS handles the visual and presentation aspects like colors, layout, fonts and other design elements. CSS rules contain selectors that specify the elements to style and declarations that include properties and values to apply specific styles.

Uploaded by

niroshana
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language


intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used,
layout designs,variations in display for different devices and screen sizes as
well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

CSS - Syntax
A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made
of three parts −

 Selector − A selector is an HTML tag at which a style will be applied. This


could be any tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could
be color, border etc.
 Value − Values are assigned to properties. For example, color property
can have value either red or #F1F1F1 etc.
The Type Selectors

This is the same selector we have seen above. Again, one more example to
give a color to all level 1 headings −

h1 {
color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite
simply matches the name of any element type −

* {
color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it
lies inside a particular element. As given in the following example, style rule
will apply to <em> element only when it lies inside <ul> tag.

ul em {
color: #000000;
}

The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

.black {
color: #000000;
}
This rule renders the content in black for every element with class attribute set
to black in our document. You can make it a bit more particular. For example
−
h1.black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with class
attribute set to black.

You can apply more than one class selectors to given element. Consider the
following example −

<p class = "center bold">


This para will be styled by the classes center and bold.
</p>

The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.
#black {
color: #000000;
}
This rule renders the content in black for every element with id attribute set
to black in our document. You can make it a bit more particular. For example
−
h1#black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with id attribute
set to black.
The true power of id selectors is when they are used as the foundation for
descendant selectors, For example −
#black h2 {
color: #000000;
}

Multiple Style Rules

You may need to define multiple style rules for a single element. You can
define these rules to combine multiple properties and corresponding values
into a single block as defined in the following example −

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

You might also like