Scribd
Upload
7 views

CSS ppt

CSS, or Cascading Style Sheets, is a language used to style HTML elements and is essential for web design alongside HTML and JavaScript. It includes various selectors, properties, and methods for applying styles, such as inline, internal, and external CSS. The document also covers advanced topics like pseudo-classes, pseudo-elements, the box model, and display properties.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS ppt

CSS, or Cascading Style Sheets, is a language used to style HTML elements and is essential for web design alongside HTML and JavaScript. It includes various selectors, properties, and methods for applying styles, such as inline, internal, and external CSS. The document also covers advanced topics like pseudo-classes, pseudo-elements, the box model, and display properties.

Uploaded by

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

CSS

What is css?

 CSS stands for Cascading Style Sheet.


 CSS is used to design HTML tags.
 CSS is a widely used language on the web.
 HTML, CSS and JavaScript are used for web
designing. It helps the web designers to apply style on
HTML tags.
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 value
 text-align is a property, and center is the property value
CSS Selector

 CSS selectors are used to "find" (or select) the HTML elements you want to
style.
 We can divide CSS selectors into five categories:

•Simple selectors (select elements based on name, id, class)


•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)
Simple selectors

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.

2) CSS Id Selector

 The id selector selects the id attribute of an HTML element to


select a specific element. An id is always unique within the page
so it is chosen to select a single, unique element.
 It is written with the hash character (#), followed by the id of the
element.
3) CSS Class Selector

 The class selector selects HTML elements with a specific class attribute. It is
used with a period character . (full stop symbol) followed by the class name.
 Note: A class name should not be started with a number.

4) CSS Universal Selector


 The universal selector is used as a wildcard character. It selects all the
elements on the pages.
5) CSS Group Selector
 The grouping selector is used to select all the elements with the same style
definitions.
 Grouping selector is used to minimize the code. Commas are used to separate
each selector in grouping.
 Let's see the CSS code without group selector.
Let's see the CSS code without group selector.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}
Class v/s Id

Class Id
We can apply a class to various The Id is unique in a page, and we
elements so that it could be can only apply it to one specific
numerous times on a single page. element.

The class is assigned to an element The name of the Id starts with the
and its name starts with "." followed "#" symbol followed by a unique id
by the name of the class. name.

We can attach multiple class We can attach only one ID selector


selectors to an element. to an element.

Syntax: Syntax:
.class{ #id{
// declarations of CSS // declarations of CSS
} }
How to add CSS

 CSS is added to HTML pages to format the document according to


information in the style sheet. There are three ways to insert CSS in HTML
documents.

 Inline CSS
 Internal CSS
 External CSS
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.

Syntax:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>


Internal CSS
 The internal style sheet is used to add a unique style for a single document. It is defined
in <head> section of the HTML page inside the <style> tag.
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.
 An external style sheet can be written in any text editor, and must be saved with a .css
extension.
 The external .css file should not contain any HTML tags.
CSS Comments

 CSS comments are generally written to explain your code. It is very helpful for the
users who reads your code so that they can easily understand the code.
 Comments are ignored by browsers.
 Comments are single or multiple lines statement and written within /*............*/ .
CSS Pseudo-classes

A pseudo-class is used to define a special state of an


element.
For example, it can be used to:
•Style an element when a user mouses over it
•Style visited and unvisited links differently
•Style an element when it gets focus

Syntax:

The syntax of pseudo-classes:

selector:pseudo-class {
property: value;
}
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}
CSS Pseudo-elements

What are Pseudo-Elements?


A CSS pseudo-element is used to style specified parts of an
element.
For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an element

Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
The ::first-line Pseudo-element

 The ::first-line pseudo-element is used to add a special style


to the first line of a text.

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

Note: The ::first-line pseudo-element can only be applied


to block-level elements.
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special
style to the first letter of a text.

p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Pseudo-elements and HTML Classes

Pseudo-elements can be combined with HTML classes:

p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some


content before the content of an element.

h1::before {
content: url(smiley.gif);
}
CSS - The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content


after the content of an element.

h1::after {
content: url(smiley.gif);
}
CSS - The ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list


items.

::marker {
color: red;
font-size: 23px;
}
The ::selection Pseudo-element
 The ::selection pseudo-element matches the portion of an
element that is selected by a user.

 The following CSS properties can be applied


to ::selection: color, background, cursor, and outline.

