KEMBAR78
CSS Basics: Understanding Stylesheets | PDF | Html | Software Development
Scribd
Upload
14 views6 pages

CSS Basics: Understanding Stylesheets

CSS (Cascading Style Sheets) is used to style web content by selectively applying properties like color, width, and font to HTML elements. CSS rules contain selectors that target elements, declarations to set properties, and values to determine appearances. For example, a rule can set paragraph text color to red. Rules are made of selector, declaration blocks wrapped in curly braces, and declarations separated by semicolons. The box model forms the basis of CSS layout, with properties for padding, borders, and margins controlling spacing.

Uploaded by

gachita022
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
14 views6 pages

CSS Basics: Understanding Stylesheets

CSS (Cascading Style Sheets) is used to style web content by selectively applying properties like color, width, and font to HTML elements. CSS rules contain selectors that target elements, declarations to set properties, and values to determine appearances. For example, a rule can set paragraph text color to red. Rules are made of selector, declaration blocks wrapped in curly braces, and declarations separated by semicolons. The box model forms the basis of CSS layout, with properties for padding, borders, and margins controlling spacing.

Uploaded by

gachita022
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

7 September 2023

CSS basics
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

Unset

p{
color: red;
}

The whole structure is called a ruleset. (The term ruleset is often referred to as just
rule.) Note the names of the individual parts:

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.
Declaration
This is a single rule like color: red;. It specifies which of the element's properties you
want to style.

Properties
These are ways in which you can style an HTML element. (In this example, color is a
property of the <p> elements.) In CSS, you choose which properties you want to affect in
the rule.

Property value
To the right of the property—after the colon—there is the property value. This chooses
one out of many possible appearances for a given property. (For example, there are
many color values in addition to red.)

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.
Unset

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

You can also select multiple elements and apply a single ruleset to all of them. Separate
multiple selectors by commas. For example:
Unset

p,
li,
h1 {
color: red;
}
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.
● 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)
What is the difference between padding and margin in css

Padding: top right bottom left

You might also like