CSS3 Tutorials 104 – Web Development

Hey!! Friends, we are back again with a new article of CSS3 Tutorials. Here we will start from where we finished in the previous article. In this, we are going to cover the Advanced part of the CSS Tutorial

If you missed the previous article, then check once Tutorial on CSS 103.

what content cover in this article:

CSS Advanced
Outline
Cursors
Overflow  
Dimension  
Units

CSS Outline

An outline is a line drawn just the outer side of the border edge of the elements like buttons, active form fields, etc., to make them stand out.

What is the main difference between Outlines and Borders?

As we can see that from there words that outlines are very similar to borders, but there are few critical differences as well −

  • An outline does not take up space.
  • Outlines do not have to be rectangular.
  • An outline is always the same on all sides; we cannot specify different values for different sides of an element.

CSS outline-width Property

The outline-width of CSS3 property defines the width of the outer line to be added on an element. Its value is in length (pt, px, em, and so on) or one of the allowed keywords, but percentage or negative values are not allowed.

For example:

<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is example of thin outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:solid;">
This text is example of thick outline.
</p>
<br />
<p style = "outline-width:5px; outline-style:solid;">
This text is example of 5x outline.
</p>
</body>
</html> 

Output be like:

css3 tutorials

The outline-style and outline-color Property

The outline-style property sets the style for an outline such as solid, dotted, etc. This property takes one of the following values:  nonehiddendasheddotteddoublegrooveinsetoutsetridge and solid.

The outline-color property specifies the color of the outline. Its value should be a color name, a hex color, or an RGB value, as with the color and border-color properties.

For example:

<html>
<head>
</head>
<body>
<p style = "outline-width:thin; outline-style:solid;outline-color:yellow">
This text is example of thin solid yellow outline.
</p>
<br />
<p style = "outline-width:thick; outline-style:dashed;outline-color:#00ff00">
This text is example of thick dashed green outline.
</p>
<br />
<p style = "outline-width:6px;outline-style:dotted;outline-color:rgb(13,33,232)">
This text is example of 6x dotted blue outline.
</p>
</body>
</html> 

Output be like:

css3 tutorials

CSS Cursors

The cursor feature in CSS controls what the mouse cursor will look like when it is located over the element in which this section is set.

Changing the Look of Cursor

If a cursor hovers over a link, this cursor changes from a pointer to a hand. It is by default. However, it does not change form for a submit button on a form. As a result, whenever we hover over an image, if that is a submit button, it will give us a visual clue that the image is clickable.

This table demonstrates the different cursors that most browsers will accept.

css3 tutorials
Different Cursors with icons

For example:

h1 { 
cursor: move; 
} 
p { 
cursor: text; 
}

The cursor property handles a comma-separated list of user-defined cursor values followed by the generic cursor.

Syntax of Creating a cursor:

a { 
cursor: url("custom.gif"), url("custom.cur"), default; 
}

The cursor property is defined as zero or more <url> values, separated by commas, followed by a single necessary keyword value. Each <url> should point to an image file.

CSS Overflow

The overflow property of CSS specifies how to handle the content when it overflows its block-level container.

The overflow property has the following values:

  • Visible – It specifies that overflow is not clipped. It renders outside the element’s box.this is a default value.
  • Hidden – The overflow is clipped, and the rest of the content will be invisible
  • scroll – Content is clipped if necessary to fit the padding-box, and a scrollbar is added to see the rest of the content
  • auto – Similar to scroll, but it adds scrollbars only when necessary. If content fits inside the padding-box, it looks the same visible but still establishes a new block formatting context.

For example:

div { 
width: 250px;
height: 150px; 
overflow: scroll; 
}

CSS Dimension

In this section, we will learn how we can change the dimensions of boxes.

We have the following properties that allow you to control the dimensions of a box.

  • The height property mainly uses to set the height of a box.
  • The width property uses to set the width of a box.
  • The line-height property uses to set the height of a line of text.
  • The max-height property uses to set a maximum height that a box can be.
  • The min-height property uses to set the minimum height that a box can be.
  • The max-width property uses to set the maximum width that a box can be.
  • The min-width property uses to set the minimum width that a box can be.

The Height and Width Properties

The height and width attributes are applied to set the height and width for boxes. They take the values of a length, a percentage, or the keyword auto.

For example:

<html>
<head>
</head>

<body>
<p style = "width:500px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 500pixels wide and 100 pixels high
</p>
</body>
</html> 

The line-height Property

css3 tutorials

