Scribd
Upload
2 views

CSS

CSS, or Cascading Style Sheets, is a language used for styling and arranging documents visually. It includes rules for selectors, properties, and values, with various methods for including styles in HTML documents. Key concepts include color representation, text properties, selectors, pseudo-classes, and the cascade effect that determines which styles are applied when conflicts arise.

Uploaded by

forstudyy12345
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS

CSS, or Cascading Style Sheets, is a language used for styling and arranging documents visually. It includes rules for selectors, properties, and values, with various methods for including styles in HTML documents. Key concepts include color representation, text properties, selectors, pseudo-classes, and the cascade effect that determines which styles are applied when conflicts arise.

Uploaded by

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

Topic: CSS

 CSS is a language for describing how documents are


presented visually – how they are arranged and styled.
 CSS stands for Cascading Style Sheets.
 CSS Rules –
1. (almost) everything you do in CSS follows a basic
pattern:
Selector {property: value;}
2. Make all <h1> elements purple
H1 {color: purple;}
3. Make all image elements 100 pixels wide & 200 pixels
tall
Img {width:100px; height:200px;}
4. Select every other text input and give it a red border
Input (type = “text”): nth-of-type (2n) {border:2px solid
red;}
5. (almost) everything you do in CSS follows this basic
pattern:
Selector {
Property: value;
}
 Including Styles
 You can write your styles directly inline on each element,
but it is not good idea most of the item.
 You can write your styles inside of a <style> element.
This is easy, but it makes it impossible to share styles
between document. Not recommended either.
 Write your styles in a .css file and then include the using
a <link> in the head of your html document.
Recommended!
<head>
<title> Forms Demo </title>
<link rel =”stylesheet” href=”my_styles.css”
</head>
 Terms
1. Color
2. Background color
 RGB
 Red , green, blue channels
 Each channel ranges from 0-255
 Eg: rgb(255,0,0), rgb(0,0,255)
 Hexadecimal
 Still Red, green, blue channels
 Each ranges from 0-255 BUT represented with
hexadecimal (0 to 9 and A to F)
 Eg: #ffff00
 CSS Text Properties
1. Text- Align – It sets the horizontal alignment of a block
element or table-cell box.
E.g.: left, right, center, justify
2. Font-weight – It sets the weight (or boldness) of the
font.
E.g.: normal, bold, lighter, bolder, 100, 900
3. Text-decoration – It sets the appearance of decorative
lines.
E.g.: underline, underline dotted, underline dotted
red, green wavy underline, underline overline
#F66874
4. Line-height – It sets the height of a line box
E.g.: normal, 2.5, 3em, 150%, 32px
5. Letter-Spacing – It sets the horizontal spacing
behaviour between text characters.
E.g.: normal, 2rem, 1px, -1px
6. Font-size – It sets the size of font.
E.g.: 1.2em, x-small, smaller, 12px, 80%
7. Font-family- It specifies a prioritized list of one or
more font family names.
E.g.: Georgia, serif, Gill Sans, sans-serif, sans-serif,
serif, cursive, system-ui
 Absolute Units
1. PX – By far the most commonly used absolute unit
Note: 1px does not necessarily equal the width of
exactly one pixel.
 CSS Selectors
 Universal Selector
- Select everything!
- *{
Color: black;
}
 Element Selector
- Select all images
- Img {
Width: 100px;
Height: 200px;
}
 Selector list
- Select all h1’s and h2’s
- H1 , h2 {
Color: magenta;
}
 ID Selector
- Select the elements with id of ‘logout’
- # logout {
Color: orange;
Height: 200px;
}
 Class Selector
- Select elements with class of ‘complete’
- . complete {
Color: green;
}
 Descendant Selector
- Select all <a>’s that are nested inside an <li>
- li a {
color: teal
}
 Adjacent Selector
- Select only the paragraphs that are immediately
preceded by an <h1>
- H1 + P {
Color: red;
}
 Direct-descendant Selector
- Select only the <li>’s that are direct children of a
<div> element
- div > li {
color: white;
}
 Attribute Selector
- Select all input elements where the type attribute is
set to “text”.
- Input [type=”text”] {
Width: 300px;
Color: yellow;
}
 PSEUDO Classes
- Keyword added to a selector that specifies a special
state of the selected element(s)
 : hover – It matches when the user interacts with an
element with a pointing device, but not necessarily
activate it.
- a: hover {
color: orange;
}
 : active – It represents an element (such as button)
that is being activated the user.
- a: active {
color: red;
}
 : checked – It is a selector represents any radio,
checkbox or option element that is checked or
logged to an on-site.
- : checked {
Margin-left: 25px;
Border: 1px solid blue;
}
 nth-of-type – It matches elements of a given type,
based on their position among a group of siblings.
- p:nth-of-type(4n) {
color: lime;
}
 PSUEDO Elements
- Keyword added to that selector that lets you style a
particular part of selected element(s).
 : : first letter – It applies styles to the first letter of the
first line of a block-level element, but only when not
preceded by other content.
- P::first-letter {
Font-size: 130%;
}
 :: first-line – It applies styles to the first line of a
block-level element.
- P: : first-line {
Color: red;
}
 : : selection – It applies styles in the part of a
document that has been highlighted by the user.
- p::selection {
color: yellow;
}
 The Cascade
- The order your styles are declared in and linked to
matters!
H1 {
Color: red;
}
H1 {
Color: purple;
}
Purple wins
 Specificity
- Specificity is how the browser decides which rules to
apply when multiple rules could apply to the same
document.
- It is a measure of how specific a given selector is. The
more specific selector “wins”.

You might also like