CSS From Scratch— Part 1

Outlining of the html elements. Border has 3 mandator properties — width, color, style.

CSS Tutorials

CSS exists to style your HTML — to present your content. The language of Cascading Style Sheets is somewhat different to HTML but it remains simple and straightforward.

Everything in these tutorials comply with CSS3. That’s the freshest, healthiest, sparkliest flavour of CSS. Its newer aspects will find their way into later tutorial pages.

CSS Beginner Tutorial

A step-by-step guide to CSS basics. Go here if you’re comfortable with basic HTML.

• Applying CSS – The different ways you can apply CSS to HTML.
• Selectors, Properties, and Values – The bits that make up CSS.
• Colors – How to use color.
• Text – How to manipulate the size and shape of text.
• Margins and Padding – How to space things out.
• Borders – Erm. Borders. Things that go around things.
• Putting It All Together – Throwing all of the above ingredients into one spicy hotpot.

CSS Intermediate Tutorial

Various odds-and-sods building on the basics of CSS.

• Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic!
• Grouping and Nesting: Properties assigned to multiple selectors or selectors within selectors.
• Pseudo Classes: Defining various states of a link selector.
• Shorthand Properties: Various properties, such as borders and margins that amalgamate other properties into one.
• Background Images: Guess.
• Specificity: How a browser will deal with conflicting CSS rules.
• Display: Specifying the characteristics of a box.
• Pseudo Elements: Styling first letters, first lines and placing content before and after elements.
• Page Layout: Floating and positioning boxes.

CSS Advanced Tutorial

Exploiting the versatile depths of CSS.

• Rounded Corners: Corners. That are rounded.
• Shadows: Adding “pop” to boxes and text.
• Universal, Child, and Adjacent Selectors: More precise aim with clever selectors.
• Advanced Colors: Alpha transparency and HSL.
• At-Rules: Importing style sheets, styles for different media types, specifying the character set of a stylesheet and embedded fonts.
• Attribute Selectors: Targeting boxes by their elements’ HTML attributes.
• CSS Transitions: Creating smooth animations.
• Backgrounds: Multiples, Size, and Origin
• Transformations: Molding the size and shape of a box and its contents.
• Gradients: Linear and radial gradients without image files.
• Media Queries: Optimizing pages for different devices and screen sizes.

Related pages

• HTML Tutorials
• JavaScript Tutorials

Cascading Style Sheets

Beautify the HTML page and add better presentation part to our website.

Ways to use CSS in HTML page:

1. Inline CSS: Using css styles within the html tags:

        
Name: Rishabh
Role: JavaScript Developer  

2. Internal CSS: Writing CSS styles in the style tag in the html page inside the head tag of page.

Basic Syntax of writing Inline CSS:

 
 p color: darkorchid 
>


Name: Rishabh

Role: JavaScript Developer

3. External CSS: Create a separate css file and include that file using link tag inside head section.

 
p color: black> 


Name: Rishabh

Role: JavaScript Developer

Selectors for CSS:

Single Selector:

Multiple Selector:

For selecting using id : #id_name

For selecting using class : .class_name

Nested Selectors: Suppose we want to update some specific tag using some other tag/div/class. In below example we are setting the background color of all paragraphs which are inside the element with >

line-height: specifies the vertical distance between lines of text. By default line-height is normal.

       --> p line-height: 10em;>   
Name: Rishabh
Role: JavaScript Developer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quos incidunt voluptates sint sunt consequuntur, laborum reprehenderit harum dicta quasi dignissimos, eius autem praesentium molestias vitae eligendi quam libero ea!  

font-family: Lot of fonts are available by default in css that are supported by all the browsers but we can also import custom one’s. We generally see in each family there are 3–4 fonts are available

For e.g: font-family: ‘Times New Roman’, Times, serif;

So in this if due to some reason Times New Roman stops working then Times will work and if Times are not working then Serif will Work. We can consider other one’s as failover handling.

Color Types:

1. Color Name i.e Red, Blue, Green
2. RGB Values i.e rgb (0, 0, 0) denotes Black as no value for red, green and blue. Here maximum value is 255 and all 255 denotes white color.
3. Hexadecimal Value: #ffffff (white), #000000(black)

Borders in CSS:

Outlining of the html elements. Border has 3 mandator properties — width, color, style.

 p border-width: 1px;border-color: darkslateblue;border-style: double;>
// or 
p border: 3px solid black;
> 

We can have border on only any side using: border-top, border-left..

For rounded corners of border we have border-radius.

Box Model:

Every element displayed on page is positioned based on box model. Blue Rectangle depicts the content in the element. Greens displays the padding and is generally the distance between the border and the element content. Outside Border is margin i.e space from above elements/page.

 --> #rishabh >   
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur, eius?   

For the above html page for div element below is the box model.

In this orange part is margin ( 16px from top and bottom that is present by default for paragraph element) and padding and border is 0 here.

Now by overriding the default margin to 0 using CSS — No orange space is coming. Below is updated element:

Also sometimes we need to reset the default margin and padding for the website. To reset default things for all elements then we can do like below:

* margin: 0; 
padding: 0; 
>

Now adding some padding, border and margin to the div:

 * margin: 0; 
padding: 0; 
>#rishabh padding: 20px; 
margin: 10px; 
border: 3px solid red; 
>

Below is box model now:

Orange: Margin, Green: Padding, Blue: Content, Red: Border

Note: Padding adds the width of element. Suppose if we set the width of div to 100 px and give 50px padding then we will get the total width of element = 150px. But in most cases we want the width to be 100px (given one) only so to get that working we can set the box-sizing property to border-box.

* box-sizing: border-box 
>

Padding: top right bottom left ( for different values of padding on different sides using single property). Also we use like top/bottom left/right

Aligning Items:

Align div’s to centre and aligning text to centre:

       --> body font-family: 'Times New Roman', Times, serif;line-height: 1.6em;>.container max-width: 960px;margin: 30px auto;>.box background-color: floralwhite;border: 2px solid green;padding: 20px;margin-bottom: 15px;>.box text-align: center;>   Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi hic neque reprehenderit ipsam autem minima id eos vitae repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, a inventore. Autem, consequuntur deleniti magni earum cupiditate possimus accusantium esse? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem earum nam reiciendis consequuntur vel voluptatem maiores facere repellat ratione officiis!    

Float in CSS:

Used for arranging grids like structure.

Now as we got flex so we are not using floats much as they are complex in writing(clear them to avoid overlap) as well as give issues with responsive design.

       --> * box-sizing: border-box;>body font-family: 'Times New Roman', Times, serif;line-height: 1.6em;>.container max-width: 960px;margin: 30px auto;>.box background-color: floralwhite;border: 2px solid green;padding: 20px;margin-bottom: 15px;>.box text-align: center;>#box-2 float: left;width: 65%;>#box-3 float: right;width: 32%;>   Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi hic neque reprehenderit ipsam autem minima id eos vitae repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, a inventore. Autem, consequuntur deleniti magni earum cupiditate possimus accusantium esse? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem earum nam reiciendis consequuntur vel voluptatem maiores facere repellat ratione officiis!    

Now if we have box4 in the same layout then we will get overlap.

To resolve this we need to have

.clr clear: both; 
>

And put after box 3

Reference: Traversy Media Udemy HTML CSS Course