The line-height property allows us to increase the space between lines of text. The value of the line-height property it can be a number, a length, or a percentage.

For example –

<html>
<head>
</head>

<body>
<p style = "width:250px; height:100px; border:1px solid blue; padding:6px; margin:12px; line-height:30px;">
This paragraph is 300pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 300 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>

The max-height Property and min-height Property

Max-heightMin-height
The max-height property allows to specify the maximum content height of a box. Example: div { height: 300px; max-height: 100px; }The min-height property allows to specify the minimum content height of a block. div { height: 200px; min-height: 300px; }


The max-width Property and min-width Property

Max-widthMin-width
The max-width property allows to specify the maximum content width of a block. This maximum width does not include padding, borders, or margins. Example: div { width: 300px; max-width: 200px; }The min-width property allows to specify the minimum content width of a block. This minimum width does not include padding, borders, or margins. Example: div { width: 300px; min-width: 400px; }

CSS Units

CSS has several various units for expressing a length. Many CSS features take “length” values, such as width, margin, padding, font-size, etc.

The numeric type you will come across most frequently is, for example, 10px (pixels) or 30em.

There are two states of length units: absolute and relative.

Absolute Length Units

The Absolute length units are fixed in relation to each other.

The below mentioned are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.

UnitDescription 
ininches – 1in is equal to 2.54cm. 
cmcentimetres. 
mmmillimeters. 
ptpoints – In CSS, one point is defined as 1/72 inch (0.353mm). 
pcpicas – 1pc is equal to 12pt. 
pxpixel units – 1px is equal to 0.75pt. 

Relative Length Units

The Relative length units have specified a length relative to another length property. The relative units are:

css3 tutorials

The em and ex units depend on the font size that’s applied to the element.

FAQs: Frequently asked questions

What is property?

Property is a stylistic parameter in CSS which we also called as attributes. Width, length, height are some properties of CSS.

What is Value?

Values are “Physical” characteristic of the properties. Basically, we can say that value is what we assign to the property. For example:
for the FONT property, we choose 12pt and another example like:
H1 {font: bold 180%}

What is shorthand property?

As casually shorthand property is the property property made up of individual properties that have a common “addressee”. For example:
H1 {
font-weight: bold;        
font-style: italic;        
font-variant: small-caps;        
font-size: 160%;        
font-family: serif
}
Here, weight ,style and others are work line shorthand property.

To be continued…

css3 tutorials, css3 tutorials, css3 tutorials, css3 tutorials, css3 tutorials