::selection {
color: red;
background: yellow;
}
CSS Attribute Selectors

CSS [attribute] Selector

The [attribute] selector is used to select elements with a


specified attribute.

a[target] {
background-color: yellow;
}
The display: inline-block Value
 Compared to display: inline, the major difference is that display:
inline-block allows to set a width and height on the element.

 Also, with display: inline-block, the top and bottom


margins/paddings are respected, but with display: inline they are
not.
 Compared to display: block, the major difference is that display:
inline-block does not add a line-break after the element, so the
element can sit next to other elements.
The z-index Property
 When elements are positioned, they can overlap other elements.
 The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the
others).
 An element can have a positive or negative stack order:

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
CSS Overflow
The overflow property specifies whether to clip the content or to add
scrollbars when the content of an element is too big to fit in the
specified area.
The overflow property has the following values:
•visible - Default. The overflow is not clipped. The content renders
outside the element's box

•hidden - The overflow is clipped, and the rest of the content will be
invisible

•scroll - The overflow is clipped, and a scrollbar is added to see the


rest of the content

•auto - Similar to scroll, but it adds scrollbars only when necessary


CSS Combinators

A CSS selector can contain more than one simple selector. Between
the simple selectors, we can include a combinator.

There are four different combinators in CSS:


•descendant selector (space)
•child selector (>)
•adjacent sibling selector (+)
•general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants
of a specified element.

div p {
background-color: yellow;
}
Child Selector (>)

The child selector selects all elements that are the children of a specified
element.

div > p {
background-color: yellow;
}
Adjacent Sibling Selector (+)

 The adjacent sibling selector is used to select an element that is


directly after another specific element.
 Sibling elements must have the same parent element, and "adjacent"
means "immediately following".

div + p {
background-color: yellow;
}
General Sibling Selector (~)
The general sibling selector selects all elements that are next siblings of a
specified element.

div ~ p {
background-color: yellow;
}
CSS Gradients

CSS gradients let you display smooth transitions between two or more
specified colors.
CSS defines three types of gradients:

•Linear Gradients (goes down/up/left/right/diagonally)


•Radial Gradients (defined by their center)
•Conic Gradients (rotated around a center point)
Linear Gradients
To create a linear gradient you must define at least two color stops.
Color stops are the colors you want to render smooth transitions
among. You can also set a starting point and a direction (or an angle)
along with the gradient effect.

Syntax:
background-image: linear-gradient(direction, color-
stop1, color-stop2, ...);

Direction - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the


top. It starts red, transitioning to yellow:
#grad {
background-image: linear-
gradient(red, yellow);
}
Direction - Left to Right
The following example shows a linear gradient that starts from the
left. It starts red, transitioning to yellow:

#grad {
background-image: linear-gradient(to right, red ,
yellow);
}
Direction - Diagonal
You can make a gradient diagonally by specifying both the
horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left
(and goes to bottom right). It starts red, transitioning to yellow:

#grad {
background-image: linear-gradient(to bottom right, red,
yellow);
}
CSS Box Model
The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and
the actual content.
Explanation of the different parts:

•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
Example
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Width and Height of an Element

The total width of an element should be calculated like this:


Total element width = width + left padding + right padding + left
border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding +
top border + bottom border + top margin + bottom margin
CSS Text
Text Color
The color property is used to set the color of the text. The color is specified by:
•a color name - like "red"
•a HEX value - like "#ff0000"
•an RGB value - like "rgb(255,0,0)"

Example

div {
background-color: blue;
color: white;
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
When the text-align property is set to "justify", each line is stretched so that every line has
equal width, and the left and right margins are straight (like in magazines and newspapers):

div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
Text Spacing
CSS Text Indentation, Letter Spacing, Line Height, Word Spacing, and White
Space

1. text-indent
2. letter-spacing
3. line-height
4. word-spacing
5. white-space

1. Text Indentation
The text-indent property is used to specify the
indentation of the first line of a text:

Example
p {
text-indent: 50px;
}
 Letter Spacing

The letter-spacing property is used to specify


the space between the characters in a text.

Example

h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}
 Line Height
The line-height property is used to specify the space between lines:

Example
p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

 Word Spacing
The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between words:

p.one {
word-spacing: 10px;
}

p.two {
word-spacing: -2px;
}
 White Space
The white-space property specifies how white-space inside an element is handled.
This example demonstrates how to disable text wrapping inside an element:

Example

