CSS Structure
CSS Syntax
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}
Example Explained
p
is a selector in CSS (it points to the HTML element you want to style: <p>).color
is a property, and red
is the property valuetext-align
is a property, and center
is the property value
Inline CSS
<!DOCTYPE html><html>
<head> <title> WebPageWithStyle </title> </head>
<body> <p style= "color:green; font-size:200%">Hello I need to make this inside my mind</p> <h1 style="color:blue;font-size:150%">CSS is cool</h1> </body>
</html>
OUPUT
Hello I need to make this inside my mind
CSS is cool
Internal CSS
We use internal CCS to avoid multiple single line style tag. Note in internal CCS , the style element can occur anywhere.
<!DOCTYPE html><html>
<head> <title> WebPageWithStyle </title> <style> p{ color:green;font-size:200 ; }
h1{ color:red;font-size: 150; } </style> </head>
<body> <p>Hello I need to make this inside my mind</p> <h1>CSS is cool</h1> </body>
</html>
Output
Hello I need to make this inside my mind
CSS is cool
CSS Selectors
A CSS selector selects the HTML element(s) you want to style.
- Simple selectors (select elements based on name, id, class) - this one we will explore first
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
The 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.
#test{
text-align: center;
color: red;
}
Note: An id name cannot start with a number!
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.
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}Example
In this example the <p> element will be styled according to class="center" and to class="large":
<p class="center large">This paragraph refers to two classes.</p>Note: A class name cannot start with a number!Example -
<!DOCTYPE html><html> <head> <title> CSS with Style </title> <style type = "text/css" > .red { color:red; } .large{ font-size:250%; } #identity { color:violet; } .underline { text-decoration:underline; } </style> </head> <body>
<p class="red"> The quick brown fox jumped over the lazy dog.</p> <p class="red large"> Wow this is awesome </p> <p id ="identity" > This is some more text. <span class = "underline"> Want to color this and underline <span> </p> <h1 class="red"> CSS is cool </h1> </body></html>
![](https://www.blogger.com/img/transparent.gif)
Comments
Post a Comment