Getting started with css

Do U know these HTML Tags?
<body>I am main container</body>
<p> I am P tag </p>
<div> I am Div </div>
<span> I am Span </span>
HTML Reference
Pen for HTML

<P> or Paragraph Tag
- Paragraph tag is of type Block Content
- Special thing about <P> element is, browser will
not display more than one space character in a
row.
- It can contain other Tags/element

<div> or Division Tag
- Division tag is of type Block Content
- Division always starts on new line
- Block content tag can contain all type of inline and
block content tags
Examples of Block Content tags
<blockquote>, <p>, <ol>, <ul> etc.

<span> Tag
- Span is inline content type tag
- Does not begin with new line
- Mostly inline tags only contains inline tags
Examples of Inline tags
<b>, <strong>, <em>, <code> etc

Ways to apply CSS to HTML
Inline <p style="color: green">text</p>
Internal
<style type=”text/css”>
p{ color: green } </style>
External
mystyles.css file and content is:
p {color: green}

CSS Precedence
Browser Default (Lowest)
External Stylesheet
Internal Stylesheet
Inline Stylesheet (Highest)

The way HTML
has TAGS
CSS has SELECTORS

HTML TAG - CSS SELECTOR
How we will <p> it in
CSS?
1. #p{ }
2. :p{ }
3. p{ }
4. .p{ }
<p>
Hello Word
</p>
<div>
I am div
</div>

HTML Selectors are easy to understand as they are
just names of the HTML tags
HTML SELECTORS
<p></p>
<div></div>
<span></span>
p { }
div{ }
span{ }

Every selector has
- Curly Braces
selector always starts with curly braces { }
- Properties
Every property has a value
separated by Colon ( : ) not equal ( = )
Ends with semicolon ( ; )
SELECTORS

CSS uses many property specific units -
Codepen for units in CSS
px (pixel)
smallest and it is fixed size unit.
One pixel is equal to one dot on computer.
Pixel does not scale automatically :(
pt (point)
Used in print media.
Fixed size non-scalable
1pt = 1/72 inch
Units in CSS

Units in CSS
em
em is equal to font size of the parent element.
If parent element is 8px then that will be equal to 1em, 2em = 16px
If no font-size is defined on parent element then it is default 16px
Also em is scaleable unit. For responsive web design they are good
% (percentage)
Similar to “em”
font size = 100% e.g. 8px = 100%
completely scalable

Units in CSS
rem
Here comes new unit “root em” in css3
It works on root element <html> font-size and not on the immediate
parent size
If no font-size is defined on root element “html” then default is 16px
There are some more units - cm, in, mm etc

Colors
RGB (Red, blue, green)
Values in RGB ranges from (0 - 255)
Red - rgb(255,0,0)
Hexadecimal
Values in Hexadecimal ranges from (0 - f) i.e. (0-9 and a-f)
HSL (Hue, Saturation, lightness)
Values in HSL set like RGB (will cover this later….)
RGBa (Red, Blue, Gree, Alpha) - (will cover this later….)

CSS Color Properties
color
- Through this we specify font or border color. It is foreground color
div { color: orange; }
- Possible values for property are “
- inherit
- color value
background-color
Through this we specify the box color.
e.g. we’ll apply this property on a <div> tag, it will fill that <div> tag with
the specified background color

CSS Color Properties
background-color
div { background-color: yellow; }
- Possible values for property are
- transparent
- inherit
- color value
Pen for CSS color properties

Text Styling
To change the shape and size of the text on the web we
use multiple text properties
font-family - Basically it is the name of the font e.g. “Arial”, “Verdana”
font-size -
- Size of the font
- As learnt earlier it can use unit “px”, “pt” or “em” etc
font-weight - This will tell whether the font is bold or not
- bold
- normal
These values are supported in most of the browsers

Text Styling
font-weight -
Other than bold and normal there are other values which are supported in
new browsers
- 100, 200, 300, 400 (normal)
- (500, 600, 700) (bold)
font-style
To specify whether text style should be italic or not
- italic
- normal

Getting started with css

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Getting started with css

Similar to Getting started with css (20)

Recently uploaded

Recently uploaded (20)

Getting started with css