getting started with css
TRANSCRIPT
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 ReferencePen 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 tagsExamples 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 HTMLInline <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 PrecedenceBrowser Default (Lowest) External StylesheetInternal StylesheetInline 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-scalable1pt = 1/72 inch
Units in CSS
Units in CSSem
em is equal to font size of the parent element. If parent element is 8px then that will be equal to 1em, 2em = 16pxIf no font-size is defined on parent element then it is default 16pxAlso 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 CSSrem
Here comes new unit “root em” in css3It works on root element <html> font-size and not on the immediate parent sizeIf no font-size is defined on root element “html” then default is 16px
There are some more units - cm, in, mm etc
ColorsRGB (Red, blue, green) Values in RGB ranges from (0 - 255)Red - rgb(255,0,0)
HexadecimalValues 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 Propertiescolor- Through this we specify font or border color. It is foreground
colordiv { color: orange; }
- Possible values for property are “- inherit- color value
background-colorThrough 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 Propertiesbackground-color
div { background-color: yellow; }- Possible values for property are
- transparent- inherit- color value
Pen for CSS color properties
Text StylingTo change the shape and size of the text on the web we use multiple text propertiesfont-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 Stylingfont-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
Questions?