p {
white-space: nowrap;
}
CSS Lists
Remove Default Settings:
The list-style-type:none property can also be used to remove the markers/bullets.
Note that the list also has default margin and padding.
To remove this, add margin:0 and padding:0 to <ul> or <ol>:
The display Property
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.

Block-level Elements
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).

•<div>
•<h1> - <h6>
•<p>
•<form>
•<header>
•<footer>
•<section>
Inline Elements
An inline element does not start on a new line and only takes up
as much width as necessary.

•<span>
•<a>
•<img>
Display: none;
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
Take a look at our last example on this page if you want to know how this can be achieved.
The <script> element uses display: none; as default.

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.
Changing an inline element to a block element, or vice versa, can be useful
for making the page look a specific way, and still follow the web standards.
A common example is making inline <li> elements for horizontal menus:
Hide an Element - display:none or visibility:hidden?
Hiding an element can be done by setting the display property to none.
The element will be hidden, and the page will be displayed as if the element
is not there:

Example
h1.hidden {
display: none;
}
visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element will be
hidden, but still affect the layout:

Example

h1.hidden {
visibility: hidden;
}
width and max-width
Using max-width instead, in this situation, will improve the browser's handling of small windows.
This is important when making a site usable on small devices:
The position Property

The position property specifies the type of positioning method used for an element.
There are five different position values:
•static
•relative
•fixed
•absolute
•sticky
Overflow
The CSS overflow property controls what happens to content that is
too big to fit into an area.

The overflow property has the following values:


•visible - Default. The overflow is not clipped. The content renders outside the element's box
•hidden - The overflow is clipped, and the rest of the content will be invisible
•scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
•auto - Similar to scroll, but it adds scrollbars only when necessary

Example
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
Float

The float property is used for positioning and formatting content


e.g. let an image float left to the text in a container.

The float property can have one of the following values:


•left - The element floats to the left of its container
•right - The element floats to the right of its container
•none - The element does not float (will be displayed just where it
occurs in the text). This is default
•inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text
around images.
CSS Media Queries
CSS3 Introduced Media Queries:

1. Media queries in CSS3 extended the CSS2 media types idea:


Instead of looking for a type of device, they look at the
capability of the device.
2. Media queries can be used to check many things, such as:
•width and height of the viewport
•width and height of the device
•orientation (is the tablet/phone in landscape or portrait mode?)
•resolution
3 .Using media queries are a popular technique for delivering a
tailored style sheet to desktops, laptops, tablets, and mobile
phones (such as iPhone and Android phones).
Media Query Syntax
A media query consists of a media type and can contain one or more
expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {


CSS-Code;
}
 The result of the query is true if the specified media type
matches the type of device the document is being displayed on
and all expressions in the media query are true. When a media
query is true, the corresponding style sheet or style rules are
applied, following the normal cascading rules.
 Unless you use the not or only operators, the media type is
optional and the all type will be implied.
CSS3 Media Types

Value Description

all Used for all media type devices

print Used for printers

screen Used for computer screens, tablets, smart-phones etc.

speech Used for screenreaders that "reads" the page out loud
CSS Flexbox
CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout


modes:
•Block, for sections in a webpage
•Inline, for text
•Table, for two-dimensional table data
•Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design


flexible responsive layout structure without using float or
positioning.

Flexbox Elements
To start using the Flexbox model, you need to first define a flex
container.
Display
The flex container properties are:

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
1)The flex-direction Property
The flex-direction Property
The flex-direction property defines in which direction the container wants
to stack the flex items.
The column value stacks the flex items vertically (from top to bottom):

<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: DodgerBlue;
}

.flex-container > div {


background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: column;" stacks the flex
items vertically (from top to bottom):</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>

Example
The column-reverse value stacks the flex items vertically (but from bottom
to top):

.flex-container {
display: flex;
flex-direction: column-reverse;
}
Try it Yourself
Example
The row value stacks the flex items horizontally (from left to right):

.flex-container {
display: flex;
flex-direction: row;
}
Try it Yoursel
Example

The row-reverse value stacks the flex items horizontally (but from right to left):

.flex-container {
display: flex;
flex-direction: row-reverse;
}
2)The flex-wrap Property
The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not.

Example

The wrap value specifies that the flex items will wrap if necessary:
Example

The nowrap value specifies that the flex items will not wrap (this is default)

