What Is CSS?

CSS
Cascading Style Sheets (CSS) are stylesheet language used to describe the presentation of a
document written in HTML or XML. CSS describes how elements should be rendered.
What is CSS?
Cascading Style Sheets (CSS) is a language for specifying how documents are presented to
users. These documents are written in a markup language such as HTML.
Why use CSS?

Use CSS to define styles for your documents, including the design, layout and variations in
display for different devices and screen sizes. You can place your CSS in the <head> of a
document with an embedded style sheet, or attach a separate file that defines your styles with
an external style sheet. To link an external style sheet to your document, you'll simply add a link
to the style sheet in the <head> of the document.
How do HTML and CSS work together?

In general, you use HTML to describe the content of the document, not its style. You use CSS to
specify the document's style, not its content. Later in this tutorial, you will see some exceptions
to this arrangement.
Where to code?
You can use the same editors which you use for HTML i.e. Notepad++, Sublime text, etc.
Create a new file in the same directory where you have saved the HTML file to which
you want to link this CSS file.
Save your file with the extension .css. This file will be your stylesheet.
Add <link> tag in the head section of your HTML document. Set rel=stylesheet/css and
href=your_css_file_name.css.
Eg.
HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css">
</head>
<body>
<h2>Here's the heading</h2>
<p>A YeLLoW paragraph.</p>
</body>
</html>
styling.css
body {
background-color:lightgreen;
}
h2 {
color:blue;
text-align:center;
}
p {
color:yellow;
}
CSS Declaration
Setting CSS properties to specific values is the core function of the CSS language. A property
and value pair is called a declaration.
background-color : blue
Here, background-color is property and blue is value.
CSS Declaration Block example

{
background-color : yellow;
font-size : 16px;
color : blue;
}
Selectors
CSS has its own terminology to describe the CSS language. CSS selectors are used to find HTML
elements based on their element name, id, class, attribute, and more.
Element Selector
The element selector selects elements based on the element name. If the same element is used
more than once, the css styling is applied to all of them.
Eg.
<p> Hello </p>
<p> Welcome Friend! </p>
In css stylesheet,
p {
background-color : green;
}
Class Selector
Class selector selects element with specific class attribute. Use the class attribute in an element
to assign the element to a named class. It is up to you what name you choose for the class.
Multiple elements in a document can have the same class value.
Eg.
<p class="style1"> Hello </p>
In css stylesheet.
.style1 {
color : red;
font-family : verdana;
}
ID Selector
Use the id attribute in an element to assign an ID to the element. It is up to you what name you
choose for the ID. The ID name must be unique in the document.
Eg.
<p id="para1"> Hello </p>
In css stylesheet,
#para1 {
color : white;
background-color : black;
}
Pseudo-classes Selector
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element
to be selected. For example :hover will apply a style when the user hovers over the element
specified by the selector.
Syntax:
selector:pseudo-class {
property : value;
}
Eg.
<h3 class="style2"> Check this out! </h3>
In css stylesheet,
style2:hover {
background-color : blue;
}
List of pseudo-classes:
:hover
:link
:visited
:active
:focus
:enabled
:disabled
:target
Organizing CSS
Comments can be added wherever required in your stylesheet. Also you can add white space.
Selectors can be grouped together when the same style rules apply to elements selected in
different ways.
Some examples of organizing using white spaces

