Scribd
Upload
8 views6 pages

New Lecture

CSS (Cascading Style Sheets) is a style sheet language used to style HTML elements, allowing for selective customization of web content. It utilizes rulesets consisting of selectors and declarations, and is based on the box model which includes properties like padding, border, and margin. The document also explains the difference between ID and class selectors, highlighting that IDs are unique while classes can be reused across multiple elements.

Uploaded by

Talha Manzoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views6 pages

New Lecture

CSS (Cascading Style Sheets) is a style sheet language used to style HTML elements, allowing for selective customization of web content. It utilizes rulesets consisting of selectors and declarations, and is based on the box model which includes properties like padding, border, and margin. The document also explains the difference between ID and class selectors, highlighting that IDs are unique while classes can be reused across multiple elements.

Uploaded by

Talha Manzoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

What is CSS

CSS (Cascading Style Sheets) is the code that styles web content.

Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a
style sheet language. CSS is what you use to selectively style HTML elements. For example, this
CSS selects paragraph text, setting the color to red:
p{
color: red;
}

Let's dissect the CSS code for red paragraph text to understand how it works:

The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.)

Selector

This is the HTML element name at the start of the ruleset. It defines the
element(s) to be styled (in this example, <p> elements). To style a different
element, change the selector.

Note the other important parts of the syntax:

 Apart from the selector, each ruleset must be wrapped in curly braces. ({})
 Within each declaration, you must use a colon (:) to separate the property from
its value or values.
 Within each ruleset, you must use a semicolon (;) to separate each declaration
from the next one.

To modify multiple property values in one ruleset, write them separated by semicolons,
like this:

CSS
p{
color: red;
width: 500px;
border: 1px solid black;
}

Selector name What does it select Example


Element selector
p
(sometimes called a tag or All HTML elements of the specified type. selects <p>
type selector)
#my-id
The element on the page with the specified selects <p id="my-
ID selector ID. On a given HTML page, each id value id"> or <a id="my-id">
should be unique.
.my-class
The element(s) on the page with the specified
selects <p class="my-
Class selector class. Multiple instances of the same class can
class"> and <a class="my-
appear on a page. class">

CSS layout is mostly based on the box model. Each box taking up space on your page has
properties like:

 padding, the space around the content. In the example below, it is the space around the
paragraph text.
 border, the solid line that is just outside the padding.
 margin, the space around the outside of the border.
In this section we also use:

 width (of an element).


 background-color, the color behind an element's content and padding.
 color, the color of an element's content (usually text).
 text-shadow sets a drop shadow on the text inside an element.
 display sets the display mode of an element. (keep reading to learn more)

To continue, let's add more CSS. Keep adding these new rules at the bottom of style.css.
Experiment with changing values to see what happens.

Changing the page color

CSSCopy to Clipboard
html {
background-color: #00539f;
}

This rule sets a background color for the entire page. Change the color code to the color you
chose in What will my website look like?.
Styling the body

CSSCopy to Clipboard
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}

There are several declarations for the <body> element. Let's go through these line-by-line:

 width: 600px; This forces the body to always be 600 pixels wide.

 margin: 0 auto;When you set two values on a property like margin or padding, the first value
affects the element's top and bottom side (setting it to 0 in this case); the second value
affects the left and right side.


 This sets the element's background color. This project uses a
background-color: #FF9500;
reddish orange for the body background color, as opposed to dark blue for
the <html> element. (Feel free to experiment.)

 padding: 0 20px 20px 20px;This sets four values for padding. The goal is to put some space
around the content. In this example, there is no padding on the top of the body, and 20
pixels on the right, bottom and left. The values set top, right, bottom, left, in that order.
As with margin, you can use one, two, three, or four values, as documented in Padding
Syntax.


 This sets values for the width, style and color of the border. In this
border: 5px solid black;
case, it's a five-pixel–wide, solid black border, on all sides of the body.
CSS id selector
An ID selector is a unique identifier of the HTML element to which a particular
style must be applied. It is used only when a single HTML element on the web
page must have a specific style.

Both in Internal and External Style Sheets we use hash (#) for an id selector.

Example of an ID selector:
<!DOCTYPE html>
<html>
<head>

<title> Title of the document </title>

<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>

<p> The first paragraph. </p>

<p id="blue"> The second paragraph. </p>

<p> The third paragraph. </p>

</body>
</html>

CSS class selector


A class selector is used when the same style must be applied to multiple HTML
elements on the same web page.

Both in Internal and External Style Sheets we use a dot (.) for a class selector.
Example of a class selector:
<!DOCTYPE html>
<html>
<head>

<title> Title of the document </title>

<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>

<h2 class="blue"> This is some heading. </h2>

<p> The second paragraph. </p>

<p class="blue"> The third paragraph. </p>

</body>
</html>

In our example, a class selector is used twice, in heading and paragraph.

As you see, we assigned blue as class selector (class="blue"), and declared its style
using color property - .blue {color: #1c87c9;} in the <head> section. It means that the
elements having class selector blue will be displayed in #1c87c9.

The Difference Between ID and Class


The difference between IDs and classes is that the first one is unique, and the second
one is not. This means that each element can have only one ID, and each page can
have only one element with this ID. When using the same ID on multiple elements, the
code won’t pass validation. But as the classes are not unique, the same class can be
used on multiple elements, and vice versa, you can use several classes on the same
element.

You might also like