.flex-container {
display: flex;
flex-wrap: nowrap;
}
Example
The wrap-reverse value specifies that the flexible items will wrap if
necessary, in reverse order:

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
4) The justify-content Property
The justify-content Property
The justify-content property is used to align the flex items:

Example

The flex-start value aligns the flex items at the beginning of the
container (this is default):

.flex-container {
display: flex;
justify-content: flex-start;
}
Example

The flex-end value aligns the flex items at the end of the container:

.flex-container {
display: flex;
justify-content: flex-end;
}

Example
The space-around value displays the flex items with space before, between,
and after the lines:

.flex-container {
display: flex;
justify-content: space-around;
}
Example

The space-between value displays the flex items with space between the lines:

.flex-container {
display: flex;
justify-content: space-between;
}
5)The align-items Property
The align-items Property
The align-items property is used to align the flex items.

Example

The center value aligns the flex items in the middle of the container:
Example
The flex-start value aligns the flex items at the top of the container:

.flex-container {
align-items: flex-start;
}
Example

The flex-end value aligns the flex items at the bottom of the container:

.flex-container {
align-items: flex-end;
}
Example

The stretch value stretches the flex items to fill the container (this is default):

.flex-container {
align-items: stretch;
}

Example

The baseline value aligns the flex items such as their baselines aligns:

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
6)The align-content Property
The align-content Property
The align-content property is used to align the flex lines.

In these examples we use a 600 pixels high container, with the flex-
wrap property set to wrap, to better demonstrate the align-
content property.
Example

The space-around value displays the flex lines with space before,
between, and after them:

.flex-container {
align-content: space-around;
}
Example
The stretch value stretches the flex lines to take up the remaining space (this is default):

.flex-container {
align-content: stretch;
}
Example

The center value displays display the flex lines in the middle of the container:

.flex-container {
align-content: center;
}

Example
The flex-start value displays the flex lines at the start of the
container:
.flex-container {
align-content: flex-start;
}
Example

The flex-end value displays the flex lines at the end of the container:

.flex-container {
align-content: flex-end;
}

Perfect Centering
In the following example we will solve a very common style
problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties


to center, and the flex item will be perfectly centered:
Child Property
The CSS Flexbox Items Properties
Property Description
align-self Specifies the alignment for a flex item (overrides the flex container's
align-items property)

flex A shorthand property for the flex-grow, flex-shrink, and the flex-
basis properties

flex-basis Specifies the initial length of a flex item

flex-grow Specifies how much a flex item will grow relative to the rest of the
flex items inside the same container

flex-shrink Specifies how much a flex item will shrink relative to the rest of the
flex items inside the same container

order Specifies the order of the flex items inside the same container
GRID
CSS Grid Layout Module
Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows
and columns, making it easier to design web pages without having to use
floats and positioning.

Grid Elements
A grid layout consists of a parent element, with one or more
child elements.
Display Property
An HTML element becomes a grid container when its display property is set
to grid or inline-grid.

Example
.grid-container {
display: grid;
}

Example
.grid-container {
display: inline-grid;
}
Grid Columns
The vertical lines of grid items are called columns.

Grid Rows
The horizontal lines of grid items are called rows.

Grid Gaps
The spaces between each column/row are called gaps.
You can adjust the gap size by using one of the following properties:
•column-gap
•row-gap
•gap

Example
The column-gap property sets the gap between the columns:

.grid-container {
display: grid;
column-gap: 50px;
}
Example
The row-gap property sets the gap between the rows:
.grid-container {
display: grid;
row-gap: 50px;
}

Example

The gap property is a shorthand property for the row-gap and the column-gap properties:

.grid-container {
display: grid;
gap: 50px 100px;
}
Example

The gap property can also be used to set both the row gap and the column gap in one value:

.grid-container {
display: grid;
gap: 50px;
}
CSS Grid Container
CSS Grid Container
 The grid-template-columns property defines the number of columns
in your grid layout, and it can define the width of each column.
 The value is a space-separated-list, where each value defines the
width of the respective column.
Sass

 Sass stands for Syntactically Awesome Stylesheet


 Sass is an extension to CSS
 Sass is a CSS pre-processor
 Sass is completely compatible with all versions of CSS
 Sass reduces repetition of CSS and therefore saves time
 Sass is free to download and use

Why Use Sass?


 Stylesheets are getting larger, more complex, and harder