.key
.key {
.key
color: orange;
color: orange;
align: center;
color
: orange;
align: center;
font-style: italic;
align
: center;
font-style: italic;
font-style : italic;
}
.key { color: orange; align: center; font-style: italic; }
Comments
Comments in CSS begin with /* and end with */.
You can use comments to make comments in your stylesheet and also to comment out parts of
it temporarily for testing purposes.
/* Style for first paragraph */
.para1 {
align: center;
background-color:
green;
Grouped Selectors
When many elements have the same style, you can specify a group of selectors, separating
them with commas.
Eg. For three different elements <h1>, <h2> and <h3> with the same style
h1, h2, h3 {
color: blue;
align: center;
}
Note:
When selectors are separated by commas, the declarations are applied to all the
selectors specified.
When selectors are separated by space, it means the declaration should be applied to
the right selector which is within the left selector. See the example given below. Here
the styling applies to only those h1 elements which are inside the div element.
div h1 {
color: blue;
align: center;
}
Text in CSS
CSS has various styling properties for text.
Font style
The font-style property is used for specifying italic text.
Eg.
h1 {
h2 {
font-style: normal;
}
font-style: italic;
}
Font size
The font-size property is used to specify the size of the text.
Size can be specified either in px(pixel), %(percent) or em(em is current font size of the parent
element).
p {
p {
font-size: 18px;
p {
font-size: 120%;
font-size: 1.2em;
}
Font faces
To specify a typeface, we use the font-family property.
We can also specify alternative typefaces. So if the first typeface is not supported in the web
browser, the second one will be used.
We can also use one of the built-in default typefaces: serif, sans-serif, cursive, etc.
Eg.
p {
font-family: Verdana, Arial, serif;
}
Font Weight
The font-weight property is used to specify bold text.
h3 {
h3 {
font-weight: normal;
}
font-weight: bold;
}
Line Height
The line-height specifies the spacing between lines.
p {
line-height: 1.2;
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
h3 {
h3 {
text-align: left;
h3 {
text-align: right;
text-align: center;
Color in CSS
The site given below shows a list of colors which you can use for styling.
SVG color keywords
Color property
The color property is used to specify color of text elements.
p {
p {
color: cyan;
p {
color: #00FFFF;
color: rgb(0,255,255);
Background color property

The background color property is used to change elements background.
h2 {
h2 {
background-color: cyan;
}
background-color: #00FFFF;
}
Content
In CSS, we can specify some content as part of the stylesheet and not as part of the HTML
document.
Content specified in stylesheet can be either text or images.
Text Content
We can insert text content before or after an element using css. To specify this, we add ::before
or ::after to the selector. The content property should contain the Text content as its value.
Eg.
<p> Here, this is the <span class="high"> word</span></p>
.high::before {
color: blue;
font-weight: bold;
content: "Highlighted";
}
Image content
To add image before or after an element, we can specify the url of an image as the value of the
content property.
Eg.
.class1::after {
content: url(" ../images/picture.jpg ");
}
Image background
To add an image as background, specify the url of that image file in the value of backgroundimage property.
Eg.
div {
background-image: url(" ../images/background.png ");
}
Background repeat
By default the image is repeated horizontally and vertically by the background image property.
Set background-repeat property to repeat-x to repeat horizontally, repeat-y to repeat vertically
or no-repeat to display image only once.
div {
background-repeat: repeat-x;
}
div {
background-repeat: repeat-y;
}
div {
background-repeat: no-repeat;
}
Lists
CSS provides special properties that are designed for lists. It is usually more convenient to use
these properties whenever you can.
Unordered lists
CSS has three types of markers for unordered lists.
disc
circle
square
Eg.
<ul class="list">
<li>Apple</li>
<li>Mango</li>
</ul>
.list {
.list {
.list {
list-style: disc;
list-style: circle;
list-style: square;
Ordered lists
CSS has five types of markers for ordered lists.
1. decimal
2. lower-roman
3. upper-roman
4. lower-latin
5. upper-latin
Eg.
<ul class="orderlist">
<li>Apple</li>
<li>Mango</li>
</ul>
.orderlist { list-style: decimal; }

.orderlist { list-style: lower-roman; }
.orderlist { list-style: upper-roman; }
.orderlist { list-style: lower-latin; }
.orderlist { list-style: upper-latin; }
Boxes
Margin
Padding
Element
Border
The element takes the space required to display it.

Around that, there is padding.
Then there is a border around it. Padding separates the element from the border.
The margin separates the element from other elements.
Note: When you apply background color, even the padding gets that background color, i.e. the
background color is applied till the border.
The border property can have the following values.

solid
dotted
dashed
double
inset
outset
ridge
groove
div {
padding: 20px;
border: 4px solid blue;
margin: 20px;
}
Layouts
Position
The position property specifies the elements position.
relative : The elements position is shifted relative to its normal position.
fixed : The elements position is fixed.
absolute : The element's position is fixed relative to a parent element.
static : It is the default value. The element is not positioned in any special way. In simple
words it turns off positioning.
div {
position: relative;
}
Float
The float property forces an element to left or right. It is used to control its position.
Clear
The clear property is used to keep an element clear of floats. The element is not affected by any
other element which is being floated.
Eg.
div {
float: left;
}
h1 {
clear: left;
}
Tables
There are various properties which can be used for styling tables. We will see them one by one.
Table Border
To specify borders we use the border property.
Eg.
table {
border: 2px solid cyan;
}
Collapse border
The border-collapse property is used to specify whether a border should be collapsed into a
single border or not since the border property sets border to each cell of the table.
table, th,td {
border-collapse: collapse;
}
Width and Height

It specifies the width and height of table.
table {
width: 80%;
height: 60px;
}
Horizontal and Vertical Alignment

The text-align property is used for specifying the horizontal alignment and the vertical-align
property is used for specifying the vertical alignment.
th,td {
text-align: left;
vertical-align: center;
}
Note: You can also use padding, color, background-color and some more properties for styling
tables.

What Is CSS?

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

What Is CSS?

Загружено:

Авторское право:

CSS

Why use CSS?

How do HTML and CSS work together?

Here, background-color is property and blue is value.

CSS Declaration Block example

Some examples of organizing using white spaces

.key { color: orange; align: center; font-style: italic; }

Background color property

.orderlist { list-style: decimal; }

The element takes the space required to display it.

The border property can have the following values.

Width and Height

Horizontal and Vertical Alignment

Вам также может понравиться