Scribd
Upload
22 views

CSS Notes

The document discusses CSS (Cascading Style Sheets) which is used to style HTML documents. It covers CSS syntax, different ways to insert CSS, types of CSS selectors, CSS properties for fonts, text, boxes, rounded corners, and transitions.

Uploaded by

arundakhore123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

CSS Notes

The document discusses CSS (Cascading Style Sheets) which is used to style HTML documents. It covers CSS syntax, different ways to insert CSS, types of CSS selectors, CSS properties for fonts, text, boxes, rounded corners, and transitions.

Uploaded by

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

1.

What is css

CSS stands for Cascading Style Sheets CSS is the language we use to style an
HTML document. CSS describes how HTML elements should be displayed.

2. Css syntax
Selector {
Propetiy : value ;
}
Exa.
p{
color: red;
text-align: center;
}

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

In "mystyle.css" file

h1 {
color: navy;
}
Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section

<html>
<head>
<style>
h1 {
color: maroon;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.

<body>
<h1 style="color:blue ; text-align:center;">
This is heading
</h1>
</body>

Type of selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

a) Element selector
b) Id selector
c) Class selector
d) Universal selector
element Selector
The element selector selects HTML elements based on the element name.
In html file,
p{
text-align: center;
color: red;
}
CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one
unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of
the element.

In html file,

<p>this is paregraph 1</p>


<p id=”para2”>this is paregraph 2</p>

In css file,

#para2 {
text-align: center;
color: red;
}
The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the
class name.

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>

In css file,
.center {
text-align: center;
color: red;

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

*{
text-align: center;
color: blue;
}

3. Css font properties with example

 font-family

In CSS, we use the font-family property to specify the font of a text.

p{
font-family: "Times New Roman", Times, serif;
}

font style

The font-style property is mostly used to specify italic text.

p{
font-style: normal;
}

Font Size

The font-size property sets the size of the text.

p{
font-size: 40px;
}

 font-weight

Specifies the weight means thickness of a font

p{
font-weight: normal/bold;
}
4. Css text properties with example
a. Text Color
Specifies the color of text
h1 {
color: green;
}

b. Text Alignment
The text-align property is used to set the horizontal alignment of a text.
h1 {
text-align: center/left/right;
}

c. Text Decoration
The text-decoration-line property is used to add a decoration line to
text.
h1 {
text-decoration-line: overline/line-through/underline;
}
d. Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
p{
text-transform: uppercase/lowercase/capitalize;
}
e. Text spacing
p{
letter-spacing: 5px;
line-height: 0.8;
word-spacing: 10px;
}
f. Text shodow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical
shadow (2px):
h1 {
text-shadow: 2px 2px;
}

5. Css Box properties

The CSS box model is essentially a box that wraps around every HTML element.
It consists of: borders, padding, margins, and the actual content.

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

p{
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

6. CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners"

In html file,

<p id="rcorners1">Rounded corners!</p>


In css file,
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

7. CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

It contain 3 properties

 transition-delay
 transition-duration
 transition-timing-function

p
{
transition: width .35s ease-in-out;
}

You might also like