96 thoughts on “CSS3 Tutorials 104 – Web Development

  1. What’s up, all is going nicely here and ofcourse every one is sharing
    information, that’s genuinely excellent, keep up writing.

  2. Awesome! Its in fact awesome paragraph, I have got much clear idea on the topic of from this article.

  3. I used to be recommended this website by means of my cousin. I’m
    no longer sure whether or not this post is written through him as no one else know
    such unique approximately my difficulty. You are amazing!
    Thank you!

  4. Great post. I was checking constantly this blog and I’m impressed!
    Very helpful info particularly the last part 🙂
    I care for such info much. I was seeking this particular information for a long time.
    Thank you and good luck.

  5. Great blog you have here.. It’s hard to find good quality writing like yours nowadays.
    I truly appreciate individuals like you! Take care!!

  6. It’s difficult to find knowledgeable people on this topic, however, you sound like you know what you’re
    talking about! Thanks

  7. Hello! I simply want to offer you a huge thumbs up for the
    excellent info you have got here on this post.
    I am returning to your site for more soon.

  8. Hi, I do believe this is an excellent web site.
    I stumbledupon it 😉 I am going to revisit yet again since i have bookmarked it.

  9. Hi there, You have done a great job. I’ll definitely digg
    it and personally suggest to my friends. I am sure they will be benefited from this web site.

  10. Aw, this was an exceptionally good post. Finding the time and actual effort to
    create a top notch article… but what can I say… I hesitate a whole lot and don’t
    manage to get anything done.

  11. You ought to take part in a contest for one of the best sites on the internet.

    I’m going to highly recommend this blog!

  12. Wow, fantastic weblog structure! How long have you ever been running a blog for?

    you make blogging look easy. The whole look of your website is wonderful, let alone the content material!

  13. It’s appropriate time to make some plans for the future and it is time to be happy.
    I have read this post and if I could I want to suggest you some interesting
    things or tips. Perhaps you could write next articles referring to this article.

    I want to read even more things about it!

  14. Hi! Do you use Twitter? I’d like to follow you if that
    would be ok. I’m definitely enjoying your blog and look forward to new posts.

  15. When some one searches for his essential thing,
    so he/she wishes to be available that in detail,
    so that thing is maintained over here.

  16. Great goods from you, man. I’ve understand your stuff previous to and you are just too excellent.
    I actually like what you have acquired here, really like
    what you’re stating and the way in which you say it.
    You make it entertaining and you still care for to keep it sensible.
    I can not wait to read far more from you. This is really a great website.

  17. Thanks for the good writeup. It in fact was once a enjoyment account it.
    Glance complex to more delivered agreeable from you! However, how
    can we communicate?

  18. Your way of explaining the whole thing in this paragraph is
    in fact fastidious, all be capable of simply understand it,
    Thanks a lot.

  19. Wow, marvelous blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your website is excellent,
    let alone the content!

  20. Do you mind if I quote a couple of your articles as long as
    I provide credit and sources back to your webpage? My blog is
    in the very same niche as yours and my users would certainly benefit
    from a lot of the information you provide here. Please let me know if
    this okay with you. Cheers!

  21. Nice post. I learn something new and challenging on sites I stumbleupon on a daily basis.
    It will always be helpful to read through content from other writers and
    use something from their sites.

  22. Nice post. I learn something totally new and challenging on websites I stumbleupon everyday.

    It will always be helpful to read content from other writers and use a little something
    from other websites.

  23. Howdy! I could have sworn I’ve been to this website before but after browsing through some of the post
    I realized it’s new to me. Anyways, I’m definitely delighted
    I found it and I’ll be bookmarking and checking back frequently!

  24. It’s really a cool and helpful piece of information. I’m glad that you
    just shared this useful information with us. Please keep us up to date like this.
    Thanks for sharing.

  25. Wow, marvelous blog format! How lengthy have you been blogging for?
    you made running a blog look easy. The whole look of your web
    site is wonderful, let alone the content material!

  26. Excellent weblog here! Additionally your site a lot up fast!
    What host are you using? Can I get your affiliate link in your host?
    I want my web site loaded up as fast as yours lol

  27. You could certainly see your expertise in the article you write.
    The world hopes for even more passionate writers like you who aren’t afraid to mention how they believe.
    Always follow your heart.

  28. I think this is among the most vital info for me. And i’m glad reading your article.
    But should remark on few general things, The
    web site style is great, the articles is really nice : D.
    Good job, cheers

  29. I love your blog.. very nice colors & theme. Did you make this
    website yourself or did you hire someone to do
    it for you? Plz reply as I’m looking to construct my own blog and would like to know where u
    got this from. cheers

  30. I havce found very interesting your article.It’s pretty worth
    enough for me. In my view, if all website owners
    and bloggers ade good content as you did, the web will
    be a lot mor useful than ever before.

  31. Simply wish to say your article is as astounding. The clarity in your post is
    simply cool and i can assume you’re an expert on this subject.
    Well with your permission allow me to grab your feed to keep up
    to date with forthcoming post. Thanks a million and please carry on the rewarding
    work.

  32. I blog frequently and I genuinely appreciate your
    information. This article has really peaked
    my interest. I’m going to take a note of your blog and keep checking for new details about once per week.

    I opted in for your RSS feed as well.

  33. When someone writes an piece of writing he/she maintains the plan of a user in his/her mind that how a user can know it.
    So that’s why this post is outstdanding. Thanks!

  34. Way cool! Some very valid points! I appreciate you writing this article and the rest of the site is also very good.

  35. This is the perfect website for everyone who would like to understand this topic.
    You realize so much its almost tough to argue with you
    (not that I actually would want to…HaHa). You definitely
    put a fresh spin on a topic that has been discussed for
    decades. Wonderful stuff, just great!

  36. Thanks for ones marvelous posting! I definitely enjoyed reading it, you
    can be a great author. I will make sure to bookmark your blog and will come back later in life.
    I want to encourage one to continue your great writing, have a nice afternoon!

  37. I have found very intesresting your article.It’s pretty
    worth enough for me. In my view, if all website owners and bloggers made good content as you did, the
    web wikll be a lott more usefhl than ever before.

  38. Nice post. I was checking continuously this blog and
    I’m impressed! Very useful information specially the last part 🙂 I cre ffor such info a lot.I
    was looking for this particular information for a long time.

    Thank you and best of luck.

  39. Hello I am Kavin, it’s my first occasion to commenting anyplace, when I read this paragraph I thought
    I could also create comment due to this good post.

Leave a Reply

Your email address will not be published. Required fields are marked *