to maintain. This is where a CSS pre-processor can help.
 Sass lets you use features that do not exist in CSS, like
variables, nested rules, mixins, imports, inheritance, built-
in functions, and other stuff.
Index.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>

<h1>Hello World</h1>

<p>This is a paragraph.</p>

</body>
</html>
Style.scss

/* Define standard variables and values for website */


$bgcolor: skyblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */


body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
Style.css

/* Define standard variables and values for


website */
/* Use the variables */
body {
background-color: skyblue;
color: darkblue;
font-size: 18px;
}
How Does Sass Work?

 A browser does not understand Sass code. Therefore, you


will need a Sass pre-processor to convert Sass code into
standard CSS.
 This process is called transpiling. So, you need to give a
transpiler (some kind of program) some Sass code and then
get some CSS code back.

Transpiling is a term for taking a source code written in one


language and transform/translate it into another language.
Sass Variables

Variables are a way to store information that you can re-use later.
With Sass, you can store information in variables, like:
•strings
•numbers
•colors
•booleans
•lists
•nulls
Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

$variablename: value;
The following example declares 4 variables named myFont, myColor,
myFontSize, and myWidth. After the variables are declared, you can use
the variables wherever you want:

$myFont: Helvetica, sans-serif;


$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}

#container {
width: $myWidth;
}
So, when the Sass file is transpiled, it takes the variables (myFont,
myColor, etc.) and outputs normal CSS with the variable values placed
in the CSS, like this:

body {
font-family: Helvetica, sans-
serif;
font-size: 18px;
color: red;
}

#container {
width: 680px;
}
Sass Variable Scope
Sass variables are only available at the level of nesting where
they are defined.

SCSS Syntax:

$myColor: red;

h1 {
$myColor: green;
color: $myColor;
}

p {
color: $myColor;
}
CSS Output:

h1 {
color: green;
}

p {
color: red;
}

That is the default behavior for variable scope.


Using Sass !global
 The default behavior for variable scope can be overridden by using
the !global switch.
 !global indicates that a variable is global, which means that it is
accessible on all levels.
 Look at the following example (same as above; but
with !global added):

SCSS Syntax:

$myColor: red;

h1 {
$myColor: green !global;
color: $myColor;
}

p {
color: $myColor;
}
CSS Output:

h1 {
color: green;
}

p {
color: green;
}
Sass Nested Rules and Properties
Sass Nested Rules
Sass lets you nest CSS selectors in the same way as HTML

nav {
ul { nav ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
li { nav li {
display: inline-block; display: inline-block;
} }
a { nav a {
display: block; display: block;
padding: 6px 12px; padding: 6px 12px;
text-decoration: none; text-decoration: none;
} }
}
Sass Nested Properties
 Many CSS properties have the same prefix, like font-family,
font-size and font-weight or text-align, text-transform and text-
overflow.
 With Sass you can write them as nested properties:

SCSS Syntax:

font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}

text: {
align: center;
transform: lowercase;
overflow: hidden;
}
CSS Output:

The Sass transpiler will convert the above to normal CSS:

font-family: Helvetica, sans-


serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;
Sass @import and Partials
Sass Importing Files
Just like CSS, Sass also supports the @import directive.
The @import directive allows you to include the content of one file in another.

Sass Import Syntax:

@import filename;

Example

@import "variables";
@import "colors";
@import "reset";
Example
SCSS Syntax (reset.scss):

html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
SCSS Syntax (standard.scss):
@import "reset";

body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
So, when the "standard.css" file is transpiled, the CSS will
look like this:

CSS output:

html, body, ul, ol {


margin: 0;
padding: 0;
}

body {
font-family: Helvetica, sans-
serif;
font-size: 18px;
color: red;
}
Sass Partials
 By default, Sass transpiles all the .scss files directly. However, when you
want to import a file, you do not need the file to be transpiled directly.
 Sass has a mechanism for this: If you start the filename with an
underscore, Sass will not transpile it. Files named this way are called
partials in Sass.
 So, a partial Sass file is named with a leading underscore:

Sass Partial Syntax:


_filename;
The following example shows a partial Sass file named "_colors.scss".
(This file will not be transpiled directly to "colors.css"):
Example

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Now, if you import the partial file, omit the underscore. Sass
understands that it should import the file "_colors.scss":
Example
@import "colors";

body {
font-family: Helvetica, sans-
serif;
font-size: 18px;
color: $myBlue;
}

You might also like